Для анимации понадобится плагин Фигмоушен. В нём можно собрать гифку или видео, чтобы показать идею арт‑директору, и сохранить анимацию в CSS или JSON для использования на сайте. А ещё он бесплатный :‑)
Покажу, как работает плагин, на примере простой анимации прыгающего шарика с сайта Сейгеймса:
Создаём фрейм с шариком, стоящим за пределами фрейма, чтобы ему было откуда прилетать:
Выделяем фрейм, находим в главном меню Фигмы список плагинов и запускаем Фигмоушен. Появится такое окно:
В левой части окна — список объектов во фрейме, свойства анимации объектов, такие как смещение по осям, изменение размера и прозрачности, поворот и так далее. В правой части расположена шкала времени, на которой мы будем настраивать анимацию выбранного свойства с помощью ключевых кадров. Верхняя часть окна отведена просмотру получившейся анимации, её сохранению и экспорту.
Напротив каждого свойства анимации стоит ромб. Он нужен, чтобы задавать ключевые кадры на шкале времени. Мы будет двигать шарик по осям X и Y, поэтому зададим для них ключевые кадры на нулевой секунде:
Дальше обозначим, куда должен прилететь шарик. На шкале времени перетаскиваем ползунок на, например, двухсотую миллисекунду, во фрейме двигаем шарик вплотную к левой границе и задаём ключевые кадры. На шкале времени появятся линии анимации:
Нажимаем плей. Анимация воспроизведётся прямо в Фигме:
Аналогично задаём остальные ключевые кадры для шарика, чтобы он отскакивал от границ фрейма. У меня это заняло пять минут:
Чтобы сохранить анимацию в виде гифки или видео, жмём кнопку Render и выбираем нужные параметры:
После рендера ваша анимация будет доступна по ссылке возле кнопок плагина. Ссылка действует всего час, поэтому сохраняйте анимацию на компьютер сразу.
Углубиться в тему
Уважаемые советчики, а в чём вы анимируете? Расскажите в комментариях.
P. S. Это был вторничный совет о дизайне интерфейсов. Присылайте вопросы.