+
Figma to Lottie:
Official Export Guide
Figma to Lottie:
Official Export Guide
Figma to Lottie:
Official Export Guide
Welcome to the Figma to Lottie Export Guide! This guide will help you create smooth animations using LottieFiles for Figma while avoiding common render failures. Whether you're new to Lottie or troubleshooting an issue, you'll find everything you need here to export your Figma designs into Lottie animations with ease.
Welcome to the Figma to Lottie Export Guide! This guide will help you create smooth animations using LottieFiles for Figma while avoiding common render failures. Whether you're new to Lottie or troubleshooting an issue, you'll find everything you need here to export your Figma designs into Lottie animations with ease.
Welcome to the Figma to Lottie Export Guide! This guide will help you create smooth animations using LottieFiles for Figma while avoiding common render failures. Whether you're new to Lottie or troubleshooting an issue, you'll find everything you need here to export your Figma designs into Lottie animations with ease.
In this guide, you’ll learn:
How to choose the best render method for your project.
How to choose the best render method for your project.
How to choose the best render method for your project.
Which Figma features are supported for Lottie conversion.
Which Figma features are supported for Lottie conversion.
Which Figma features are supported for Lottie conversion.
Best practices to prevent render issues.
Best practices to prevent render issues.
Best practices to prevent render issues.
How to troubleshoot common problems.
How to troubleshoot common problems.
How to troubleshoot common problems.
Let’s get started!
Let’s get started!
Let’s get started!
Choose your render method
Choose Your
Render Method
Figma to Lottie export can be done in three main ways: preset, frames, and prototype.
Each method suits different types of projects, so let’s explore them to find the best fit for your workflow.
Figma to Lottie export can be done in three main ways: preset, frames, and prototype.
Each method suits different types of projects, so let’s explore them to find the best fit for your workflow.
Figma to Lottie export can be done in three main ways: preset, frames, and prototype.
Each method suits different types of projects, so let’s explore them to find the best fit for your workflow.
Preset
A quick way to export a single frame with predefined animations (e.g., a pulse motion preset). Best for simple animations that don’t require complex transitions.
Select a frame in Figma.
In the Lottiefiles plugin, choose a preset from the dropdown menu.
Export and preview your animation.
Select a frame in Figma.
In the Lottiefiles plugin, choose a preset from the dropdown menu.
Export and preview your animation.
Select a frame in Figma.
In the Lottiefiles plugin, choose a preset from the dropdown menu.
Export and preview your animation.
Presets don’t support all features, like radial gradients or layer blur (see Supported Features).
Presets don’t support all features, like radial gradients or layer blur (see Supported Features).
Presets don’t support all features, like radial gradients or layer blur (see Supported Features).
Frames
Export multiple frames to create a sequence of animations. Best for animations with distinct steps, like a loading sequence.
Select the frames you want to animate.
In the Lottiefiles plugin, choose
"Export to Lottie."Render the animation.
Select the frames you want to animate.
In the Lottiefiles plugin, choose
"Export to Lottie."Render the animation.
Select the frames you want to animate.
In the Lottiefiles plugin, choose
"Export to Lottie."Render the animation.
Ensure all layers & names are consistent across frames to avoid render issues (see Best Practices).
Ensure all layers & names are consistent across frames to avoid render issues (see Best Practices).
Ensure all layers & names are consistent across frames to avoid render issues (see Best Practices).
Prototype
Export a prototype flow to create more complex animation. Best for complex animations with transitions, like a UI interaction.
Set up a prototype flow in Figma (see Best Practices for detailed steps).
In the Lottiefiles plugin, select the prototype flow from the dropdown.
Export and render the animation.
Set up a prototype flow in Figma (see Best Practices for detailed steps).
In the Lottiefiles plugin, select the prototype flow from the dropdown.
Export and render the animation.
Set up a prototype flow in Figma (see Best Practices for detailed steps).
In the Lottiefiles plugin, select the prototype flow from the dropdown.
Export and render the animation.
Prototypes support Smart Animate features like "Ease In" and "Bouncy" (see Supported Features)
Prototypes support Smart Animate features like "Ease In" and "Bouncy" (see Supported Features)
Prototypes support Smart Animate features like "Ease In" and "Bouncy" (see Supported Features)
Supported features
To avoid render failures, use only the features supported by Lottiefiles for Figma.
Below is a table of supported features, their status, and any limitations or tips.
To avoid render failures, use only the features supported by Lottiefiles for Figma.
Below is a table of supported features, their status, and any limitations or tips.
To avoid render failures, use only the features supported by Lottiefiles for Figma.
Below is a table of supported features, their status, and any limitations or tips.
Shapes
Text
Image
Fills & Gradients
Strokes
Effects
Triggers
Animations
Curves
Others
Feature
Supported
Notes/Tips
Rectangle
Fully supported
Line
Fully supported
Line arrow
Supported on single-frame presets only.
Workaround: Outline stroke
Triangle arrow
Fully supported
Reversed triangle
Fully supported
Circle arrow
Fully supported
Diamond arrow
Fully supported
Ellipse
Fully supported
Polygon
Fully supported
Star
Fully supported
Shapes
Text
Image
Fills & Gradients
Strokes
Effects
Triggers
Animations
Curves
Others
Feature
Supported
Notes/Tips
Rectangle
Fully supported
Line
Fully supported
Line arrow
Supported on single-frame presets only.
Workaround: Outline stroke
Triangle arrow
Fully supported
Reversed triangle
Fully supported
Circle arrow
Fully supported
Diamond arrow
Fully supported
Ellipse
Fully supported
Polygon
Fully supported
Star
Fully supported
Shapes
Text
Image
Fills & Gradients
Strokes
Effects
Triggers
Animations
Curves
Others
Feature
Supported
Notes/Tips
Rectangle
Fully supported
Line
Fully supported
Line arrow
Supported on single-frame presets only.
Workaround: Outline stroke
Triangle arrow
Fully supported
Reversed triangle
Fully supported
Circle arrow
Fully supported
Diamond arrow
Fully supported
Ellipse
Fully supported
Polygon
Fully supported
Star
Fully supported
Shapes
Text
Image
Fills & Gradients
Strokes
Effects
Triggers
Animations
Curves
Others
Feature
Supported
Notes/Tips
Rectangle
Fully supported
Line
Fully supported
Line arrow
Supported on single-frame presets only.
Workaround: Outline stroke
Triangle arrow
Fully supported
Reversed triangle
Fully supported
Circle arrow
Fully supported
Diamond arrow
Fully supported
Ellipse
Fully supported
Polygon
Fully supported
Star
Fully supported
Best practices
Best practices
Follow these tips to ensure your Figma designs convert seamlessly into Lottie animations.
Follow these tips to ensure your Figma designs convert seamlessly into Lottie animations.
Keep layers consistent across frames
Keep layers consistent
across frames
Missing or reordered layers can cause rendering issues.
Make sure all layers are present in every frame, in the same order.
Instead of deleting layers, hide them by setting their opacity to 0.
Work backward from the final frame, adjusting visibility and positions as needed.
Make sure all layers are present in every frame, in the same order.
Instead of deleting layers, hide them by setting their opacity to 0.
Work backward from the final frame, adjusting visibility and positions as needed.
Make sure all layers are present in every frame, in the same order.
Instead of deleting layers, hide them by setting their opacity to 0.
Work backward from the final frame, adjusting visibility and positions as needed.
Stick to supported Features
Stick to supported Features
Using unsupported features can lead to render failures.
Check the Supported Features list before designing.
Avoid using component instances or colors from external libraries, as they may not be supported.
Check the Supported Features list before designing.
Avoid using component instances or colors from external libraries, as they may not be supported.
Check the Supported Features list before designing.
Avoid using component instances or colors from external libraries, as they may not be supported.
Avoid using stacked fills & effects
Avoid using stacked fills & effects
Stacked effects (e.g. shadows, gradients, fills, strokes) for one object can break the animation.
Apply only one option per one object across all frames.
Avoid using angular or diamond gradients, as they’re not fully supported.
Apply only one option per one object across all frames.
Avoid using angular or diamond gradients, as they’re not fully supported.
Apply only one option per one object across all frames.
Avoid using angular or diamond gradients, as they’re not fully supported.
Set up prototype flow with
top-level frames
Set up prototype flow with
top-level frames
Exporting without a proper flow can lead to incorrect animation rendering.
Select the first frame in Figma.
Go to Prototype > Flow starting point to set it.
In the Lottiefiles plugin, choose the new flow from the dropdown menu (instead of "Export to Lottie").
Render the animation with the correct flow settings.
Select the first frame in Figma.
Go to Prototype > Flow starting point to set it.
In the Lottiefiles plugin, choose the new flow from the dropdown menu (instead of "Export to Lottie").
Render the animation with the correct flow settings.
Select the first frame in Figma.
Go to Prototype > Flow starting point to set it.
In the Lottiefiles plugin, choose the new flow from the dropdown menu (instead of "Export to Lottie").
Render the animation with the correct flow settings.
Use consistent layer name & text values
Use consistent layer name & text values
Changing text within the same layer can cause render failure.
Use separate text layers for different text values and toggle their visibility.
Keep layer names consistent across all frames.
Use separate text layers for different text values and toggle their visibility.
Keep layer names consistent across all frames.
Use separate text layers for different text values and toggle their visibility.
Keep layer names consistent across all frames.
FAQs
FAQs
Gradient not rendered properly
Inconsistent gradients or unsupported types (angular/diamond) can cause render failure. Apply gradients consistently across frames and use only linear or radial gradients.
Workaround: export angular/diamond gradient fill as PNG, and insert as image fill.
Gradient not rendered properly
Inconsistent gradients or unsupported types (angular/diamond) can cause render failure. Apply gradients consistently across frames and use only linear or radial gradients.
Workaround: export angular/diamond gradient fill as PNG, and insert as image fill.
Gradient not rendered properly
Inconsistent gradients or unsupported types (angular/diamond) can cause render failure. Apply gradients consistently across frames and use only linear or radial gradients.
Workaround: export angular/diamond gradient fill as PNG, and insert as image fill.
Animation is not rendered as expected
Animation is not rendered as expected
Animation is not rendered as expected
Need more help?
Enroll in the Figma to Lottie Certification Program to level up your skills.
Have questions? Email us at [email protected].