How to use Lottify

A complete walkthrough of every Lottify tab — Export, Tools, Prototype, and Compress. Start with the basics, watch a short video for each tab, and you'll be exporting Lottie animations from Figma in minutes.

Export tab

The heart of the plugin. Pick a Frame, Component, Instance, or Component Set that has prototype animation, hit Export — Lottify packages it as a clean Lottie JSON that plays anywhere Lottie plays.

1
Open the plugin and stay on the Export tab Open Figma → Plugins → Lottify. The plugin opens on the Export tab by default.
2
Select something animated Lottify can export anything that has prototype animation built into Figma — a Frame with Smart Animate transitions, a Component Set with variants, a single Component, or an Instance of a variant. Static layers without prototype connections won't work.
3
Preview the animation The plugin instantly renders a live preview of the Lottie. If something looks wrong here, it'll look the same in production — fix the source in Figma and reselect.
4
Adjust export settings (optional) Pick image scale (1×–4×), format (WebP or PNG), quality, and decimal precision. Defaults are tuned for typical Lottie use — only change if you know you need different.
5
Hit Export JSON animation The Lottie file downloads instantly. Drop it into Lottiefiles, your codebase, After Effects — anywhere Lottie plays.
What if my selection isn't animated? You'll see a small warning empty state inside the plugin. The fix is in Figma: connect two Frames with a prototype interaction (drag from the right edge of one frame onto another, set transition to Smart Animate), or wrap the variants you want to animate in a Component Set.
Layer names must be unique within the same parent Smart Animate matches layers between frames by name. If two siblings on the same level have the same name, Lottify can't tell which one should morph into which — the result will look broken or static. Rename duplicates in your Figma layers panel before exporting (or use the Tools → Organize Component Set action to auto-rename variants).

Tools tab

Quick utilities to prepare assets for Lottie before you export. These solve common pre-export problems — messy variant ordering, oversized vectors, unwrapped layers — in one click.

Organize Component Set

Auto-rename and reorder variants

Aligns variants in a Component Set into a clean grid, with optional automatic naming (Step 1, Step 2…). Useful when the prototype chain is long and the variants got rearranged manually.

Rasterize Selection

Flatten anything to PNG

Converts the selection into a single rasterized image at 1×–4× scale. Use this for complex effects (blur, layered fills, gradient meshes) that don't translate cleanly to Lottie vectors.

Flatten Vectors

Smart-flatten vector layers

Combines overlapping vector shapes into a single optimized vector. Reduces Lottie size and avoids subtle z-order issues during animation.

Wrap Selection

Wrap into a Frame

Wraps the current selection into a new auto-sized Frame. Helps when you need to apply prototype animation to a group of layers that aren't yet inside a single frame.

Describe animation

Get a readable summary

Generates a structured text description of the prototype chain — variant names, durations, easings. Great for sharing with developers or copy-pasting into a spec.

Prototype tab

Visual inspector and editor for the entire prototype chain. Instead of clicking through variants one by one in Figma's prototype mode, see all of them as a timeline and tweak triggers, durations, and easings without leaving the plugin.

1
Select a Component Set or animated Frame The Prototype tab shows the entire interaction chain as a list of variants in animation order — start, intermediate steps, and the loop back.
2
Apply changes per variant or to all at once Edit a single variant inline, or use the master Apply to All Items panel at the top to change trigger, easing, duration, or transition type across every step at once.
3
Preview live, then export Switch back to the Export tab — the preview updates with your changes and you can export the new version immediately.
Empty state on this tab? If you see "Select a Frame or Component" — the current selection has no prototype reactions to inspect. Pick a Component Set, a variant inside one, or a Frame that's already connected to another via Smart Animate.

Compress tab

Standalone tool for shrinking Lottie JSON files — works on any Lottie, not just ones exported from Lottify. Drop your file in, choose compression level, and download a smaller version.

1
Open the Compress tab Drop a Lottie .json file into the upload zone, or click to browse. The plugin parses it and shows the original size.
2
Pick compression settings Choose image format (WebP recommended for size), quality, decimal precision, and max image size. Each change updates the preview in real time so you can see file-size reduction before downloading.
3
Download the optimized file Hit the download button — you get a new compressed_*.json file with the same animation but smaller bytes. Most assets shrink by 40–80% without visible quality loss.
Pro tip Compression is also applied automatically when you export from the Export tab — adjust the same settings there to skip a step. The standalone Compress tab is for files you didn't make in Lottify.

Still stuck?

If you've watched the videos and walked through the steps but it's still not clicking — drop us a line. We read every message.

Contact support Install on Figma