Популярная платформа для создания веб-анимаций LottieFiles недавно выкатила плагин для Figma. Формат Lottie - это JSON файл, содержащий данные для воспроизведения векторной анимации на веб-сайтах или в приложениях. Создание анимаций для формата Lottie обычно требует использования After Effects и последующего импорта на платформу. Однако данный плагин позволяет создавать анимации прямо в Figma, сильно упрощая весь процесс.
Что умеет плагин для Figma?
Основные возможности плагина включают экспорт дизайнов из Figma в анимацию в формате Lottie, GIF или SVG. При этом можно оживить отдельный фрейм, выбрав анимацию из готовых пресетов или создать более сложные анимации из нескольких фреймов.
Готовую анимацию можно сохранить в собственную не публичную библиотеку на платформе, чтобы использовать в других проектах.
Плагин также дает доступ к библиотеке с более чем 80 000 готовых к использованию анимаций.
Как работать с плагином?
C плагином весь процесс создания анимации упрощается в разы. Чтобы создать анимацию, необходимо установить плагин в Figma. При этом вы получите файл с примерами и подробным объяснением как все работает.
Чтобы создать свою анимацию выбираете нужный фрейм, запускаете плагин и экспортируете готовую анимацию с помощью опции "Export to Lottie". В превью сразу появится ваша анимация, которую вы можете сохранить в персональную библиотеку или в формате GIF.
Для анимации отдельных фреймов есть ряд готовых настроек:
- Highlight (Squash Stretch, Rotate, Pulse, Trim Path)
- Move-In (Pop In, Slide Up, Slide Down, Fade In, Zoom & Fade)
- Move-out (Zoom Out, New Zoom In)
Можно также выбрать скорость анимации от 0.5х до 2х.
Для создания более сложных анимаций необходимо создать отдельные фреймы. Плагин автоматически "склеит" фреймы в анимацию.
Для чего использовать плагин?
В целом плагин пригодится как дизайнерам, так и разработчикам, позволяя быстро и легко создавать анимации для прототипов, веб-сайтов или приложений не прибегая к After Effects. Кроме того с помощью Lottie можно оживить иконки, иллюстрации и даже создавать стикерпаки для телеграмма.
