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

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

9 комментариев

Владимир Коваль

20.01.2023

Как сделать плавную анимацию?

Ответить

Friflex

21.07.2023

Автор

Владимир, добрый день! За плавность анимации отвечает параметр Easing. Например, ease-in – это ускорение на старте, ease-out – замедление в конце и т.д. Найти этот параметр можно в режиме прототипа в Фигме. Скорость и регулировка вашей анимации настраивается в миллисекундах)