Для анимации понадобится плагин Фигмоушен. В нём можно собрать гифку или видео, чтобы показать идею арт‑директору, и сохранить анимацию в CSS или JSON для использования на сайте. А ещё он бесплатный :‑)

Покажу, как работает плагин, на примере простой анимации прыгающего шарика с сайта Сейгеймса:

Создаём фрейм с шариком, стоящим за пределами фрейма, чтобы ему было откуда прилетать:

Выделяем фрейм, находим в главном меню Фигмы список плагинов и запускаем Фигмоушен. Появится такое окно:

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

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

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

Нажимаем плей. Анимация воспроизведётся прямо в Фигме:

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

Чтобы сохранить анимацию в виде гифки или видео, жмём кнопку Render и выбираем нужные параметры:

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

Углубиться в тему

Уважаемые советчики, а в чём вы анимируете? Расскажите в комментариях.

P. S. Это был вторничный совет о дизайне интерфейсов. Присылайте вопросы.

ФигмаИнтерфейс
Отправить
Поделиться
Запинить

Рекомендуем другие советы