Какую анимацию можно создать в плагине Shape move для Figma

Shape move - это плагин для Figma, который анимирует якорные (опорные) точки вектора. Показываем, какую анимацию можно получить с помощью этого инструмента.

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

Отличия Shape move от Smart Animate:

Smart Animate создает переход между объектами, а не точками. Из-за этого Smart Animate не поддерживает анимацию, где объект изменяет свою форму, в отличие от Shape move.
Smart Animate работает в Figma Prototype. Чтобы воспроизвести анимацию, созданную в Shape move, ее нужно сохранить в gif или видео формате и добавить в макет.

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

Какую анимацию можно создать в плагине Shape move для Figma

Во вкладке Settings можно изменить:

Easing - плавность анимации. В плагине доступны функции: ease, ease-in, ease-out, ease-in-out, linear, random.
Длительность анимации в миллисекундах.
Looping - анимация зацикливается в прямом направлении.
Boomerang - анимация зацикливается в прямом и обратном направлении.
Delay types (key time offset, random delay, delay)
Offset в миллисекундах
Random offset в миллисекундах

Анимация с Random Delay

Анимация с Delay

Что можно анимировать таким образом? Это ограничивается только вашей фантазией. Мы сгруппировали примеры из библиотеки следующим образом: анимация иллюстраций, анимация типографики, анимация паттернов, анимация интерфейса, иконок и лоадеров.

В про-аккаунте доступны:

библиотека с этими и другими примерами анимаций,
экспорт анимации в форматах gif, svg и webm.

Библиотека с примерами анимации

В видео показываем, какие существуют ограничения у плагина:

Инструкция по Shape move

Shape move - это простой и удобный плагин для Figma, который, мы надеемся, поможет вам создавать интересную анимацию и оживлять ваш дизайн.

Возможно, вам будут интересны статьи о других наших продуктах: SVG Motion и Parallax.

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