lottieditorLottieditor guides
Figma to Lottie: animate exported SVG artwork
Export static SVG artwork, animate it in your browser, and keep an editable project. Start with the original three-shape mark supplied below.
Start with the working example
Our original example assets are free to use and modify. Player code retains its included license.
Drop your SVG file here
.svg · Up to 80 MBCan I convert Figma Motion to Lottie here?
This tutorial starts with static SVG artwork exported from Figma. Lottieditor does not import Figma Motion timelines or prototype transitions. Recreate the movement with presets or keyframes after importing the artwork. If you already have a Lottie JSON export, open it in the viewer to check playback.
1. Prepare the artwork in Figma
Download the source SVG and place it in a Figma Design file, or draw your own mark. Select the frame containing the complete artwork. Give the frame enough space for movement. Our sample is a 320 by 320 frame with a purple bar, a lilac square, and a green circle.
2. Export the frame as SVG
In the selection export settings, choose SVG and export the selected frame. Keep Outline text enabled when exact lettering matters. Outlined text becomes shapes rather than editable text. Keep a copy of your original Figma file for future wording changes.
3. Import and add motion
Open the SVG to Lottie tool below and upload your export. Choose Pulse for a repeating scale change, Float for vertical movement, or Fade in for an entrance. Begin with two seconds. The sample button loads the same source mark so you can practice without leaving this page.
4. Refine and export
Use First frame and Last frame, then watch several loops. Leave room for any rotating corners. Open in editor preserves supported SVG shapes and preset keyframes. In the standalone tool, download JSON or dotLottie without an account. Full-editor animation exports have separate Free and Pro limits.
SVG compatibility
This workflow transfers static artwork through SVG. It is not a native Figma plugin, and Figma prototype transitions are not imported. Gradients and unsupported effects may be rasterized. The tool tells you when artwork is an image layer. Embedded text, masks, and effects should be checked against the source appearance before shipping.