Smart-анимация в Figma

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

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

Анимация в Figma – это салат из тех ингредиентов:

• тайминг;
• кривая;
• изменяющийся параметр;

Взаимодействие анимации в Figma измеряется в миллисекундах и чаще всего подбирается из диапазона от 100ms (0.1s) до 1000ms (1s). Анимацию короче 100 миллисекунд делать не стоит, т.к. она почти неуловима для глаза. А взаимодействие больше одной секунды может вызывать неприятное ощущение задержки или бага. Важно понимать, что появление объектов происходит медленнее, чем исчезновение. А чем меньше объект, тем быстрее он появится.

Данный параметр похож на закон физики. Например, у каждого объекта, имеющего движение, есть моменты ускорения и замедления в момент времени. Этот закон и есть кривая, то есть график изменения параметра анимации в зависимости от времени.

Самые популярные:

• ease-in – замедление в начале (идеально для исчезновения объекта);
• ease-out – замедление в конце (идеально для появления объекта);
• ease-in-and-out – замедление и в начале, и в конце (идеально для изменения объекта внутри экрана);
• linear – движение без изменения скорости (идеально для коротких взаимодействий).

На этом этапе мы работаем с параметром, который меняться во времени.

Самые популярные:

• opacity (прозрачность). Через нее можно задать, как объект из невидимого превращается в видимый;
• position (расположение на экране). Задается относительно осей координат — X, Y, Z;
• scale (масштаб). Используется, если объект увеличивается или уменьшается;
• rotate (поворот);
• сolor fill (смена цвета заливки);
• сolor stroke (смена цвета обводки).

Давайте отдельно рассмотрим smart-анимацию в Figma. Данный вид анимации самостоятельно анимирует схожие объекты. При этом важно, чтобы объекты имели схожие имена и место в иерархии. Иначе не сработает! Умная анимация может стать отличным помощником и неплохо сэкономить время.

Как именно, разберемся ниже.
Давайте рассмотрим три простых гайда по smart-анимации.

Изменение цвета объекта

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

Не забываем про главное правило умной анимации – все элементы должны иметь одинаковые наименования и расположения.

• Создаем макет мобильного экрана в нужном разрешении.
• При необходимости создаем его «начинку». В примере создадим два блока с потенциальной информацией.
• Даем цвет каждому элементу.
• Добавляем нашу будущую кнопку.
• Копируем макет и проверяем, что названия совпадают.
• Во втором макете меняем цвета по своему усмотрению. Мы также заменили иконку.
• Теперь открываем раздел Prototype и наводим курсором на элемент, при взаимодействии с которым будет происходить анимация. В нашем случае это кнопка смены темы. Примечание: при наведении на кнопку 1 макета у нас подсвечивается и вторая. Это значит, что мы все сделали верно, и Figma видит схожий элемент.
• У нас подсветится стрелка. Мы указываем ее на второй макет.
• Проверяем, что триггер – on tap, последствие –Navigate to, и указано на нужный макет.
• В Animation меняем Instant на Smart Animate.
• Кривую рекомендую поставить Easy-in-and-out.
• Повторяем настройку анимации с кнопкой на втором макете. Его анимация будет вести к переходу на первый макет.
• Проверяем. В режиме просмотра тапаем по кнопке и видим красивый переход.

• Создаем макет мобильного экрана в нужном разрешении.
• Создаем его «начинку». В примере мы создадим один удлиненный блок и круглую кнопку внутри него.
• Даем цвет каждому элементу для лучшей контрастности.
• Копируем макет и форматируем блок. В примере мы вытянули его вниз.
• Открываем раздел Prototype и наводим курсором на элемент, при взаимодействии с которым будет происходить анимация. В нашем случае это кнопка внутри блока.
• У нас подсветится стрелка. Мы указываем ее на второй макет.
• Проверяем, что триггер – on tap, последствие – Navigate to, и указано на нужный макет.
• В Animation меняем Instant на Smart Animate.
• Кривую рекомендую поставить Easy-in-and-out.
• Повторяем настройку анимации с кнопкой на втором макете. Его анимация будет вести к переходу на первый макет.
• Проверяем: в режиме просмотра тапаем по кнопке и видим изменение масштаба объекта.

Параллакс-эффект

Третью анимацию сделаем чуть более сложной, но и более эффектной.

• Создаем макет мобильного экрана в нужном разрешении.
• Находим «пазлы» главного экрана. Из них будет собран фон макета. (Например, для горного пейзажа – PNG гор, солнца, птиц и тд).
• Собираем фон на свое усмотрение.
• Для правдоподобности добавляем бургер и какой-нибудь лого.
• Копируем фрейм макета.
• Второй макет ставим на место первого.
• Из него вытаскиваем бургер и лого за пределы видимого экрана, но следим, чтобы они оставались внутри фрейма экрана.
• Облака, горы и другие элементы немного прячем за фрейм, но не убираем полностью.
• На некоторые элементы можно наложить прозрачность.
• Открываем раздел Prototype и стрелкой направляем на второй макет.
• В настройках ставим триггер – after delay (300 ms), последствие – Navigate to, кривая – Easy-out

Анимация – это ценный скилл для любого дизайнера. Даже с базовыми знаниями можно сделать эффектные анимации, которые станут универсальными для любого проекта. Творите, создавайте и всегда учитесь чему-то новому! А если у вас остались вопросы, пишите в комментарии 😉