Как в фигме сделать и сохранить анимацию кнопок, текстов и картинок на сайте или в презентации

Как в фигме сделать анимацию объекта

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

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

Затем необходимо перейти на вкладку Prototype, и соединить два фрейма между собой.

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

• Trigger — когда анимация начнется: при клике (On click), при наведении (While hovering), через какое-то время (After Delay) и так далее.
• Action — какое действие произойдет: переход одного фрейма к другому (Navigate to), замена одного элемента другим (Change to), прокрутка к какому-то месту внутри фрейма (Scroll to) и так далее
• Destination — что именно откроется/покажется
• Animation —собственно тип анимации. При выборе этого параметра снизу показывается мини-демонстрация. Наиболее полезный вариант здесь — это Smart Animate, именно он позволяет делать красивые плавные переходы.
• Curve — тип ускорения или замедления анимации
• Duration — длительность анимации в миллисекундах

Посмотреть получившийся результат можно нажав на иконку Play (треугольник) над панелью Prototype или на кнопку Flow в режиме редактирования прототипа. В первом случае анимация откроется в отдельном окне, во втором — в всплывающем окне предпросмотра.

Аналогичным образом можно создать и другие ключевые кадры (фреймы) и также соединить их между собой. Для получения зацикленной анимации (например при создании слайдера или карусели на сайте) можно соединить последний кадр с первым.

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

Плагин чтобы сохранить или экспортировать анимацию из фигмы в гиф или видео

Для того, чтобы скачать анимацию из фигмы, понадобится плагин Export to GIF/Video. При первом использовании будет нужно оставить свой емейл и получить на него код активации.

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

Если нужно сохранить именно в формате видео, и при этом бесплатно — можно просто запустить анимацию в режиме просмотра прототипа и записать экран с помощью таких программ, как QuickTime (на Mac), iSpring Free Cam (на Windows) или OBS studio (имеет более сложный интерфейс, но работает на всех ОС).

Как сделать анимацию кнопки при наведении и нажатии в фигме

Для начала, необходимо нарисовать вид кнопки по умолчанию и сделать их неё компонент:

Затем — добавить этому компоненты варианты кнопки при наведении и нажатии:

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

Следующим шагом переходим на вкладку Prototype и добавляем связь между первым и вторым состояниями кнопки (по молчанию и при наведении). В графе Trigger указываем While hovering (это буквально и есть при наведении), в Action должно быть Change to Variant2, анимацию добавить по вкусу.

Аналогичным образом создаем и переход от второго состояния кнопки к третьему (от наведения к нажатию). Разница только в том, что Trigger уже должен быть On click (по нажатию).

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

Теперь при запуске прототипа (кнопка Play справа вверху) можно посмотреть получившийся результат: кнопка будет меняться при наведении и нажатии на неё.

Анимация картинок и текстов при скролле сайта или слайдов презентации в фигме

В стандартном наборе параметров анимации в фигме есть действие (Action) Scroll to. С его помощью можно сделать плавное пролистывание к определенному месту на вашем сайте.

Но отдельного события (Trigger) скролла для запуска анимации в фигме пока что не существует. Если вы хотите показать в прототипе анимацию скролла, её можно просто привязать к другому триггеру, например After Delay или On click. Этого вполне будет достаточно для демонстрации в портфолио или для презентации заказчику.

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

Для лучшего понимания рекомендую посмотреть этот урок в формате видео (оно находится в начале статьи).