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?
| Criterion | Lottie | Rive |
|---|---|---|
| Animation type | Standalone, simple (icons, loaders) | Interactive (buttons, toggles) |
| State machine | Missing – control via code | Built-in state machine |
| File size | Compact (JSON) | 30% smaller than Lottie for complex scenes |
| Integration | iOS, Android, Flutter, React Native | iOS, Android, Flutter, Web |
| Gradient support | Limited | Full |
| Performance | Loads in under 100ms | Loads in under 70ms |
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
- Analyze Figma file – check layers, masks, fonts, transitions. (0.5 day)
- Export – via LottieFiles or Figma to Rive. (0.5 day)
- Verification – in preview player, on device via TestFlight. (0.5 day)
- Integration – embed into code, test animation. (0.5–1 day)
- 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.