The Old Workflow Is Dead
For years, the workflow for UI animation was a nightmare:
- Design in Figma
- Re-build layers in After Effects
- Keyframe everything manually
- Pray the Bodymovin plugin doesn't crash on export
In 2026, that workflow is dead. With the latest updates to the LottieFiles for Figma plugin, you can now turn your native Figma prototypes—using Smart Animate—into production-ready Lottie code. No After Effects required.
This guide will show you exactly how to build a loading spinner, a success checkmark, or a toggle switch without ever leaving your design tool.
Why the "Figma-First" Workflow Wins
The traditional approach of jumping between design and animation tools creates friction at every step. The Figma-first workflow solves three critical problems:
Speed
You are already designing in Figma. Why switch tools? By staying in your design environment, you eliminate the context-switching overhead and maintain your creative flow.
Consistency
The colors, shadows, and vectors are 1:1 matches because you aren't recreating them. What you design is exactly what gets animated—no more "close enough" approximations in After Effects.
Developer Handover
You aren't handing off a video file; you are handing off code (JSON/dotLottie) that developers can copy-paste directly into their projects with full programmatic control.
Step 1: Prep Your Layers (The Golden Rule)
The #1 mistake beginners make is messy layers. Figma's Smart Animate (and the Lottie exporter) relies on Layer Names to track movement.
If a circle is named Ellipse 1 in Frame A, it must be named Ellipse 1 in Frame B. Consistent naming is how Figma knows which elements to animate between states.
1. Group Tightly: Don't just leave vectors floating. Group your icon parts (Cmd + G) and name the group Icon_Container
2. Flatten Complex Vectors: If you have a logo with 50 paths, flatten it (Cmd + E) into one shape unless you specifically need the parts to move separately
3. Use Descriptive Names: Instead of "Rectangle 47", use Background_Card or Button_Container
Step 2: Create the Animation with Smart Animate
We don't use a timeline here. We use States. Each frame represents a different state of your animation, and Smart Animate automatically creates the transitions between them.
This is a classic UI animation that confirms an action was successful. Here's how to build it:
Frame 1 (Start)
Draw a circle. Set the "Stroke" to 0% (using a trim path technique if available) or simply scale the checkmark icon down to 0px
Frame 2 (End)
Duplicate the frame. Scale the checkmark up to 100% and change the circle color to Green
Visual Example: Success Checkmark Animation
See how the checkmark transforms from hidden to visible
Circle: Gray stroke
Checkmark: Scale 0% (hidden)
Circle: Green filled
Checkmark: Scale 100% (visible)
💡 How it works: Figma's Smart Animate detects the matching layer names and automatically interpolates the transformation from scale 0 to scale 1, creating a smooth "pop-in" effect that feels organic and delightful.
- Prototype Tab: Connect Frame 1 to Frame 2
- Trigger: After Delay (1ms)
- Animation: Smart Animate
- Easing: Gentle (600ms)
Play the prototype. If it looks good in Figma, it will look good as a Lottie. This is the beauty of the Figma-first approach—what you see is what you get.
Step 3: Export with LottieFiles Plugin
Now for the magic. The LottieFiles plugin transforms your Figma prototype into production-ready code.
- 1. Open the LottieFiles plugin in Figma (Plugins → LottieFiles)
- 2. Navigate to the "Export to Lottie" tab
- 3. Select your prototype flow (the starting frame)
- 4. The plugin will record your Smart Animate transition and convert it into a Lottie file
Keep your animations under 3 seconds for UI elements. Anything longer risks distracting the user. Micro-interactions should be quick and delightful, not theatrical.
Performance: JSON vs. dotLottie
Once you hit export, you have two choices. In 2026, there is only one right answer.
❌ JSON: The old standard. It's just text code. It can get bloated (500KB+) if your animation has many nodes. Files are larger and slower to load, especially on mobile devices.
✅ dotLottie: The new standard. It uses ZIP compression to shrink files by 80%. A 500KB JSON becomes a 30KB dotLottie file. It also bundles any images or fonts inside, so your animation never "breaks."
| Feature | JSON | dotLottie |
|---|---|---|
| File Size | Large (500KB+) | Small (30-100KB) |
| Compression | None (plain text) | ZIP (80% smaller) |
| Images/Fonts | Separate files | Bundled inside |
| Loading Speed | Slower | Faster |
| Best For | Debugging | Production |
Interactive Widget: The File Size Calculator
Curious how much space you save? We built a calculator below. Enter your standard GIF size, and see how much faster your site would load with Lottie.
Conclusion: The Figma-First Future
After Effects is still king for complex character animation or movie-quality motion graphics. But for UI Animation—loaders, buttons, toggles, and empty states—Figma is all you need.
By keeping your workflow inside one tool, you iterate faster, design better, and ship products that feel alive. The Figma-to-Lottie workflow eliminates the friction of context-switching and puts animation control directly in the hands of designers. This is the future of UI animation in 2026.
Test Your Lottie Files
Preview, test, and validate your Lottie animations before implementing them. Our free Lottie Viewer supports JSON and dotLottie formats with frame-by-frame control.
FAQ: Figma to Lottie
Yes! The LottieFiles for Figma plugin converts your Smart Animate prototypes into production-ready Lottie files (JSON or dotLottie). No After Effects required. Just design your animation states in Figma, connect them with Smart Animate, and export.
JSON is the original Lottie format - plain text that can get bloated (500KB+). dotLottie is the new standard that uses ZIP compression, reducing file sizes by 80%. A 500KB JSON becomes ~100KB dotLottie. It also bundles images and fonts inside, so nothing breaks. Always use dotLottie for production.
No coding required! If you can use Figma's Smart Animate feature, you can create Lottie animations. The LottieFiles plugin handles all the code generation automatically. You just design the states, connect them, and export.
Figma is perfect for UI animations (buttons, loaders, toggles) but limited for complex character animation or movie-quality effects. After Effects has advanced features like shape morphing, particle systems, and precise timing controls that Figma can't match. For UI micro-interactions, Figma is actually faster.
The golden rule: keep layer names identical across frames. If a circle is named "Circle 1" in Frame A, it must be "Circle 1" in Frame B. Group elements tightly (Cmd + G), flatten complex vectors (Cmd + E), and use descriptive names like "Button_Container" instead of "Rectangle 47".
Superfiles
Lemonade Wishes
