# Figma to Lottie
Convert Figma frames, scenes, prototype flows, and interactive states into Lottie or dotLottie output.

Figma to Lottie turns a Figma scene into motion output. It is not a Bodymovin export from After Effects; it converts supported Figma structures into Lottie output.

The most important decision is the starting point. A single selected frame, multiple selected frames, a prototype flow, and an interactive prototype are different workflows.

<Image src="https://assets.docs.lottiefiles.com/static/25a008a1a1-640.webp" alt="Export panel showing multiple selected frames ready to animate" caption="Export opens different workflows based on the Figma selection" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/25a008a1a1-640.webp 640w, https://assets.docs.lottiefiles.com/static/25a008a1a1-1024.webp 1024w" width="1524" height="856" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAYAAACzzX7wAAAACXBIWXMAAAPoAAAD6AG1e1JrAAAAf0lEQVR4nGPwjUj55xuR8h+G2yfO/L9tz4H/O/ce/p9T1fyPwdkn/L+Bhf1/Mzv3/xZOXv8XLZz5//n78/8/vT3/v7130n8GR+/Q/5qGFv/1bNz/G9t7/p87f97/Pz+e///14/X/9t4p/xnQrVi/def//Y/u/z/38vn/9r7p/wDJklCLZFz3NQAAAABJRU5ErkJggg==" />

## In this chapter

- **[Choosing an animation method](/en/integrations/figma/04_figma-to-lottie/choosing-an-animation-method)** - decide between presets, multiple frames, prototype flows, and state machines.
- **[Preparing your Figma scene](/en/integrations/figma/04_figma-to-lottie/preparing-your-figma-scene)** - structure layers and frames to avoid render failures.
- **[Timeline vs state machines](/en/integrations/figma/04_figma-to-lottie/timeline-vs-state-machines)** - understand ordinary playback versus interactive prototype behavior.
- **[Using presets](/en/integrations/figma/04_figma-to-lottie/using-presets)** - animate one selected frame quickly.
- **[Exporting multiple frames](/en/integrations/figma/04_figma-to-lottie/exporting-multiple-frames)** - create a sequence from several frames.
- **[Exporting prototype flows](/en/integrations/figma/04_figma-to-lottie/exporting-prototype-flows)** - turn a Figma prototype flow into animation.
- **[Exporting interactive state machines](/en/integrations/figma/04_figma-to-lottie/exporting-interactive-state-machines)** - preserve click, hover, press, and similar interactions in dotLottie.
- **[Motion tokens](/en/integrations/figma/04_figma-to-lottie/motion-tokens)** - carry runtime-controllable properties through the dotLottie export.
- **[Figma to Lottie controls](/en/integrations/figma/04_figma-to-lottie/figma-to-lottie-controls)** - reference controls in the export workflow.
- **[Troubleshooting Figma to Lottie](/en/integrations/figma/04_figma-to-lottie/troubleshooting-figma-to-lottie)** - diagnose failed or unexpected renders.

<Callout type="info" title="Interactive exports">
  Interactive state machines require `.lottie`. Exporting the same work as Lottie JSON removes interactivity and other dotLottie-only features such as themes and motion tokens.
</Callout>

## Related

- [Feature checking](/en/integrations/figma/06_feature-checking)
- [Choosing an output format](/en/integrations/figma/05_export-and-handoff/choosing-an-output-format)
- [Player controls](/en/integrations/figma/08_runtime-compatibility/player-controls)