Как сделать анимацию в Figma и зачем она нужна

Анимация упрощает взаимодействие с интерфейсом, например оптимизирует работу с нужными функциями.
Источник: блог Figma

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

Триггеры — механизмы, с помощью которых в прототипе будет происходить действие. Вот несколько типов триггеров, которые существуют в Figma:

● on tap — действие произойдёт по тапу или клику;
● on drag — чтобы произошло действие, элемент требуется перетащить;
● while hovering — действие происходит при наведении на элемент;
● while pressing — действие происходит при удержании нажатия.

Действие показывает, что произойдёт дальше. Существует несколько типов действий:

● navigate to — переход к другому объекту или фрейму;
● open overlay — фрейм открывается поверх текущего (этот вариант удобно использовать для всплывающих окон);
● swap overlay — один фрейм заменяется другим;
● close overlay — фрейм, открытый поверх текущего, закрывается;
● back — возвращение к предыдущему экрану;
● scroll to — страница прокрутится до выбранного фрейма в рамках основного фрейма;
● open link — откроется ссылка.

Между этими фреймами — тип действия navigate to. Значит, один фрейм будет переходить к другому.
Источник: интерфейс Figma

Easing (с англ. «сглаживание») позволяет настроить для анимации текста или кнопки разные режимы, которые зависят от ускорения или замедления элемента в начале или в конце пути.
Вот основные типы сглаживания:

● Ease-in ― замедление в начале анимации

При наведении анимируемый элемент разгоняется в начале движения, а после двигается с постоянной скоростью. Это выглядит как старт автомобиля. Источник: Figma Community

● Ease-out ― замедление в конце анимации

Отличительная черта такого режима — ускоренное движение в начале с замедлением в конце. Напоминает автомобиль, который резко останавливается. Источник: Figma Community

● Ease-in-out ― ускорение в начале, замедление в конце

Самый распространённый тип сглаживания. Элемент ускоряется в начале движения и останавливается в конце. Похоже на полноценный путь автомобиля: начинает движение на старте, останавливается на финише. Источник: Figma Community

Например, при помощи умной анимации можно сделать переход от одной вкладки меню в другую. Источник: блог Figma

Попробуем Smart animate на практике.

1. Нарисуем в первом фрейме прямоугольник.
2. Продублируем фрейм и изменим размер прямоугольника во втором фрейме.
3. В настройках отметим переход по клику (on click) и выберем Smart animate.
4. Делаем обратный переход от второго фрейма к первому.

В качестве изинга здесь используется Ease Out. Источник: интерфейс Figma

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

● Physics animation

При помощи этого плагина можно создать эффект падающих фигур. Источник: davv.store

● Parallax

Визуальный эффект, при котором фон движется медленнее, чем объект на переднем плане. Так появляется ощущение объёма и глубины. Источник: awwwards

● SVG Motion

Этот плагин используют для анимации векторной графики. Источник: davv.store

● Figmotion
С его помощью создаются интерактивные прототипы сайтов и мобильных приложений.

Один из примеров несложной анимации в Figma — анимация кнопки. Вот пошаговая инструкция, как её сделать:

1. Придумать текст для кнопки и обернуть его в Auto Layout (shift + A).
2. Выбрать размер отступов.

3. В меню Fill сделать заливку кнопки.
4. Открыть меню Shape Tools в верхней панели и нарисовать круг.
5. Отключить у кнопки Auto Layout (shift + optinon + A).
6. Разместить круг по центру кнопки. Залить круг тем же цветом, что и кнопку.
7. Поставить галочку в меню Clip Content в правой панели и проследить, чтобы слой с текстом был под слоем с кругом.
8. Продублировать кнопку, увеличить круг во втором фрейме и поменять его цвет в цвет заливки кнопки.

9. Перейти в меню Prototype на правой панели и сделать переход.
10. В настройках отметить Mouse enter и выбрать одну из амплитуд, например ease-in-out.
11. Кликнуть на Flow 1, чтобы посмотреть анимацию.