Інтеграція Figma-анімацій у мобільні застосунки: Lottie та Rive

Інтеграція 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 не підтримує складні ефекти?

Для ефектів, які 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 для одноразових анімацій.

Етапи інтеграції (покрокова інструкція)

1. Аудит Figma-файлу: перевірте типи шарів, маски, шрифти, переходи.
2. Експорт: для Lottie — через плагін LottieFiles, для Rive — через Figma to Rive.
3. Перевірка: завантажте файл у плеєр (Lottie Viewer чи Rive Player) та на реальному пристрої.
4. Інтеграція: додайте бібліотеку в проєкт, підключіть анімацію.
5. Тестування: переконайтеся, що анімація працює на всіх цільових пристроях.
6. Деплой: публікація в App Store та Google Play.

Процес роботи: від аналізу до деплою

Що входить в роботу

• Аудит вихідної анімації
• Експорт в Lottie або Rive
• Перевірка на пристроях (iOS/Android)
• Інтеграція в проєкти (Swift, Kotlin, Flutter або React Native)
• Інструкція з оновлення анімації
• Гарантія якості та безкоштовна підтримка протягом місяця

Терміни орієнтовно

Типова анімація — від 1 до 2 днів. Складна (з кількома станами) — від 3 до 5 днів. Вартість розраховується індивідуально — пишіть, оцінимо проєкт.

Потрібна допомога з експортом анімацій? Зв'яжіться з нами для аудиту ваших анімацій — розберемо ваш випадок та запропонуємо оптимальне рішення. Замовте інтеграцію прямо зараз, щоб прискорити розробку.

Анімації в мобільних додатках: Lottie, Rive, Spring та Reanimated

Ми зробили анімації для десятків проєктів — від ігрових інтерфейсів до bank-grade додатків. Знаємо, як змусити 120 fps працювати навіть на Android з ProGuard. Якщо анімація смикається — проблема не в інструменті, а у виборі підходу. Нижче покажемо, як обирати між Lottie та Rive, чому Spring physics перемагає UIView.animate, і як Reanimated 3 вичавлює 60 fps на старих пристроях. Отримайте консультацію щодо вашого проєкту — оцінимо анімаційний шар безкоштовно.

Чому UIView.animate ламається на складних сценаріях

UIView.animate(withDuration:) та ObjectAnimator на Android — правильний вибір для простих переходів. Але щойно анімація стає інтерактивною (користувач тягне елемент, швидкість залежить від жесту), потрібен інший підхід.

На iOS для gesture-driven анімації правильний інструмент — UIViewPropertyAnimator. Він дозволяє призупиняти, обертати та модифікувати анімацію в процесі. Типовий кейс: bottom sheet, який слідує за пальцем, продовжує рух з інерцією після відпускання та притягується до найближчої позиції. З UIView.animate це або не працює зовсім, або потребує ручної фізики.

У SwiftUI withAnimation працює з коробки, але інтерактивність обмежена — немає прямого аналога UIViewPropertyAnimator. Обхідний шлях: .gesture(DragGesture()) + @GestureState + явне обчислення позиції. Або йдемо в SwiftUI Animations API з Animation.spring(duration:bounce:).

Як React Native Reanimated обходить JS-міст

React Native Animated API виконує анімації в JS thread — це джерело джанка при завантаженому bridge. Reanimated 3 вирішує проблему через worklets: функції, які компілюються та виконуються прямо на UI thread без перетину JS-моста.

Приклад: parallax scroll header. На базовому Animated.Value при швидкому скролі FPS падає до 40-45 на mid-range Android. На Reanimated з useAnimatedScrollHandler — стабільні 60 fps, тому що весь перерахунок позиції відбувається на UI thread.

Reanimated 3 з useSharedValue, useAnimatedStyle та withSpring/withTiming — стандарт для анімацій у React Native. Gesture Handler v2 щільно інтегрований: useAnimatedGestureHandler замінює PanResponder і теж працює на UI thread.

Чому Lottie може знижувати FPS на Android і як це виправити

Lottie експортує After Effects анімацію в JSON. На iOS з lottie-ios працює стабільно, але на Android при складних ефектах (blur, частинки, градієнти) векторний рендеринг через Canvas призводить до просадок до 30-40 fps. Рішення — або спрощувати анімацію, або використовувати Rive з апаратним рендерингом. Ми тестували: Lottie-файл з розмиттям 5 МБ на Xiaomi Redmi Note 10 дає 48 fps, аналогічна анімація в Rive (.riv 400 КБ) — 60 fps. Rive працює в 1.25 раза швидше на однаковому пристрої, а при складних ефектах — до 4 разів легше за розміром.

Як вибрати між Lottie та Rive для вашого проєкту?

Обидва інструменти вирішують задачу «дизайнер робить анімацію, розробник додає файл». Але принципово по-різному.

Вибір простий: статична декоративна анімація (splash screen, onboarding ілюстрації) — Lottie. Інтерактивні UI-елементи зі станами — Rive. Наприклад, кнопка з hover, pressed, loading, success — одна Rive-анімація з чотирма станами проти чотирьох окремих Lottie-файлів. Це зменшує обсяг коду та спрощує підтримку.

Як впровадити анімації Lottie за 4 кроки?

1. Експорт з After Effects через плагін Bodymovin — отримуєте .json.
2. Додавання файлу до ресурсів проєкту (assets або drawable).
3. Ініціалізація плеєра — в iOS використовуйте LOTAnimationView, в Android — LottieAnimationView.
4. Запуск з параметрами — loopMode, animationSpeed, contentMode. Для складних сценаріїв — кастомний AnimationListener.

На практиці цей підхід працює, але потребує контролю версій Lottie-файлів. Ми рекомендуємо версіонувати їх разом з кодом і тестувати на цільових пристроях.

Spring-фізика та Hero transitions: як досягти природності

Spring-анімація відчувається природньо тому що імітує фізику — масу, жорсткість і демпфування. У SwiftUI: Animation.spring(response:dampingFraction:). В Android Compose: spring(dampingRatio = Spring.DampingRatioMediumBouncy).

Для Hero-переходів (елемент «перелітає» між екранами) на iOS використовуємо UIViewControllerTransitioningDelegate + UIViewControllerAnimatedTransitioning. У SwiftUI — matchedTransitionSource + navigationTransition(.zoom). На Flutter — Hero віджет, який працює з коробки.

Як уникнути типових помилок у Hero transitions?

Анімація починається нормально, але на цільовому екрані елемент «стрибає» в фінальну позицію. Причина — AutoLayout constraints застосовуються до завершення анімації. Рішення: layoutIfNeeded() в блоці анімації або використання transform замість frame-змін. На Flutter — перевіряйте HeroFlightShuttleConfiguration. Також слідкуйте за VSync: на Android при 90 Гц дисплеї Hero-перехід може виглядати смиканим, якщо не виставлений Choreographer.

Таблиця: Строки виконання та типові сценарії

Що входить в роботу: анімаційний шар під ключ

• Інтеграція Lottie/Rive-файлів в дизайн-систему
• Код gesture-driven переходів (bottom sheets, drawers, каруселі)
• Тестування на реальних пристроях (iOS, Android)
• Документація з анімацій (архітектура, ключі станів)
• Підтримка при оновленні дизайну (гарантія 30 днів)

У нас 5+ років досвіду в мобільній розробці, понад 30 проєктів з анімаціями, сертифіковані iOS/Android розробники. Замовте анімації під ключ — перша консультація безкоштовна. Напишіть нам у месенджер, щоб узгодити деталі.

Apple Developer Documentation – UIKit Animations використовується як базова специфікація.