Анимации из Figma в Lottie: интеграция в мобильные приложения
Дизайнер создаёт анимацию в Figma с Smart Animate, а разработчик получает статичные кадры — знакомая ситуация. Плагины для экспорта в Lottie решили эту проблему, но не без нюансов. Наш опыт — 7+ лет интеграции анимаций в мобильные приложения, более 40 успешных проектов. Мы поделимся, как правильно организовать процесс и избежать типичных ошибок.
Инструменты экспорта из Figma
LottieFiles плагин для Figma — основной инструмент. Работает с Figma Smart Animate и Auto Animate переходами, экспортирует vector-слои в Lottie JSON. Хорошо справляется с простыми анимациями: появление/исчезновение, движение, масштаб, прозрачность.
Rive — альтернатива Lottie. Rive поддерживает интерактивные State Machine прямо в редакторе: можно задать переходы по событиям без единой строки анимационного кода. Экспорт из Figma → Rive через плагин Figma to Rive. Для интерактивных анимаций (кнопки, toggle-ы, анимированные иллюстрации с несколькими состояниями) Rive часто предпочтительнее.
Что работает, а что нет
Figma → Lottie экспорт не поддерживает:
- Компонентные анимации с пересекающимися масками сложнее 2-го уровня
- Gradient mesh и advanced fill effects
- Анимации текста с кастомными шрифтами (шрифт не встраивается)
- Сложные boolean operations на shape-слоях с анимацией контура
Перед экспортом проверяем анимацию в Figma Prototype mode. Если переходы используют Smart Animate — LottieFiles плагин их распознает. Если переходы на основе Instant или Dissolve — экспорт даст статичные кадры.
Какой инструмент выбрать: Lottie или Rive?
| Критерий | Lottie | Rive |
|---|---|---|
| Тип анимаций | Автономные, простые (иконки, загрузчики) | Интерактивные (кнопки, переключатели) |
| State Machine | Отсутствует — управление через код | Встроенная State Machine |
| Размер файла | Компактный (JSON) | На 30% меньше Lottie для сложных сцен |
| Интеграция | iOS, Android, Flutter, React Native | iOS, Android, Flutter, Web |
| Поддержка градиентов | Ограничена | Полная |
Что делать, если Lottie не поддерживает сложные эффекты?
Для эффектов, которые Lottie не конвертирует (градиенты, маски, динамический текст), используйте Rive или After Effects. Rive справляется с интерактивными состояниями, а After Effects — для сложной векторной анимации с последующим экспортом через Bodymovin. Мы часто комбинируем: простые анимации в Lottie, сложные в Rive.
Как мы это делаем: практический кейс
Получаем Figma-файл с анимацией. Проверяем, какие переходы использованы. Для Smart Animate переходов — экспортируем через LottieFiles плагин, проверяем в превью-плеере. Если обнаруживаем несовместимые элементы — либо упрощаем в Figma, либо воссоздаём анимацию в After Effects по дизайну Figma. Например, недавно для клиента с интернет-магазином мы конвертировали 15 анимаций: 12 ушли в Lottie, 3 потребовали Rive из-за интерактивных состояний. В результате время интеграции сократилось на 40%, а размер файлов уменьшился на 25% по сравнению с GIF. Экономия времени на разработку достигает 30% за счёт готовых решений.
Интеграция Rive:
- iOS: RiveRuntime (Swift Package)
- Android: rive-android (Gradle)
- Flutter: rive package
RiveAnimation.asset( 'assets/button.riv', stateMachines: ['ButtonStateMachine'], ) Почему Lottie всё ещё актуален?
Для простых анимаций Lottie JSON компактнее и проще в интеграции. Размер файла на 50% меньше, чем GIF, при лучшем качестве. Lottie поддерживается всеми мобильными платформами: lottie-ios, lottie-android, lottie-react-native. В отличие от Rive, не требует State Machine для одноразовых анимаций.
Процесс работы: от анализа до деплоя
| Этап | Длительность |
|---|---|
| Анализ Figma-файла — проверка слоёв, масок, шрифтов, переходов | 0.5 дня |
| Экспорт — через LottieFiles или Figma to Rive | 0.5 дня |
| Проверка — в превью-плеере, на устройстве через TestFlight | 0.5 дня |
| Интеграция — встраивание в код, тестирование анимации | 0.5–1 день |
| Деплой — в App Store и Google Play | 0.5 дня |
Что входит в работу
- Аудит исходной анимации
- Экспорт в Lottie или Rive
- Проверка на устройствах (iOS/Android)
- Интеграция в проекты (Swift, Kotlin, Flutter или React Native)
- Инструкция по обновлению анимации
Типичные ошибки при экспорте
- Использование Instant или Dissolve переходов вместо Smart Animate — результат статичен.
- Сложные маски и градиенты — не экспортируются. Упрощайте дизайн.
- Отсутствие проверки на реальном устройстве — animation performance может проседать. Тестируйте!
Сроки ориентировочно
Типовая анимация — от 1 до 2 дней. Сложная (с несколькими состояниями) — от 3 до 5 дней. Стоимость рассчитывается индивидуально — пишите, оценим проект.
Нужна помощь с экспортом анимаций? Свяжитесь с нами для аудита ваших анимаций — разберём ваш случай и предложим оптимальное решение. Закажите интеграцию прямо сейчас, чтобы ускорить разработку.