Your first animation

The fastest first export is a single selected frame animated with a preset. It gives you a clean pass through selection, preview, feature checking, and export without needing a full prototype.

Before you start

Install and open the plugin. See Installation.
Create or choose a simple frame in Figma.
Keep the scene simple: shapes, text, image fills, basic fills, and basic strokes are easier to export than layered effects.

Steps

1. Select a frame

Select the frame you want to animate. For this first pass, choose a frame that is not a prototype flow starting point.

2. Click Animate

Open the LottieFiles plugin and click Animate. The plugin reads your selected Figma scene and opens the Figma to Lottie workflow.

3. Choose a preset

Pick a preset from the available preset list. Presets are best for simple icons, logos, and micro-interactions that do not need complex transitions.

4. Preview the animation

Use the plugin preview to check the motion. If you see an orange warning during render or export, open Feature checking before retrying.

5. Export

Choose the output that matches your next step:

dotLottie (.lottie) — preferred for smaller files and advanced features such as state machines, themes, and motion tokens.
Lottie JSON — use when you need compatibility with legacy lottie-web style players.
GIF, MP4, WebM, or MOV for design review, slides, or tools that do not support Lottie playback.

Verifying the result

After export, open the animation in a Lottie preview or save it to Workspace. For production handoff, confirm the developer knows which runtime to use. Interactive state machines require dotLottie and a dotLottie runtime.