Анимации из Figma в Lottie для мобильных приложений

Анимации из 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 не поддерживает сложные эффекты?

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

Процесс работы: от анализа до деплоя

Что входит в работу

• Аудит исходной анимации
• Экспорт в 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:) из iOS 17.

Как 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.

Lottie vs Rive: что выбрать для интерактивных интерфейсов

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

Выбор прост: статичная декоративная анимация (splash screen, onboarding иллюстрации) — Lottie. Интерактивные UI-элементы с состояниями — Rive. Например, кнопка с hover, pressed, loading, success — одна Rive-анимация с четырьмя состояниями против четырёх отдельных Lottie-файлов.

Дополнительно: Lottie — стандарт для размеченной векторной анимации, Rive — более гибкий инструмент с физикой и state machine.

Spring-физика и Hero transitions: как добиться естественности

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

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

Как избежать типичных ошибок в Hero transitions?

Анимация начинается нормально, но на целевом экране элемент «прыгает» в финальную позицию. Причина — AutoLayout constraints применяются до завершения анимации. Решение: layoutIfNeeded() в блоке анимации или использование transform вместо frame-изменений.

Что входит в работу: анимационный слой под ключ

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

У нас 5+ лет опыта в мобильной разработке, более 30 проектов с анимациями, сертифицированные iOS/Android разработчики.

Сроки выполнения

• Базовые экранные переходы и микроинтеракции — 1 неделя.
• Lottie/Rive интеграция с дизайн-системой — 3-5 дней после получения финальных файлов.
• Кастомная gesture-driven интерактивность (sheet, drawer, карусель с физикой) — 1-2 недели.

Напишите нам — добавим анимации под ключ за 2 недели. Первая консультация бесплатно.