Необычная анимация в Figma с помощью SVG motion

Мы хотим поделиться способами создания необычной анимации в Figma при помощи плагина SVG motion, разработанного нашей командой DAVV.

SVG motion отлично подходит для создания анимированных иконок, лоадеров и паттернов. Однако, есть и другие способы использования, о которых вы, возможно, не знали. Рассмотрим некоторые из них.

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

Необычная анимация в Figma с помощью SVG motion

Чтобы анимировать текст, его нужно перевести в линии со свойством Stroke. В примере с Jackson каждому элементу добавлено несколько цветов в свойство Stroke.

В Stroke можно добавить цветовые градиенты. Свечение достигается с помощью эффекта Drop shadow, который тоже анимируется.

Интересная анимация получается с эффектом Layer blur.

Здесь в анимации используется наложение Difference в Layer.

В плагине существует несколько ограничений:

В 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. Присоединяйтесь к нам!