Необычная анимация в Figma с помощью SVG motion
Мы хотим поделиться способами создания необычной анимации в Figma при помощи плагина SVG motion, разработанного нашей командой DAVV.
SVG motion отлично подходит для создания анимированных иконок, лоадеров и паттернов. Однако, есть и другие способы использования, о которых вы, возможно, не знали. Рассмотрим некоторые из них.
В плагине существует несколько ограничений:
- В SVG motion не поддерживается градиент Angular и эффект Background blur.
- Экспорт доступен в форматах SVG, GIF, WEBM. Чтобы получить mp4, используйте конвертеры.
- В бесплатной версии плагина доступен тип анимации Direct, настройки Speed и экспорт анимации. Типы анимации Loader, Loader shift, Loader shift delay, настройки Rupture Ratio, Random line, а также библиотеку с шаблонами можно активировать при покупке pro-аккаунта.
- Анимация будет проигрываться в Prototype, если вы добавите ее в макет в формате GIF или видео-формате (для pro-аккаунтов Figma).
Надеемся, что эти советы помогут вам создавать уникальные живые макеты в Figma. Экспериментируя с эффектами, способами наложения и типами обводки, вы можете получить совсем разные анимации в одном инструменте.
В следующих статьях поделимся созданием анимации в других плагинах — Physics animation, Parallax и Shape move.
Была ли статья полезна? Если у вас есть опыт использования SVG motion, поделитесь, пожалуйста, опытом в комментарии.
Недавно мы создали сообщество VK. Присоединяйтесь к нам!
выглядит здорово ,довольно эффектно
Интересный плагин, попробую в своем проекте. Надеюсь при верстке на Тильде всё будет ок, если экспортировать как svg и обработать через один сервис.
Год назад мы пробовали добавить svg в тильду - не получилось. Работали только GIF и видео. Может, с тех пор что-то изменилось.
Через какой сервис вы обрабатываете?
Выглядит здорово! С блюром анимация прям симпатичная)
Ну красиво, ничего не скажу