EasyLottie Guide
How to Convert a Figma Animation to Lottie (Without After Effects)
Figma Motion exports SVG, WebM, or GIF, but your codebase wants Lottie. This guide shows the fastest browser-based path — and when an animated SVG can become a true vector Lottie.
The gap: Figma exports motion, developers ship Lottie
Figma can now export animations, but only as SVG (animated with CSS @keyframes), WebM, or GIF. Product code, on the other hand, almost always wants Lottie — a compact JSON format you can control, theme, and keep razor-sharp at any size. There is no built-in "Export to Lottie" button in Figma, and the usual advice is to rebuild the whole thing in After Effects with the Bodymovin plugin. That is a lot of work to re-create motion you already designed.
The good news is that an animated SVG is already vector data with keyframes. That means it can be compiled directly into a true vector Lottie in the browser — not wrapped as video frames — so you skip After Effects entirely and keep the file tiny.
Which Figma export should you use?
The export you choose from Figma decides what kind of Lottie you can get back. Pick SVG when you want the smallest, sharpest result and your animation is vector-based. Use WebM or GIF when the animation relies on effects Figma can only rasterize.
| Figma export | Best for | Result in EasyLottie |
|---|---|---|
| Animated SVG (CSS @keyframes) | Vector shapes, simple motion | True vector Lottie — small and resolution-independent |
| WebM | Effects, gradients, complex motion | Lottie ZIP / GIF / transparent WebM via the video engine |
| GIF | Quick raster capture, wide support | Lottie ZIP / GIF via the video engine |
Step-by-step: convert a Figma animation to Lottie
The whole process runs locally in your browser. Nothing is uploaded, and you do not need an account or any desktop software.
- In Figma, export your frame or animation. For a vector result, export it as an animated SVG. If the animation uses effects Figma rasterizes, export WebM or GIF instead.
- Open EasyLottie’s Figma to Lottie tool and drop the file in.
- An animated SVG is compiled to a true vector Lottie. A WebM or GIF is routed through the built-in video-to-Lottie engine.
- Check the live preview, then download the .json (or a ZIP for raster sources).
- Drop the file straight into lottie-web, lottie-react, Flutter, or Android.
Why "true vector" matters
A raster wrapper — video frames stored inside a Lottie — is large and turns blurry when scaled up. A true vector Lottie keeps the shapes as paths, so it stays a few kilobytes and looks crisp on any screen and any pixel density. That is exactly what you would expect from a Lottie built by hand, which is why the vector path is worth aiming for whenever your Figma animation is vector-based.
When an SVG cannot become a clean vector Lottie
Some Figma SVG exports contain embedded raster images, gradients, masks, or filter effects that do not map cleanly onto vector Lottie shapes yet. When that happens, the tool tells you and points you to the video route instead: export the same animation from Figma as WebM or GIF, and convert that with the Video to Lottie tool. You still get a usable Lottie or transparent web asset — it is just backed by frames rather than paths.
If you only need to recolor a static or animated SVG rather than convert it, use the SVG Color Changer, which keeps the animation and lets you swap colors with a live preview.
Quick checklist
- Export from Figma as animated SVG for vector, or WebM/GIF for effects.
- Drop the file into the Figma to Lottie tool — nothing is uploaded.
- Confirm the live preview matches your Figma animation.
- Download .json for vector, or a ZIP for raster sources.
- If the SVG uses images or filters, convert the WebM/GIF export instead.
Frequently asked questions
Can I convert a Figma animation to Lottie without After Effects?
Yes. EasyLottie converts a Figma Motion export to Lottie entirely in your browser — no After Effects, no Bodymovin, and no source file needed.
Does Figma export Lottie directly?
No. Figma exports animations as SVG, WebM, or GIF. EasyLottie bridges that gap by converting those exports into Lottie.
Which Figma export gives the best Lottie?
An animated SVG (CSS @keyframes) can become a true vector Lottie — small and resolution-independent. WebM or GIF are best when the animation uses effects Figma rasterizes.
Are my files uploaded when converting?
No. Conversion is 100% local in your browser; your Figma export never leaves your device.
Is it free?
Yes, it is free with no signup and no watermark.