Figmotion is currently not in focus что это

8

Плагин Figmotion работает некорректно

Не удается анимировать объекты. Figmotion не загружает дорожки и выдает ошибку «Figmotion is currently not in focus. Shortcuts will not work». Проблема возникает и в браузерной и в десктопной версии, os win.

Ссылка на комментарий

Поделиться на другие сайты

• Ответы 1
• Создана 2 май 2022, 07:34
• Последний ответ 26 сен 2022, 10:15

Лучшие авторы в вопросе

Популярные дни

Лучшие авторы в вопросе

nastya2708 1 пост

Maria Sysoeva 1 пост

Популярные дни

Популярные посты

nastya2708

2 май 2022, 07:34

Не удается анимировать объекты. Figmotion не загружает дорожки и выдает ошибку "Figmotion is currently not in focus. Shortcuts will not work". Проблема возникает и в браузерной и в десктопной версии,

1 ответ на этот вопрос

• Сортировать по голосам
• Сортировать по дате

Рекомендуемые сообщения

Присоединяйтесь к обсуждению

Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.
Примечание: Ваш пост будет проверен модератором, прежде чем станет видимым.

13 плагинов для создания и настройки анимаций в Figma

Figmotion

Motion — позволяет добавлять в интерфейс взаимодействия, впечатляющие эффекты или анимации персонажа для мобильной игры. Пошаговая инструкция со скриншотами Как создать ультра-плавные анимации в плагине Figma Motion. Автор рассказывает об интерфейсе плагина и объясняет основы анимации на примере загрузчика, прыгающего круга и всплывающего сообщения

Motion

Aninix — помогает создавать продвинутые анимации интерфейса и экспортировать готовые спецификации для разработчиков. Видеообзор на русском языке

Aninix

Physics animation — создаёт реалистичную анимацию падения фигур (аналог плагина Newton для After Effects). Доступен экспорт в форматы WebM, GIF и SVG

SUPA — превращает макеты в видео. Пригодится, например, для разработки анимированных баннеров

SUPA

LottieFiles — позволяет создавать анимации в lottie-формате или использовать готовые анимации из библиотеки Lottie

LottieFiles

Beatflyer Lite — помогает анимировать слои в несколько кликов, применяя интересные эффекты. Руководство по использованию

Beatflyer Lite

Bannerify Banner Studio — анимирует и экспортирует готовые баннеры из Figma в HTML, GIF и видео. Подробный обзор плагина

Bannerify Banner Studio

GiffyCanvas — позволяет собирать GIF-анимации из статичных фреймов. Можно генерировать GIF с прозрачным фоном

GiffyCanvas

Flipbook Animator GIF — анимирует фреймы. Можно менять скорость анимации, переключать анимацию с последнего кадра на первый и экспортировать в GIF-файл

Flipbook Animator GIF

eezin — помогает настраивать плавность анимации в прототипах с помощью кривых ускорения

eezin

Jitter— позволяет импортировать проект в Jitter для анимации и экспорта в видео или GIF. Jitter — простой бесплатный веб-сервис для создания интерфейсной анимации

Jitter

SVG motion — помогает создавать простые векторные анимации

Figmotion is currently not in focus что это

Оформляйте стили наведения, фокуса и активного состояния по-разному

Вот пример кода, который всегда использовал.

Когда я стал уделять больше внимания доступности интерфейса при работе с клавиатуры (состоянию фокуса в частности), пришел к выводу, что мы не должны одинаково стилизовать разные состояния элементов.

Наведение, фокус и активное состояние должны стилизоваться по-разному.

Причина проста: Это разные состояния!

Сегодня я хочу продемонстрировать вам волшебный способ оформить все три состояния без особых усилий.

Стилизация наведения (:hover)

:hover срабатывает, когда пользователь наводит на элемент курсор мыши.

Стилизация фокуса (:focus)

:focus срабатывает, когда элемент получает фокус. Это достигается двумя способами:

Когда пользователи нажимают «Tab», они не знают, к какому элементу перейдет фокус, а могут лишь предполагать. Вот почему нам нужно заметное изменение состояния — чтобы привлечь внимание пользователя на сфокусированный элемент.

В большинстве случаев оформление фокуса по умолчанию вполне подходит. Если вы хотите стилизовать его по-своему, помните об этих четырёх моментах:

Стилизация активного состояния (:active)

При взаимодействии с чем-то в реальной жизни, вы ожидаете своего рода отклик. Например, при надавливании на кнопку, вы ожидаете, что она нажмётся.

Две особенности, которые следует принять к сведению:

Стили ссылок по умолчанию

Ссылки имеют стили активного состояния по умолчанию. При нажатии они становятся красными

Взаимосвязь между :active и :focus

При удержании левой кнопку мыши на фокусируемом элементе, вызывается его активное состояние. Но одновременно с этим вызывается и состояние фокуса.

Когда вы отпускаете левую кнопку мыши, фокус остаётся на элементе.

Это относится к большинству фокусируемых элементов, кроме ссылок и кнопок.

Добавление этого кода изменит поведение нажатия кнопок на следующее:

Теперь, когда вы знаете всё необходимое о состояниях hover, focus и active, я хочу поговорить о стилизации всех трёх

Волшебная комбинация

Волшебная комбинация позволяет пользователям получать отклик, когда они наводят, фокусируются или взаимодействуют с элементом. Вот код, который вам нужен:

Для пользователей мыши:

Для пользователей клавиатуры:

Лучшее из обоих миров!

Не волшебная (но может даже лучше) комбинация

Как я упомянул выше, клики на кнопки имеют странное поведение в Safari и Firefox на Mac OS. Если вы добавили фрагмент JavaScript-кода, который я предлагал выше, магическая комбинация всё еще работает. Но не идеально.

Вот что произойдёт в Safari и Firefox на Mac OS:

Если вы считаете, что этого достаточно, то волшебная комбинация работает. Можете на этом и остановиться.

Поведение кнопки в Safari, если были стилизованы все три состояния

Вот и всё! Благодарю за чтение и надеюсь, сегодня вы узнали что-то новое.

Figmotion is currently not in focus что это

14 Reserved.
15 Pre-memory North-Bridge initialization is started.
16

18 Reserved.
Показать полностью.
19 Pre-memory South-Bridge initialization is started.
1A

2F Memory initialization.
31 Memory installed.
32

36 CPU PEI initialization.
37

3A IOH PEI initialization.
3B

3E PCH PEI initialization.
3F

4F Reserved.
60 DXE Core is started.
61 NVRAM initialization.
62 Installation of the PCH runtime services.
63

67 CPU DXE initialization is started.
68 PCI host bridge initialization is started.
69 IOH DXE initialization.
6A IOH SMM initialization.
6B

6F Reserved.
70 PCH DXE initialization.
71 PCH SMM initialization.
72 PCH devices initialization.
73

77 PCH DXE initialization (PCH module specific).
78 ACPI Core initialization.
79 CSM initialization is started.
7A

7F Reserved for AMI use.
80

8F Reserved for OEM use (OEM DXE
initialization codes).
90 Phase transfer to BDS (Boot Device Selection) from DXE.
91 Issue event to connect drivers.Regular Boot
92 PCI Bus initialization is started.
93 PCI Bus hot plug initialization.
94 PCI Bus enumeration for detecting how many resources are requested.
95 Check PCI device requested resources.
96 Assign PCI device resources.
97 Console Output devices connect(ex.Monitor is lighted).
98 Console input devices connect(ex.PS2/USB keyboard/mouse are activated).
99 Super IO initialization.
9A USB initialization is started.
9B Issue reset during USB initialization process.
9C Detect and install all currently connected USB devices.
9D Activated all currently connected USB devices.
9E

9F Reserved.
A0 IDE initialization is started.
A1 Issue reset during IDE initialization process.
A2 Detect and install all currently connected IDE devices.
A3 Activated all currently connected IDE devices.
A4 SCSI initialization is started.
A5 Issue reset during SCSI initialization process.
A6 Detect and install all currently connected SCSI devices.
A7 Activated all currently connected SCSI devices.
A8 Verify password if needed.
A9 BIOS Setup is started.
AA Reserved.
AB Wait user command in BIOS Setup.
AC Reserved.
AD Issue Ready To Boot event for OS Boot.
AE Boot to Legacy OS.
AF Exit Boot Services.
B0 Runtime AP installation begins.
B1 Runtime AP installation ends.
B2 Legacy Option ROM initialization.
B3 System reset if needed.
B(4,5) USB(PCI) device hot plug-in.
B6 Clean-up of NVRAM.
B7 Reconfigure NVRAM settings.
B8

CF Reserved.
E0 S3 Resume is stared(called from DXE IPL).
E1 Fill boot script data for S3 resume.
E2 Initializes VGA for S3 resume.
E3 OS S3 wake vector call.S3 Resume
F0 Recovery mode will be triggered due to invaild firmware volume detection.
F1 Recovery mode will be triggered by user decision.
F2 Recovery is started.
F(3,4)Recovery firmware image is found(loaded)
F5

F7 Reserved for future AMI progress codes.
50

55 Memory initialization error occurs.
56 Invalid CPU type or speed.
57 CPU mismatch.
58 CPU self test failed or possible CPU cache error.
59 CPU micro-code is not found or micro-code update is failed.
5A Internal CPU error.
5B Reset PPI is failed.
5C

5F Reserved.
D(0,1,2)-(CPU,IOH,PCH) initialization error.
D3 Some of the Architectural Protocols are not
available.
D4 PCI resource allocation error. Out of Resources.
D5 No Space for Legacy Option ROM initialization.
D(6,7) No Console Output(input) Devices are found.
D8 It is an invaild password.
D9

DA Can’t load Boot Option.
DB Flash update is failed.
DC Reset protocol is failed.
DE

DF Reserved.
E8 S3 resume is failed.
E9 S3 Resume PPI is not found.
EA S3 Resume Boot Script is invaild.
EB S3 OS Wake call is failed.
EC

EF Reserved.
F8 Recovery PPI is invaild.
F9 Recovery capsule is not found.
FA Invalid recovery capsule.
FB

Focus in Jetpack Compose

It takes a mindset shift to really get going with Compose. When you start thinking in the right way, working with declarative UI is incredibly fast and rewarding. It takes time to train yourself out of old habits, relearning how to do things. Focus management is a little different in Compose versus what we’re used to in plain old Android, so let’s take a look!

Setting the scene

For a short while I’ve been working on a todo list app as a side project. This app is set to do many fancy things, with a UI built entirely in Compose. Disregard all the fancy things for the time being, and let’s focus on the core experience of using this app. Here’s a snippet of code describing a basic todo list.

I set out this morning to improve the navigability of this list. It should be quick and easy to add and remove todos using nothing but the keyboard. This gif shows the kind of behaviour I was after, taken from Google Keep.

In a nutshell, if I’m typing out a thing that needs doing and press enter, I expect my cursor to move to a new line with a new todo item. If I backspace out an item entirely, I expect the item to be deleted and my cursor to be moved to the line above. It’s clear we need to manage focus, so let’s look at our options.

FocusManager

Compose UI includes a FocusManager type which allows you to push focus around in one-shot calls, perfect for simple content traversal.

For example, you might have a simple column of TextField s in a form which you want to navigate through when the user presses the “next” button on their keyboard. FocusManager will traverse your focus hierarchy for you, and find the next thing to focus on in the direction you ask for. Here’s some code, with FocusDirection.Down causing the focus to move to the next field in the list.

Focus Modifiers

You can interact with the focus mechanisms in Compose through a few different modifiers

To understand how these work, let’s look at some examples.

Observing focus state with onFocusChanged

onFocusChanged allows you to react to focus changes affecting your composable, or it’s children:

You can get finer-grained changes via the onFocusEvent modifier, which will emit a new FocusState whenever the internal focus state is written to.

Implement focussing for a custom Layout

When implementing a custom composable, you may it to be focusable for interactivity. In this case, focusTarget() is your friend!

Changing the focus order

There might be cases where you want the focus order to differ from the default. In most cases this is inadvisable, but if you need it, here’s how to do it. One bad example could be skipping over fields when they’re populated with valid data.

Requesting focus of a specific component programmatically

Even more inadvisably, you can opt to manage focus all by yourself! This can be a bad idea if you’re not careful enough, as it’s easy to miss subtleties in how focus traversal is expected to work. If you are careful enough, you end up re-implementing focus traversal logic without using focus internals — not fun. In general, it’s worth trying to piggyback off FocusManager as much as possible.

If this is absolutely something you need to do though, you can use FocusRequester with the focusRequester() modifier to programmatically request focus for specific components.

Traversing a todo list

Now that we’ve seen all there is to see with focus, let’s try and apply it to our todo list problem.

Focus is a tricky subject, and one which could negatively impact your users if not done correctly. The focus APIs in Compose let you configure focus as much or as little as you like — hopefully this gives you an idea of what’s possible!

If you want to see more, follow me on Medium. Alternatively, I’ll be cross posting to my own personal blog, and I occasionally tweet.

How to use Figmotion Figma Plugin

Показать панель управления

Комментарии • 62

Interested in mastering figma? Sign up here!
tutorialtim.com/signup

Thank you, Мирослава!

Thank you! So helpful! ✨

bro, thanks for the video, but the pronunciation is JIF lol
according to jimmy Fallon at least

volume solo might as well mute for an even better experience ��

mic issues have been addressed since then, my apologies!

Maybe you should watch some tutorials on how to make tutorial videos.

That was a really very helpful tutorial. I was struggling for the last 2 days this tutorial was a lifesaver to me. Thank you very much. I really find it so helpful and easy to understand. (>‿◠)✌

Thank you, Sonu! Glad I could help!

how the hell do you scroll horizontally in figmotion. there’s no scroll bar or anything

Using now, have to echo the other comment, it’s fairly aggravating having the floating panel stuck on the screen, cant adjust it, if you’ve got a smaller screen than a 1920 desktop it’s pretty unusable. Shame because otherwise it’s a good plugin

Yeah, I agree. It should be at least accessible via another monitor window. But I guess that’s all we get ��

Audio issues with my old mic from the past, sorry about that.

Hey, Tim! Thanks for the enlightening content! I have a question about how do we use the animation in a prototype. I know maybe that’s a noob question (I’m a little in motion design), but I couldn’t find a way so I can use it in my project prototype. If you could please help me 🙂
Thanks again for the content

Animations I’ve created

Hey Vinicius I hope you’re doing well. When you say use the animation in a prototype are you referring to importing some animation into Figma or the animations you created in Figma in the Prototype?

I’m new to Figma,so happy to find your channel,awsome tutorials

Thank you so much, Vivian!

I’m trying to use Figmotion to create motion for an app, but the JSON doesn’t show anything when the developers upload it to the app code. Do you have any idea what is happening? I can see the animation when I render it

Prior to you sending the JSON file to the developers were you able to open up the file in a code editor to verify that the export was successful? I’d check to see if any issues lie in the process of opening up the file. Maybe even viewing the changelog of the figma plugin to see if it is a noted issue or uninstall and re-install the plugin and re-render > export the animation.

Sorry, but nothing of what I want to animate in my frame happens. Objects «twitch» once, move a little. then everything passes again. Playhead at the beginning, nothing is like before as at the start. So, if my computer and my Figma are not defective, or there is no problem with Catalina. then I don’t understand anything. From After Effects, Flash, Apple Motion I know one thing. Set keyframe for the start, move the play head forward, change the parameters and you have a new keyframe. Between both will betweens. That’s what I want. Unfortunately, I don’t see any of that here. Actually I would like something like Adobe animate. Only not so powerful. Thanks

pls suggest best icon plugin in figma

How to get button effect in Figma please tell

How do you select multiple keyframes to move the whole animation along the timeline?

This is a little harder than it should be. Initial state = add keyframe. Transition = add keyframe. Not sure why it has to be harder than that.
Update: So this plugin is useless if you’re trying to animate anything nested. If you’re trying to mask something and animate it, it just doesn’t work. I’m nested two layers down

Well explained, thanks.

Thank you. I’ll have to try this tomorrow!

How is figmotion better than the current «smart animate» in figma?

I would say that Figmotion allows you to be more creative when creating a motion-oriented animation and it also gives you the ability to export your motion outside of Figma in a couple of formats I believe. But utilizing Figmotion is also tedious due to the tool having some irritating UX issues in my opinion which has been expressed by other users of the plugin as well. Also, Figmas offers sets of animation features with several constraints per animation feature. Also, how you can customize your motion can be limiting in Figma whereas if you’re using Figmotion you have the ability to do more as the tool seems to be a minified version of After Effects. A really minified version of it. haha
Both are great, but Figma gets you up and running with a lot of the stuff available out of the box so to speak.
Hope this helps Rachid!

one quik question, how do i place it into my prototype so it animates when i’m showing it.
it seem like a common question with no answer

Yeah it’s weird that isn’t spelled out. What you do is export it as a GIF, then take that gif and put it on your canvas. When you click on the prototype view play button, it will animate in a prototype you made. This works great for things like loading elements. This seems like generally more of a pain in the ass than just getting principle though. Or, hell Framer for Web is free now and FANTASTIC. Go try that out.

hi, the figmotion plugin is not rendering animation in prototype mode
I can’t see them while i’m interacting with my design

How to use Figmotion Figma Plugin

Показать панель управления

Комментарии • 62

Interested in mastering figma? Sign up here!
tutorialtim.com/signup

Thank you, Мирослава!

Thank you! So helpful! ✨

bro, thanks for the video, but the pronunciation is JIF lol
according to jimmy Fallon at least

volume solo might as well mute for an even better experience ��

mic issues have been addressed since then, my apologies!

Maybe you should watch some tutorials on how to make tutorial videos.

That was a really very helpful tutorial. I was struggling for the last 2 days this tutorial was a lifesaver to me. Thank you very much. I really find it so helpful and easy to understand. (>‿◠)✌

Thank you, Sonu! Glad I could help!

how the hell do you scroll horizontally in figmotion. there’s no scroll bar or anything

Using now, have to echo the other comment, it’s fairly aggravating having the floating panel stuck on the screen, cant adjust it, if you’ve got a smaller screen than a 1920 desktop it’s pretty unusable. Shame because otherwise it’s a good plugin

Yeah, I agree. It should be at least accessible via another monitor window. But I guess that’s all we get ��

Audio issues with my old mic from the past, sorry about that.

Hey, Tim! Thanks for the enlightening content! I have a question about how do we use the animation in a prototype. I know maybe that’s a noob question (I’m a little in motion design), but I couldn’t find a way so I can use it in my project prototype. If you could please help me 🙂
Thanks again for the content

Animations I’ve created

Hey Vinicius I hope you’re doing well. When you say use the animation in a prototype are you referring to importing some animation into Figma or the animations you created in Figma in the Prototype?

I’m new to Figma,so happy to find your channel,awsome tutorials

Thank you so much, Vivian!

I’m trying to use Figmotion to create motion for an app, but the JSON doesn’t show anything when the developers upload it to the app code. Do you have any idea what is happening? I can see the animation when I render it

Prior to you sending the JSON file to the developers were you able to open up the file in a code editor to verify that the export was successful? I’d check to see if any issues lie in the process of opening up the file. Maybe even viewing the changelog of the figma plugin to see if it is a noted issue or uninstall and re-install the plugin and re-render > export the animation.

Sorry, but nothing of what I want to animate in my frame happens. Objects «twitch» once, move a little. then everything passes again. Playhead at the beginning, nothing is like before as at the start. So, if my computer and my Figma are not defective, or there is no problem with Catalina. then I don’t understand anything. From After Effects, Flash, Apple Motion I know one thing. Set keyframe for the start, move the play head forward, change the parameters and you have a new keyframe. Between both will betweens. That’s what I want. Unfortunately, I don’t see any of that here. Actually I would like something like Adobe animate. Only not so powerful. Thanks

pls suggest best icon plugin in figma

How to get button effect in Figma please tell

How do you select multiple keyframes to move the whole animation along the timeline?

This is a little harder than it should be. Initial state = add keyframe. Transition = add keyframe. Not sure why it has to be harder than that.
Update: So this plugin is useless if you’re trying to animate anything nested. If you’re trying to mask something and animate it, it just doesn’t work. I’m nested two layers down

Well explained, thanks.

Thank you. I’ll have to try this tomorrow!

How is figmotion better than the current «smart animate» in figma?

I would say that Figmotion allows you to be more creative when creating a motion-oriented animation and it also gives you the ability to export your motion outside of Figma in a couple of formats I believe. But utilizing Figmotion is also tedious due to the tool having some irritating UX issues in my opinion which has been expressed by other users of the plugin as well. Also, Figmas offers sets of animation features with several constraints per animation feature. Also, how you can customize your motion can be limiting in Figma whereas if you’re using Figmotion you have the ability to do more as the tool seems to be a minified version of After Effects. A really minified version of it. haha
Both are great, but Figma gets you up and running with a lot of the stuff available out of the box so to speak.
Hope this helps Rachid!

one quik question, how do i place it into my prototype so it animates when i’m showing it.
it seem like a common question with no answer

Yeah it’s weird that isn’t spelled out. What you do is export it as a GIF, then take that gif and put it on your canvas. When you click on the prototype view play button, it will animate in a prototype you made. This works great for things like loading elements. This seems like generally more of a pain in the ass than just getting principle though. Or, hell Framer for Web is free now and FANTASTIC. Go try that out.

hi, the figmotion plugin is not rendering animation in prototype mode
I can’t see them while i’m interacting with my design

Урок по созданию анимации в Figma, используя плагин Figmotion

В этой статье вы узнаете, как создать в Figma, очень популярный в наши дни, продвинутый прототип.

И снова здравствуйте! После моей первой статьи о проектировании в InVision Studio круговой панели загрузки , я покажу вам нечто другое. Мы освоим Figmotion – плагин Figma, который вы можете использовать для создания продвинутых прототипов. А еще мы воссоздадим 4 самых полезных микровзаимодействия в мобильных приложениях.

На освоение материала, рассматриваемого в данной статье, вам понадобится всего 2-3 часа. Однако, если у вас недостаточно времени или вы новичок в прототипировании, я предлагаю вам читать эту статью в течение четырех дней и изучать одну анимацию каждый день. Но я уверен, что после прочтения этой статьи вы сможете воссоздать множество микровзаимодействий.

Чтобы освоить Figma и Figmotion, я собираюсь воссоздать ряд микровзаимодействий из приложения Google Photos. До написания этой статьи я планировал полностью воссоздать всё приложение, но, когда я дописал статью, я передумал. Так что сейчас вы читаете лишь часть первоначальной статьи.

Недавно Figma добавила плагины. Использование плагинов делает этот инструмент дизайна еще функциональнее. Мы используем эту новую функцию Figma и воссоздадим микровзаимодействия приложения Google Фото. Из этой статьи вы узнаете, как проектировать и воспринимать микровзаимодействия.

Мы будем воссоздавать эти страницы и их микровзаимодействия 🙂

1. Сядьте и пристегните ремень.
2. Откройте свой ноутбук и включите его.
3. Откройте сайт Figma (или, если вы используете десктопную версию Figma, откройте приложение) и создайте новый файл. Чтобы создать новый файл в Figma, просто нажмите иконку «+» в верхней части экрана.
4. Нажмите клавишу «F» на клавиатуре вашего ноутбука, чтобы создать новый фрейм (в Figma артборды называются фреймами).
5. Выберете артборд «Google Pixel 2 XL» или создайте артборд с такими размерами: W = 411 px / H = 823 px. Первый фрейм мы назовем «Photos».

1. Нам нужно установить плагин под названием Figmotion и импортировать шрифты Google Sans (или Product Sans или Montserrat). Чтобы установить плагины, нажмите на гамбургер-меню в верхней части экрана и выберите опцию «Plugins». Затем выберите опцию «Manage Plugins», найдите плагин «Figmotion» и установите его.

Это потрясающий плагин! Возможно, Adobe XD должен поучиться у Figma и добавить временную шкалу в функцию «Auto Animate»

7. Отлично! Все готово. Теперь давайте вернемся к нашему артборду (извините, фрейму). Я хочу вам кое-что сказать, если вы не используете Android-девайсы:

У вас не всегда будет доступ к различным инструментам и устройствам, и иногда вам следует создавать дизайн для того, что вы никогда раньше не использовали (вам помогут Youtube и Google). Не допустите, чтобы что-то помешало вам формировать будущее дизайна!

Поскольку вы мне нравитесь, вы можете скачать Google Фото UI kit по ссылке ниже:

В указанных выше файлах вы найдете элементы интерфейса Google Фото. Я настоятельно рекомендую вам не загружать UI Kit, пока вы не прочтете всю статью, а для этой статьи нам нужен только первый файл (необходимые элементы).

В этой статье не описано, как спроектировать в Figma компонент или дизайн-систему. Я знаю лучшие способы создания компонентов, но для простоты мы используем данные компоненты только в качестве необходимых элементов для воссоздания Google Фото.

8. Скопируйте и вставьте необходимые элементы в ваше рабочее пространство (файл, который вы создали ранее). Теперь вы должны увидеть что-то вроде этого:

Назовем первый артборд «Photos»

Нам не нужно больше двух артбордов, чтобы отдельно показать выпадающее меню (Dropdown menu) и боковую панель (Navigation Drawer). Итак, начнем с этих простых анимаций. Прежде чем начать, я хочу рассказать вам кое-что о Figmotion.

Figmotion работает как After Effects, и если вы хотите сделать анимацию, вам не нужно создавать разные артборды, потому что этот плагин не может соединять различные артборды и обнаруживать изменения, которые были применены к элементам артбордов.

Что такое состояния?

Представьте, что вы покупаете одежду в торговом центре «А»; Через полчаса вы идете в торговый центр «Б», чтобы купить что-нибудь еще. Когда вы покинули торговый центр «А» и пошли в торговый центр «Б», ваше местоположение на карте изменилось, но вы не изменились (я имею в виду, что вы все тот же человек).

Мы используем эту философию для создания анимации. Когда вы нажимаете на прямоугольник «А», и этот прямоугольник перемещается, вы не видите два разных прямоугольника. Вы просто видите, как изменяется положение прямоугольника на экране. Иногда мы меняем другие атрибуты элемента, такие как его непрозрачность, цвет и т.д., но мы не меняем сам элемент, мы просто изменяем его атрибуты.

Мы все еще видим квадрат, изменился только внешний вид этого квадрата. Представьте, что квадрат «переоделся»

Первая анимация: Появление боковой панели

Поскольку мы хотим сделать этот прототип более реальным, мы воссоздадим эффект клика. Я имею в виду, что вы нажимаете на гамбургер-меню, и появляется боковая панель.

Мы хотим воссоздать эту анимацию

Прочтите приведенные ниже шаги, чтобы воссоздать страницу «Photos», а также анимацию появления боковой панели:

1. Создайте новый артборд и назовите его «Photos». Посмотрите gif-файл ниже, чтобы добавить необходимые элементы для воссоздания страницы «Photos»:

1. Теперь нам нужно добавить элементы, необходимые для боковой панели. Мы добавляем Navigation Drawer из раздела «Assets», а затем создаем черный прямоугольник, чтобы скрыть элементы позади Navigation Drawer (измените непрозрачность черного прямоугольника со 100% до 50%):

1. Откройте плагин Figmotion. Мы создадим 3 состояния: 0 миллисекунд (A), 300 миллисекунд (B), 700 миллисекунд (C). Мы установим непрозрачность черного прямоугольника для состояний A и B равной 0, а для состояния C зададим непрозрачность 0,5 (означает 50%):

№3 Мы изменили непрозрачность черного прямоугольника с 0 на 0,5 для третьего состояния. Таким образом, черный прямоугольник появляется, когда боковая панель начинает двигаться

1. Теперь мы хотим показать боковую панель. Она отображается с левой стороны экрана. Поэтому нам нужно изменить ее положение по оси X с (-410) для состояний A и B на (0) для состояния C:

1. Внимательно прочитайте этот шаг, потому что мы будем использовать его дальше, чтобы воссоздать поведение при нажатии.

• Нам нужно создать круг (Размер: 45px * 45px / Цвет: C4C4C4 / Непрозрачность: 50% / Эффект: Drop Shadow).
• В отличие от других элементов, мы будем использовать для этого круга четыре состояния: 0 мс (A), 250 мс (B), 300 мс (C) и 350 мс (D). 700 мс (E) будет использоваться, чтобы показать изменения, которые были применены к непрозрачности круга.
• Нам нужно изменить его координаты по осям X и Y (чтобы показать пользователям, что круг движется): A: X=322 / Y=138 B: X=27 / Y= 250 C: X=27 / Y= 250 D: X=27 Y= 250
• Теперь нам нужно уменьшить его размер, при нажатии на гамбургер-меню: A: Ширина= 45 / Высота= 45 B: Ширина= 45 / Высота= 45 C: Ширина= 35 / Высота= 35 D: Ширина= 45 / Высота= 45
• В качестве последнего изменения, мы скроем круг после нажатия на гамбургер-меню: A: Непрозрачность = 0.5 (и B) C: Непрозрачность = 0.5 ( и D) E: A: Непрозрачность = 0

№5 Изменения, которые нужно применить к кругу, чтобы имитировать поведение нажатия

Хорошая работа! Результат будет выглядеть примерно так:

Мы могли бы улучшить текущую форму анимации кликов или тайминг и даже плавность. Обещаю, в моей следующей статье вы узнаете, как это сделать 🙂

Вторая анимация: появление выпадающего меню

Теперь мы воссоздадим внешний вид выпадающего меню.

Мы собираемся воссоздать эту анимацию

Просто примите к сведению! Мы используем тень для элементов, чтобы показать пользователям какой элемент находится ниже.

Какой из них ближе к экрану? (Совет: чтобы узнать, какой элемент расположен поверх другого, посмотрите на их тени)

Чтобы воссоздать анимацию появления выпадающего меню, нам снова нужно создать артборд и использовать необходимые элементы. Выполните следующие шаги, чтобы воссоздать страницу «Photos», а также анимацию появления выпадающего меню:

1. Создайте новый артборд и назовите его «Photos». Посмотрите на gif-файл ниже, чтобы добавить необходимые элементы для воссоздания страницы «Photos»:

1. Теперь нам нужно добавить необходимые элементы для выпадающего меню. Мы добавляем компонент «More» из раздела «Assets», а затем отключаем его, потому что хотим применить изменения к иконкам и форме выпадающего меню по отдельности.

Нам нужно изменить положение иконок выпадающего меню, а также ширину и высоту его формы, чтобы воссоздать вторую анимацию:

1. Преобразуйте группу «Icons» в компонент, потому что Figmotion не поддерживает группы:

1. Откройте плагин Figmotion. Мы собираемся создать 3 состояния: 0 мс (A), 300 мс (B), 700 мс (C). Сначала мы изменим положение компонента «Icons» по осям X и Y:

• Нам нужно изменить положение X и Y (чтобы показать пользователям, что этот компонент перемещается): A: X=210 / Y=69 B: X=210 / Y= 69 C: X=190 / Y= 82
• Также нам нужно изменить его непрозрачность, потому что иконки не видны в состояниях A и B: A: Непрозрачность = 0 B: Непрозрачность = 0 C: Непрозрачность = 1

1. Теперь нам нужно поработать над формой выпадающего меню и изменить его позицию X, а также ширину и высоту. Также нам нужно изменить непрозрачность формы выпадающего меню, поскольку оно не отображается в состояниях A и B:

• Нам нужно изменить ширину и высоту слоя «Shape»: A: Ширина= 180 / Высота= 318 B: Ширина= 180 / Высота= 318 C: Ширина= 219 / Высота= 387
• Кроме того, нам нужно изменить положение X слоя «Shape» (мы меняем его, потому что мы хотим, чтобы правая сторона осталась неизменной) A: X= 217 B: X= 217 C: X= 178
• В качестве последнего изменения, мы поменяем непрозрачность слоя «Shape»: A: Непрозрачность= 0 B: Непрозрачность= 0 C: Непрозрачность= 1

1. В качестве упражнения воссоздайте поведение при нажатии на кнопку «More» (я уже объяснил последовательность действий выше).

Полученный результат должен выглядеть примерно так:

Я уменьшил скорость gif-файла, чтобы было лучше видно, как работает эта анимация (мы изменили ширину и высоту прямоугольника выпадающего меню и его позицию X. Также мы изменили положение X и Y иконок выпадающего меню)

Третья анимация: изображение

В качестве третьей анимации мы собираемся воссоздать анимацию появления изображения при нажатии на него. Посмотрите на рисунок ниже, чтобы лучше понять, что я имею в виду:

Мы собираемся воссоздать это

Если вы прилежный ученик, вы можете заметить, что в первом состоянии (перед тем, как мы нажмем на изображение), это изображение маскируется квадратом, а затем квадрат становится прямоугольником, чтобы показать всю картинку.

1. Создайте новый артборд, назовите его «Images» и посмотрите на gif-файл ниже, чтобы добавить необходимые элементы для воссоздания страницы «Photos»:

1. Теперь нам нужно добавить элементы «Image Actions» и «Image Options», когда мы хотим полностью показать изображение:

№2 Добавление обязательных элементов

1. Поскольку мы собираемся изменить каждый слой элементов «Image Actions» и «Image Options», отсоедините эти компоненты и переименуйте слои. Удалите слой прямоугольника из этих элементов, потому что он нам не нужен, а также удалите иконку «More» из элемента «Image Actions».

1. Теперь давайте изменим положение иконок «Back», «Up» и «Fav»:

1. Также нам нужно отсоединить элемент «Search Bar», потому что нам нужна иконка «More». Как вы можете заметить, нам нужно изменить цвет иконки «More» с серого на белый, когда пользователи нажимают на изображение.

1. Мы также должны отсоединить «Navigation Bar» и «Status bar», потому что позже хотим изменить цвет их иконок. Не забудьте переименовать слои, чтобы их было проще найти в Figmotion:

1. Наконец, мы также должны отсоединить элемент «Images», потому что первое изображение будет использовано позже для завершения этой анимации. Когда вы отключите этот элемент, вы увидите две группы: «August» и «July». Снова преобразуйте группу «July» в компонент, в противном случае ее элементы не будут видны в Figmotion:

1. Добавьте черный прямоугольник, который будет отображаться при нажатии на изображение. Установите его непрозрачность на «0%:

1. Теперь мы готовы открыть плагин Figmotion и воссоздать третью анимацию. Мы будем использовать три состояния для этих элементов:

• Image: 0 мс (A), 300 мс (B) и 700 мс (C )
• Status bar, Navigation bar, иконка «More», черный прямоугольник, Image actions и Image options: 0 мс (A), 300 мс (B), 500 мс (C )

Почему? Потому что эти элементы будут изменены, прежде чем изображение откроется полностью.

№9 Это изображение бесполезно

1. Теперь давайте откроем плагин Figmotion и изменим поведение «Image».

Напомню, что его состояния: 0 мс (A), 300 мс (B) и 700 мс (C)

• Размер: A :Ширина= 99 / Высота= 99 B: Ширина= 99 / Высота= 99 C: Ширина= 411 / Высота= 327
• Позиция: A: Y= 163 B: Y= 163 C: Y= 248

1. Теперь мы должны изменить поведение черного прямоугольника, который мы создали ранее:

Напомню, что его состояния: 0 мс (A), 300 мс (B) и 500 мс (C)

• A: Непрозрачность= 0 B: Непрозрачность= 0 C: Непрозрачность= 1

1. На этом этапе мы собираемся изменить поведение элементов компонента «Image Actions»: «Back», «Favourite» и «Upload».

Напомню, что его состояния: 0 мс (A), 300 мс (B) и 500 мс (C)

• A: Непрозрачность= 0 B: Непрозрачность= 0 C: Непрозрачность= 1

1. Теперь мы хотим изменить поведение элементов «Navigation Bar», а также иконки «More».

Напомню, что их состояния: 0 мс (A), 300 мс (B) и 500 мс (C)

• Navigation Bar / Back A: Stroke Color = 0 B: Stroke Color = 0 C: Stroke Color = 1
• Navigation Bar / Home A: Fill Color = 0 B: Fill Color = 0 C: Fill Color = 1
• Иконка «More» A: Fill Color = 0 B: Fill Color = 0 C: Fill Color = 1

1. В качестве последнего шага мы изменим цвет иконок строки состояния:

Напомню, что их состояния: 0 мс (A), 300 мс (B) и 500 мс (C)

• Status Bar / Time A: Fill Color = 0 B: Fill Color = 0 C: Fill Color = 1
• Status Bar / Charge Percent A: Fill Color = 0 B: Fill Color = 0 C: Fill Color = 1
• Status Bar / LTE A: Fill Color = 0 B: Fill Color = 0 C: Fill Color = 1
• Status Bar / Network A: Fill Color = 0 B: Fill Color = 0 C: Fill Color = 1
• Status Bar / Battery / Charge (это иконка) A: Fill Color = 0 B: Fill Color = 0 C: Fill Color = 1
• Не меняйте Status Bar / Battery / Shape!

1. Мы кое-что забыли! Что? Нам нужно изменить непрозрачность иконок «Image Options».

Напомню, что их состояния: 0 мс (A), 300 мс (B) и 500 мс (C)

• Image Options / 1 A: Непрозрачность = 0 B: Непрозрачность = 0 C: Непрозрачность = 1
• Image Options / 2 A: Непрозрачность = 0 B: Непрозрачность = 0 C: Непрозрачность = 1
• Image Options / 3 A: Непрозрачность = 0 B: Непрозрачность = 0 C: Непрозрачность = 1
• Image Options / 4 A: Непрозрачность = 0 B: Непрозрачность = 0 C: Непрозрачность = 1

№15 Я применил эти изменения к одной иконке, но вы должны сделать это и для других иконок Image Options

1. Упражнение: Воссоздать поведение нажатия.

Отлично! Я ожидаю, что вы создали что-то вроде этого или даже лучше. Как вы можете заметить, мышь ведет себя не очень, но это не имеет большого значения! Давайте посмотрим на gif-файл ниже:

Четвертая анимация: переключение между вкладками

Настало время самой сложной анимации! Давайте сначала посмотрим на анимацию ниже:

На первый взгляд, все выглядит очень просто, но заметили ли вы, как меняются иконки?

Позвольте мне объяснить, что мы собираемся сделать:

• Изменить радиус краев прямоугольника, чтобы показать пользователям, что выбрана вкладка «Albums».
• Изменить стиль иконки «Photos», поэтому я воссоздам эту иконку.
• Изменить стиль иконки «Albums», поэтому я воссоздам эту иконку.
• Показать содержимое вкладки «Albums»

1. Давайте воссоздадим это вместе, создав новый артборд и добавив необходимые элементы:

1. Поскольку нам нужно показать вкладку «Albums», необходимо добавить компонент «Albums»:

1. Расположите слои, как на картинке ниже:

1. Отсоедините элемент «Bottom Bar» и создайте отдельную группу для каждой иконки:

1. Теперь нам нужно воссоздать иконку вкладки «Photos»:

№5 Не бойтесь создать новую иконку или воссоздать то, что уже создано!

1. Мы должны изменить название слоев вкладки «Photos», как показано ниже:

• Mountain → Photos / Mountain
• Square → Photos / Shape
• Также сделайте копию слоя «Photos / Shape» и измените его имя на: «Photos / Shape / Back». Нам нужно применить следующие изменения к этому слою: удалить «Fill», добавить внутреннюю границу (Inside Border / Размер: 2 / Цвет: #767676). Он должен быть ниже, чем слой «Photos / Shape».

Почему мы сделали копию слоя «Photos / Shape»? Мы узнаем это, когда он исчезнет.

1. Воссоздание «Albums» будет довольно сложным, но, как я уже говорил, не бойтесь этого! Мы попытаемся создать иконку книги.

• Первый шаг: создайте квадрат и попробуйте разместить его на квадрате основной иконки.
• Второй шаг: создайте вектор, подобный тому, как на gif-файл ниже, и измените радиус его основного угла на 2.

• Третий шаг: измените цвет обводки квадрата на # 767676 (Удалите опцию «Fill» / размер обводки = 2) и измените векторную обводку на #767676.

• Четвертый шаг: создайте еще один вектор, как на gif-файле ниже, и залейте его следующим цветом: # 767676.

• Пятый шаг: переименуйте квадрат и векторы: Square → Albums / Shape First vector → Albums / Line Second vector → Albums / Complete

Шестой шаг: сделайте копию «Albums / Shape», удалите опцию «Stroke» и отметьте опцию «Fill». Залейте фигуру этим цветом: #1D6DDF и установите его непрозрачность по умолчанию 0%.

Также измените его имя на «Albums / Shape / Back» (когда «Albums / Shape» исчезнут, мы покажем его):

• Седьмой шаг: измените порядок «Albums / Shape», «Albums / Line», «Albums / Shape/ Back» и «Albums / Complete», как показано на рисунке ниже:

1. Создайте новый прямоугольник (взгляните на основную анимацию, чтобы понять, почему мы хотим добавить прямоугольник на нижнюю панель!) И измените его имя на «Rectangle / Tap». Его положение в окне «Layers» должно быть ниже, чем иконки, которые мы создали ранее, и их метки:

• Заливка: #1D6DDF Непрозрачночть: #10 Радиус: 40

1. Откройте Figmotion и давайте воссоздадим последнее микровзаимодействие. Нам нужно использовать три состояния:

• Элемент «Albums»: 0 мс (A), 700 мс (B), 900 мс (C)
• Другие элементы и слои: 0 мс (A), 300 мс (B), 700 мс (C)

Почему? Потому что элемент «Albums» появляется после того, как пользователь нажал на вкладку «Albums», а элемент «Images» исчез.

Сначала мы воссоздадим анимацию исчезновения элемента «Images»:

Напоминаю, его состояния составляют: 0 мс (A), 300 мс (B) и 700 мс (C)

• Компонент «Images»: Состояние A: Непрозрачность = 0 Состояние B: Непрозрачность = 0 Состояние C: Непрозрачность = 1

1. На этом этапе пришло время поменять эффект изменения стиля иконки вкладки «Photos»:

Напомню, что его состояния равны 0 мс (A), 300 мс (B) и 700 мс (C)

• Photos / Shape: мы изменим его непрозрачность со 100% до 0%. Состояние A: Непрозрачность = 1 Состояние B: Непрозрачность = 1 Состояние C: Непрозрачность = 0
• Photos / Mountain: нам нужно изменить цвет с #FFFFFF на #272727. Состояние A: Цвет заливки= #FFFFFF Состояние B: Цвет заливки = #FFFFFF Состояние C: Цвет заливки = #272727
• Photos (Text): нам нужно изменить его цвет с #1D6DDF на #272727. Состояние A: Цвет заливки = #1D6DDF Состояние B: Цвет заливки = #1D6DDF Состояние C: Цвет заливки = #272727
• Не изменяйте непрозрачность «Photos / Shape / Back», его непрозрачность всегда должна быть 1.

1. Теперь мы хотим воссоздать эффект нажатия (я имею в виду, что мы покажем последний прямоугольник, который мы создали для имитации эффекта нажатия):

Его состояния: 0 мс (A), 300 мс (B), 700 мс (C) и 900 мс (D).

• Прямоугольник / Tap: мы собираемся изменить радиус его непрозрачности с 0% до 10% (состояние B -> состояние C), а затем изменим его на 0%, чтобы скрыть этот прямоугольник (состояние C -> состояние D). Состояние A: Непрозрачность = 0 Состояние B: Непрозрачность = 0 Состояние C: Непрозрачность = 0.10 Состояние D: Непрозрачность = 0
• Прямоугольник / Tap: также мы должны изменить радиус его углов с 40 на 0. Состояние A: Border radius = 40 Состояние B: Border radius = 40 Состояние C: Border radius = 0

Мы не будем изменять радиус границы углов этого прямоугольника в последнем состоянии (900 мс).

1. На этом этапе пришло время поменять эффект изменения стиля иконки вкладки «Albums»:

Напомню, что его состояния: 0 мс (A), 300 мс (B) и 700 мс (C)

Albums (метка): нам нужно изменить ее цвет с #272727 на #1D6DDF

Состояние A: Цвет заливки= #272727

Состояние B: Цвет заливки= #272727

Состояние C: Цвет заливки= #1D6DDF

Состояние A: Непрозрачность= 1

Состояние B: Непрозрачность= 1

Состояние C: Непрозрачность= 0

Albums / Shape / Back:

Состояние A: Непрозрачность= 1

Состояние B: Непрозрачность= 1

Состояние C: Непрозрачность= 0

Состояние A: Stroke Color = #272727

Состояние B: Stroke Color = #272727

Состояние C: Stroke Color = #1D6DDF

Состояние A: Цвет заливки = #272727

Состояние B: Цвет заливки = #272727

Состояние C: Цвет заливки = #FFFFFF

1. Это последний шаг, прежде чем я дам вам упражнение! Снова взгляните на основной gif-файл, который использовался для воссоздания его микровзаимодействия. Вы могли заметить, что компонент «Albums» перемещается немного вверх, а затем появляется. Итак, нам нужно изменить его позицию Y, а также его непрозрачность:

Напомню, что его состояния: 0 мс (A), 700 мс (B) и 900 мс (C)

• Albums (компонент, который был добавлен на артборд на втором шаге): как я уже говорил, нам нужно изменить его позицию Y. Состояние A: Y= 155 Состояние B: Y= 155 Состояние C: Y= 140
• Также нам нужно изменить его непрозрачность: Состояние A: Непрозрачность= 0 Состояние B: Непрозрачность= 0 Состояние C: Непрозрачность= 1

1. В качестве упражнения создайте круг и смоделируйте поведение нажатия (я имею в виду создайте круг, переместите его, а затем измените его размер, чтобы имитировать поведение нажатия).

Теперь мы создали эту анимацию:

Вы узнали, как создавать наиболее полезные микровзаимодействия ОС Android. Я надеюсь, что в качестве упражнения вы воссоздадите еще больше микровзаимодействий приложения Google Фото, чтобы лучше усвоить эту статью.

Если вы узнали что-то новое и считаете статью полезной, ставьте лайк, и поделитесь ею с коллегами. 🙂