Какую анимацию можно создать в плагине 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 обладает простым и интуитивно понятным интерфейсом, который позволит вам быстро освоиться с плагином и начать создавать анимацию.
Во вкладке 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 в миллисекундах
Примеры анимации
Что можно анимировать таким образом? Это ограничивается только вашей фантазией. Мы сгруппировали примеры из библиотеки следующим образом: анимация иллюстраций, анимация типографики, анимация паттернов, анимация интерфейса, иконок и лоадеров.
Иллюстрации
Типографика
Паттерны
Интерфейс
Иконки и лоадеры
В про-аккаунте доступны:
- библиотека с этими и другими примерами анимаций,
- экспорт анимации в форматах gif, svg и webm.
В видео показываем, какие существуют ограничения у плагина:
Shape move - это простой и удобный плагин для Figma, который, мы надеемся, поможет вам создавать интересную анимацию и оживлять ваш дизайн.
Возможно, вам будут интересны статьи о других наших продуктах: SVG Motion и Parallax.
Есть вопросы по использованию или предложения, как улучшить примеры анимаций или сам плагин? Напишите их в комментарии. И буду рада, если поделитесь своим впечатлением.