SVG → Lottie
How to turn Figma artwork into a Lottie
Figma → Lottie Max is a copy-paste away. Lottie Max parses the SVG and recreates every element as an editable layer.
Get the SVG out of Figma
Shortcut: Cmd/Ctrl + Shift + C
- 1 Select the frame, group, or layer you want.
- 2 Press Cmd/Ctrl + Shift + C (Copy as → SVG), or right-click → Copy/Paste as → Copy as SVG.
- 3 Then in Lottie Max, press Cmd/Ctrl + V on the canvas — or drag the .svg file straight onto the canvas, or use Open SVG file on the home page.
What carries over
- ✓ Shapes become editable paths you can restyle and animate.
- ✓ Groups are preserved as nested layers.
- ✓ Gradients, clip-paths, and fills come across.
- ✓ Text comes in as editable text layers.
Tips for a clean import
- → Figma layer names travel with the import, so your Layers panel stays readable.
- → Flatten anything you don’t need to animate — fewer layers means a lighter export.
- → Outline text in Figma for pixel-perfect glyphs, or keep it as text to edit the copy later.
Now animate it
Once your art is in, add motion with one-click presets or keyframes.
FAQ
- Is exporting SVG from Figma to Lottie free?
- Yes. Lottie Max is free and runs entirely in your browser — no account, no sign-up.
- Does my Figma artwork get uploaded?
- No. Importing, animating, and exporting all happen client-side. Your artwork never leaves your device.
- What carries over from Figma?
- Shapes become editable paths; groups stay nested; gradients, clip-paths, and fills come across; and text stays editable.
- What can I export afterwards?
- Lottie .json and .lottie (dotLottie, ~3× smaller), plus a copy-paste HTML embed snippet.