Using Figma to Lottie

Initial Setup

When you first open the plugin, you'll be prompted to log in with your LottieFiles account. Don't have an account? You can create one for free.

💡 Important: Only supported Figma features can be converted to Lottie. View supported features →

🔽 New to Lottie? Download this sample Figma file to get started

Getting Started

1. Open Your Design
   • Open your design file in Figma
2. Launch the Plugin
   • Click Resources in the top toolbar, or
   • Go to Menu > Plugins > LottieFiles
   • The plugin panel will appear on the right side
3. Access Figma to Lottie
   • Click the Figma to Lottie button in the plugin window

Three Animation Methods

Method 1: Single Frames

Best for animating logos and icons with preset animations

1. Select the frame you want to animate
2. Click Export to Lottie
3. The plugin will automatically detect possible animations
4. Choose an animation preset
5. Adjust the animation speed to your preference

Method 2: Prototype Flows

Convert existing Figma prototype flows into Lottie animations

1. Select your prototype flow from the dropdown menu
2. Preview how it will appear as a Lottie animation
3. Make any necessary adjustments

Method 3: Multiple Frames

Quickly combine multiple frames into a single Lottie animation

1. Select all frames you want to animate
2. Click Export to Lottie
3. The plugin will sequence them into a single animation

Saving Your Animation

Once you're satisfied with the result, you have two options:

• Save to Workspace: Store your animation in your LottieFiles workspace for download and further editing
• Insert as GIF: Add the animation directly to your Figma file as a GIF