Інтеграція Figma-анімацій у мобільні застосунки: інструменти та процес
Дизайнер створює анімацію в 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. Наприклад, Lottie простіше в інтеграції в 2 рази порівняно з After Effects для простих анімацій. Rive краще на 30% за швидкістю інтеграції складних інтерактивних елементів.
Як ми це робимо: практичний кейс
Отримуємо Figma-файл з анімацією. Перевіряємо, які переходи використано. Для Smart Animate переходів — експортуємо через LottieFiles плагін, перевіряємо в прев'ю-плеєрі. Якщо виявляємо несумісні елементи — або спрощуємо в Figma, або відтворюємо анімацію в After Effects за дизайном Figma. Наприклад, нещодавно для клієнта з інтернет-магазином ми конвертували 15 анімацій: 12 пішли в Lottie, 3 потребували Rive через інтерактивні стани. В результаті час інтеграції скоротився на 40%, а розмір файлів зменшився на 25% порівняно з GIF. Економія часу на розробку сягає 30% завдяки готовим рішенням. Вартість інтеграції простої анімації — від $300, складної — від $800. Гарантія якості на всі роботи — 1 рік, сертифіковані фахівці з 7+ років досвіду.
Інтеграція 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-файлу: перевірте типи шарів, маски, шрифти, переходи.
- Експорт: для Lottie — через плагін LottieFiles, для Rive — через Figma to Rive.
- Перевірка: завантажте файл у плеєр (Lottie Viewer чи Rive Player) та на реальному пристрої.
- Інтеграція: додайте бібліотеку в проєкт, підключіть анімацію.
- Тестування: переконайтеся, що анімація працює на всіх цільових пристроях.
- Деплой: публікація в App Store та Google Play.
Процес роботи: від аналізу до деплою
| Етап | Тривалість |
|---|---|
| Аналіз 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 днів. Вартість розраховується індивідуально — пишіть, оцінимо проєкт.
Потрібна допомога з експортом анімацій? Зв'яжіться з нами для аудиту ваших анімацій — розберемо ваш випадок та запропонуємо оптимальне рішення. Замовте інтеграцію прямо зараз, щоб прискорити розробку.