Figma to Lottie Export for Mobile Apps
With Figma Variables and animation export plugins, the workflow "designer creates animation → developer gets Lottie" became real without After Effects. But this path has limitations worth knowing upfront.
Export Tools from Figma
LottieFiles Plugin for Figma—main tool. Works with Figma Smart Animate and Auto Animate transitions, exports vector layers to Lottie JSON. Handles simple animations well: appear/disappear, movement, scale, opacity.
Rive—Lottie alternative for Figma. Rive supports interactive State Machine directly in editor: assign transitions by events without code. Export Figma → Rive via Figma to Rive plugin. For interactive animations (buttons, toggles, illustrated stories with multiple states), Rive often beats Lottie.
What Works and What Doesn't
Figma → Lottie export doesn't support:
- Component animations with overlapping masks more complex than 2nd level
- Gradient mesh and advanced fill effects
- Text animations with custom fonts (font not embedded)
- Complex boolean operations on shape layers with contour animation
Before export, verify animation in Figma Prototype mode. If transitions use Smart Animate—LottieFiles plugin recognizes them. If Instant or Dissolve—export produces static frames without animation.
Practice: What We Do
Receive Figma file with animation. Check transition types used. For Smart Animate transitions—export via LottieFiles plugin, verify in preview player. If incompatible elements found—simplify in Figma or recreate animation in After Effects per Figma design.
For interactive animations with multiple states recommend Rive: smaller file, built-in State Machine, no additional progress control code needed.
Rive Integration:
- iOS:
RiveRuntime(Swift Package) - Android:
rive-android(Gradle) - Flutter:
rivepackage
RiveAnimation.asset(
'assets/button.riv',
stateMachines: ['ButtonStateMachine'],
)
Timeline: 1 day for typical animation—audit Figma file, export, device verification, integration.