Как преобразовать анимацию Figma в Lottie (без After Effects)

Figma теперь может экспортировать анимацию, но только как SVG (анимация с помощью CSS @keyframes), WebM или GIF. Код продукта, с другой стороны, почти всегда требует Lottie — компактного формата JSON, которым можно управлять, создавать темы и сохранять четкость в любом размере. В Figma нет встроенной кнопки «Экспорт в Lottie», и обычный совет — пересобрать все это в After Effects с помощью плагина Bodymovin. Это большая работа по воссозданию движения, которое вы уже разработали.

Хорошей новостью является то, что анимированный SVG уже представляет собой векторные данные с ключевыми кадрами. Это означает, что его можно скомпилировать непосредственно в настоящий вектор Lottie в браузере, а не заворачивать в видеокадры, поэтому вы полностью пропускаете After Effects и сохраняете файл небольшим.

Выбранный вами экспорт Figma определяет, какой тип Lottie вы можете получить обратно. Выбирайте SVG, если вам нужен самый маленький и четкий результат, а ваша анимация векторная. Используйте WebM или GIF, если анимация основана на эффектах. Figma может только растеризоваться.

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

Оболочка растра — видеокадры, хранящиеся внутри Lottie — большая и при увеличении становится размытой. Настоящий вектор Lottie сохраняет формы в виде путей, поэтому его размер составляет несколько килобайт, и он выглядит четким на любом экране и с любой плотностью пикселей. Это именно то, что вы ожидаете от Lottie, созданного вручную, поэтому стоит стремиться к векторному пути всякий раз, когда ваша анимация Figma основана на векторе.

Некоторые экспортированные файлы Figma SVG содержат встроенные растровые изображения, градиенты, маски или эффекты фильтров, которые еще не полностью сопоставляются с векторными фигурами Lottie. Когда это произойдет, инструмент сообщит вам и укажет вам маршрут видео: экспортируйте ту же анимацию из Figma, что и WebM или GIF, и преобразуйте ее с помощью инструмента Video to Lottie. Вы по-прежнему получаете полезный Lottie или прозрачный веб-ресурс — он просто поддерживается фреймами, а не путями.

Если вам нужно только перекрасить статический или анимированный SVG, а не конвертировать его, используйте SVG Color Changer, который сохраняет анимацию и позволяет менять цвета с помощью предварительного просмотра в реальном времени.