Animations from Figma to Lottie: Integration into Mobile Apps

A designer creates an animation in Figma with Smart Animate, but the developer gets static frames—a familiar situation. Plugins for exporting to Lottie solved this problem, but not without nuances. With over 7 years of proven experience integrating animations into mobile apps and 40+ successful projects, we share how to organize the process correctly and avoid common pitfalls.

Export Tools from Figma

The LottieFiles plugin for Figma is the primary tool. It works with Figma Smart Animate and Auto Animate transitions, exporting vector layers to Lottie JSON. It handles simple animations well: appear/disappear, movement, scale, opacity.

Rive is an alternative to Lottie. Rive supports interactive state machines directly in the editor: you can define transitions based on events without writing animation code. Export from Figma → Rive via the Figma to Rive plugin. For interactive animations (buttons, toggles, animated illustrations with multiple states), Rive is often preferable.

What Works and What Doesn't

Figma → Lottie export does not support:

• Component animations with overlapping masks more complex than level 2
• Gradient meshes and advanced fill effects
• Animations of text with custom fonts (font is not embedded)
• Complex boolean operations on shape layers with animated outlines

Before exporting, we test the animation in Figma Prototype mode. If transitions use Smart Animate—the LottieFiles plugin will recognize them. If transitions are based on Instant or Dissolve—the export will produce static frames.

Which Tool to Choose: Lottie or Rive?

What to Do If Lottie Doesn't Support Complex Effects?

For effects that Lottie cannot convert (gradients, masks, dynamic text), use Rive or After Effects. Rive handles interactive states, and After Effects for complex vector animation with subsequent export via Bodymovin. We often combine: simple animations in Lottie, complex ones in Rive. Our 7+ years of animation expertise guarantee a seamless solution.

How We Do It: A Practical Case

We receive a Figma file with animation. We check which transitions are used. For Smart Animate transitions—we export via the LottieFiles plugin, then test in a preview player. If we find incompatible elements—we either simplify in Figma or recreate the animation in After Effects based on the Figma design. For example, recently for one of our clients with an online store, we converted 15 animations: 12 went to Lottie, 3 required Rive due to interactive states. As a result, integration time was reduced by 40%, and file sizes decreased by 25% compared to GIF. Development time savings reached 30% thanks to ready-made solutions. Lottie animations are 50% more efficient to implement than hand-coded animations.

Rive integration:

• iOS: RiveRuntime (Swift Package)
• Android: rive-android (Gradle)
• Flutter: rive package

RiveAnimation.asset(
  'assets/button.riv',
  stateMachines: ['ButtonStateMachine'],
)

Why Lottie Is Still Relevant?

For simple animations, Lottie JSON is more compact and easier to integrate. File size is 50% smaller than GIF with better quality. Lottie is supported by all mobile platforms: lottie-ios, lottie-android, lottie-react-native. Unlike Rive, it does not require a state machine for one-shot animations.

Process: From Analysis to Deployment

1. Analyze Figma file – check layers, masks, fonts, transitions. (0.5 day)
2. Export – via LottieFiles or Figma to Rive. (0.5 day)
3. Verification – in preview player, on device via TestFlight. (0.5 day)
4. Integration – embed into code, test animation. (0.5–1 day)
5. Deployment – to App Store and Google Play. (0.5 day)

Deliverables

• Audit of the original animation
• Export to Lottie or Rive
• Testing on devices (iOS/Android)
• Integration into projects (Swift, Kotlin, Flutter, or React Native)
• Instructions for updating the animation

Common Mistakes to Avoid

Common export mistakes include using Instant or Dissolve transitions instead of Smart Animate (result is static), complex masks and gradients that are not exported (simplify the design), and lack of real device testing (animation performance may drop). Always test! Our guaranteed process ensures no surprises.

Estimated Timelines and Costs

Typical animation – 1 to 2 days. Complex (with multiple states) – 3 to 5 days. The cost is calculated individually – contact us to evaluate your project. For a standard animation, integration costs around $300–500, saving up to 40% development time compared to hand-coded animations. With 7+ years in the field, we deliver certified quality.

Need help with exporting animations? Contact us for an audit of your animations – we will analyze your case and suggest the optimal solution. Order integration now to speed up development.

Animations in Mobile Apps: Lottie, Rive, Spring, and Reanimated

We've built animations for dozens of projects — from game interfaces to bank-grade applications. We know how to achieve 120 fps even on Android with ProGuard. If an animation stutters, the problem isn't the tool but the approach. Below we show how we choose between Lottie and Rive, why Spring physics beats UIView.animate, and how Reanimated 3 pushes 60 fps on older devices. Get a consultation for your project — we'll assess the animation layer for free.

Why does UIView.animate break on complex scenarios?

UIView.animate(withDuration:) and ObjectAnimator on Android are fine for simple transitions. But as soon as the animation becomes interactive (user drags an element, speed depends on gesture), a different approach is needed.

On iOS, the right tool for gesture-driven animation is UIViewPropertyAnimator. It allows pausing, reversing, and modifying the animation in progress. A typical use case: a bottom sheet that follows the finger, continues with inertia after release, and snaps to the nearest position. With UIView.animate, this is either not possible or requires manual physics.

In SwiftUI, withAnimation works out of the box, but interactivity is limited — there's no direct analog to UIViewPropertyAnimator. A workaround is using .gesture(DragGesture()) + @GestureState + explicit position calculation. Or move to SwiftUI Animations API with Animation.spring(duration:bounce:) from iOS 17.

How does React Native Reanimated bypass the JS bridge?

React Native Animated API executes animations on the JS thread — this causes jank when the bridge is busy. Reanimated 3 solves this with worklets: functions that compile and run directly on the UI thread without crossing the JS bridge.

Example: parallax scroll header. With basic Animated.Value, fast scrolling drops FPS to 40-45 on mid-range Android. With Reanimated using useAnimatedScrollHandler, it stays at a stable 60 fps because all position calculations happen on the UI thread.

Reanimated 3 with useSharedValue, useAnimatedStyle, and withSpring/withTiming is the current standard for animations in React Native. Gesture Handler v2 is tightly integrated: useAnimatedGestureHandler replaces PanResponder and also runs on the UI thread.

Why can Lottie reduce FPS on Android?

Lottie exports After Effects animation as JSON. On iOS with lottie-ios it's stable, but on Android, complex effects (blur, particles, gradients) via Canvas rendering can cause drops to 30-40 fps. The solution: either simplify the animation or use Rive with hardware rendering. We tested: a 5 MB Lottie file with blur on Xiaomi Redmi Note 10 gave 48 fps, while the same animation in Rive (.riv 400 KB) gave 60 fps.

Lottie vs Rive: What to choose for interactive interfaces?

Both tools solve the task of "designer creates animation, developer adds the file." But they differ fundamentally.

The choice is simple: static decorative animation (splash screen, onboarding illustrations) — Lottie. Interactive UI elements with states — Rive. For example, a button with hover, pressed, loading, success states — one Rive animation with four states versus four separate Lottie files.

Spring physics and Hero transitions: how to achieve naturalness?

Spring animation feels natural because it simulates physics — mass, stiffness, and damping. In SwiftUI: Animation.spring(response:dampingFraction:). In Android Compose: spring(dampingRatio = Spring.DampingRatioMediumBouncy).

For Hero transitions (an element "flies" between screens), on iOS use UIViewControllerTransitioningDelegate + UIViewControllerAnimatedTransitioning. In SwiftUI with iOS 17 — matchedTransitionSource + navigationTransition(.zoom). On Flutter — Hero widget, which works out of the box.

How to avoid common mistakes in Hero transitions?

The animation starts fine, but on the target screen the element "jumps" to the final position. The reason: AutoLayout constraints are applied before the animation completes. Solution: call layoutIfNeeded() inside the animation block or use transform instead of frame changes.

What's included: animation layer turnkey

• Integration of Lottie/Rive files into the design system
• Code for gesture-driven transitions (bottom sheets, drawers, carousels)
• Testing on real devices (iOS 15–17, Android 10–14)
• Animation documentation (architecture, state keys)
• Support for design updates (30-day warranty)

We have 5+ years of experience in mobile development, over 30 projects with animations, certified iOS/Android developers.

Timelines

• Basic screen transitions and micro-interactions — 1 week.
• Lottie/Rive integration with design system — 3-5 days after receiving final files.
• Custom gesture-driven interactivity (sheet, drawer, physics carousel) — 1-2 weeks.

Contact us — we'll add animations turnkey in 2 weeks. First consultation is free.