Анимируйте графику из Figma
Рисуйте в Figma, а движение добавляйте в Libre. Скопируйте векторную графику, поставьте ключевые кадры и скачайте Lottie. Для этого способа плагин не нужен.
Анимировать графику из FigmaРедактирование и экспорт бесплатны. Аккаунт не нужен.
Редактор и документация на английском.
Скопируйте, анимируйте, экспортируйте
Скопируйте графику
Выделите в Figma нужные фигуры и скопируйте их. Для начала удобно взять небольшой фрагмент.
Вставьте её в Libre
Откройте Studio, нажмите New animation и вставьте графику через Command+V или Ctrl+V. Если результат отличается, выберите в Figma Copy as SVG и вставьте этот вариант.
Добавьте движение
Выделите слой и нажмите ромб рядом с нужным свойством, например Position. Переместите указатель времени и измените значение — появится следующий ключевой кадр. Пробел запускает просмотр.
Экспортируйте анимацию
Нажмите Export и проверьте предпросмотр Lottie. Скачайте Lottie JSON или dotLottie, затем проверьте файл в том плеере, где будете его использовать.
Что переносится из Figma
- Импортируется поддерживаемая векторная графика. Переходы Smart Animate и взаимодействия прототипа не переносятся: движение нужно создать в Libre.
- Если графика импортируется с отличиями, попробуйте меньший фрагмент или сначала преобразуйте элементы в векторные контуры.
Хотите сначала попробовать? Откройте редактируемый пример Success.