Figma Motion is currently in open beta. Features may change and you may experience performance issues as we continue to improve Figma Motion. Learn more about what's included in the beta.
Before you Start
Who can use this feature
Available on any plan
Exporting animations larger than 1920 x 1080 or exceeding 30 FPS is only available on paid plans
Anyone with can view access to the file can export assets as long the file’s owner has not restricted copying and sharing on the file
You can export animations created in Figma Motion to share designs with others, move content between tools, or save copies of your work outside of Figma.
Export an animation to MP4, WebM, GIF, or SVG
Top-level frames that contain animated layers are marked with the Motion icon. Animated layers must be inside a frame to be exported.
- Select the top-level frame you want to export.
- In the Export section, switch to the Animated tab.
- Configure the export settings:
- Format: Choose MP4, WebM, GIF, or SVG.
- Size: Controls the resolution of the exported animation. Choose a default option or enter a custom size.
- Frame rate: Controls how many frames are captured per second. Higher frame rates produce smoother motion but larger file sizes.
- Quality (MP4 and WebM only): Controls the level of lossy compression applied to the exported video.
- Loop (GIF only): Determines whether the GIF loops continuously or plays once.
- Click Export.
- The exported file will open in a new tab. Click Download to save it to your computer.
If you’re using Figma in the browser, the exported file will be sent to the download location set in your browser preferences. If you’re using the Figma desktop app, you will be prompted to rename the file and choose where to send the export.
Note: If you don't see the Animated tab in the Export section, make sure you're selecting a top-level frame. Top-level frames are frames placed directly on the canvas. Only top-level frames can be exported as animations.
About exporting Lottie files
Lottie is a lightweight, JSON-based animation format that delivers high-quality motion across web, desktop, and mobile applications. Because Lottie animations are vector-based, they scale up or down without any loss of resolution. Lottie files are also significantly smaller than other file types, which makes them faster to load and easier on performance.
Note: Since Lottie players render animations in real time, rather than displaying pre-rendered frames, complex or media-heavy animations may impact performance.
Because Lottie files are text-based, every element of the animation exists as editable data rather than being baked into pixels or video frames. This means developers can:
- Change the colors of objects without editing assets in Figma Design
- Adjust playback speed or trigger specific segments of an animation based on user interaction
- Bind animation properties to real app data, like animating a progress bar to match an actual loading percentage
Limitations
Some Figma features are unsupported or only partially supported when exporting to Lottie. We recommend testing your animation in the Lottie player you plan to use in production.
| Feature | Note |
| Shaders |
Unsupported The shader will be exported as a flat image without animation. |
| Video |
Unsupported Export videos to MP4, WebM, or GIF instead. |
| Angular gradients |
Unsupported Angular gradients will export as a flat image. To keep the animation vector-based, replace the gradient with a linear or radial one instead. |
|
Drop shadows Noise effects Glass effects |
Partially supported These effects won’t update during the animation. The export will use the effect’s appearance from the first frame. |
Export a Lottie file
- Select the top-level frame you want to export. Animated layers must be inside a frame to be exported.
- In the Export section, switch to the Animated tab.
- Choose one of the following formats:
- Lottie: Exports a raw JSON file with no built-in compression. Can only include one animation per file.
- dotLottie: Exports a compressed archive that bundles the animation with its image and font assets. Can include multiple animations per file.
- Click Export.
If you’re using Figma in the browser, the exported file will be sent to the download location set in your browser’s preferences. If you’re using the Figma desktop app, you are prompted to rename the file and choose where to send the export.