+
13k likes
914k installs
What you ship
MP4, GIF, SVG, WebM. Dev mode: CSS, React
Advanced motion editing
Motion editing is limited to what Figma Motion supports
Cross-platform delivery
Recreate or adapt the animation per platform
Shipped interactivity
Prototype interactions stay in Figma or must be rebuilt in code
Live updates after launch
Edit in Figma, regenerate and redeploy code
Production file size
Video exports are heavy; code size varies
Centralized CDN updates
Re-export and replace assets in each implementation
What you ship
One portable .lottie / .json runtime asset
Advanced motion editing
Open the same file in Lottie Creator for advanced, AE–style editing in the browser
Cross-platform delivery
Same asset renders across web, iOS, Android, React Native, Flutter, and embedded targets
Shipped interactivity
dotLottie state machines ship inside the file, click, tap, hover, press-and-hold, then fine-tune in Lottie Creator
Live updates after launch
Use Motion Tokens to bind colors, text, and transforms to live data, update the shipped asset without rebuilding the app
Production file size
dotLottie is a tiny production file
Centralized CDN updates
Update the asset version in LottieFiles, CDN-linked files updates everywhere
Animate in Figma
Use Figma Motion, Smart Animate, prototype flows, or plain frames. Design the way you already do.
Export with LottieFiles
The plugin converts your work to Lottie or dotLottie, with a live preview and save straight to your workspace.
Keep editing
Open it in Lottie Creator to fine-tune timing, interactions and Motion Tokens, then re-save.
Handoff a file
Developers render it with the dotLottie runtime on any platform. What you designed is what ships.
Quoi de neuf
Frequently asked questions
What is LottieFiles for Figma?
LottieFiles for Figma is a plugin that brings the full LottieFiles toolkit into your Figma workspace. With it you can browse free and premium animations, animate your own Figma designs, create and export interactive dotLottie state machines from your prototype flows, manage team assets, and hand off production-ready files to developers all without switching tools.
Can I preview my animation before exporting?
Yes. You can preview animations in full motion inside Figma. For interactive animations, toggle into State Machine mode inside the plugin and interact with your animation before you export. Click, hover, and test triggers exactly as a user would. For more advanced editing, open the file directly in Lottie Creator to fine-tune timing, curves, or states before shipping.
What Figma interactions are supported when exporting a state machine?
The plugin works with the interactions Figma designers use most. This includes frame-to-frame prototype flows, triggers on nested objects and elements within frames, and component variant interactions. Instances follow the interaction logic of their original component on export. Triggers are detected automatically. Supported: Click & Tap, Hover, Mouse Enter & Leave, Press & Hold, and After Delay. Navigate To is the only supported prototype action. On Drag and Keyboard triggers are not currently supported.
What formats can I export?
dotLottie (.lottie), Lottie JSON (.json), GIF, MP4, WebM, and MOV. dotLottie is recommended for most use cases. It's compressed, loads faster, and supports state machines and theming in a single file.
How does the LottieFiles for Figma plugin help developers?
LottieFiles for Figma includes developer-friendly handoff tools through its Figma Dev Mode integration, making it faster and easier to bring animations into production. Developers can:
Auto-generated embed codes for web and mobile, directly from the design file
CDN asset links that stay in sync so updates reflect live with no redeployment needed
VS Code support so developers can access links and code snippets without leaving their editor
This means less back-and-forth, fewer manual exports, and faster shipping from design to live product.
Does LottieFiles for Figma support AI tools?
Yes. Two AI tools are available inside the plugin:
Prompt to Vector generates a custom SVG illustration from a text prompt
Vectorizer converts any PNG or JPG into a clean, editable vector with smart layer grouping and naming
We take user privacy seriously. Any user input or information requests in our AI models are safeguarded and will not be used as AI training.
How do I create an animation using the LottieFiles for Figma plugin?
There are three ways: use a built-in preset on a single frame, connect multiple frames to build an animation sequence, or export an existing Figma prototype flow as an interactive dotLottie state machine. Full guide at lottiefiles.com/plugins/figma/export-guide
How can I learn how to use the LottieFiles for Figma plugin?
Take a free LottieFiles for Figma certification course and become a Figma to Lottie expert in under 30 minutes. Enroll here: https://lottie.link/figma-certificate
Figma Motion vs Lottie: what's the difference?
Figma Motion is an animation tool: it's where you create motion inside Figma. Lottie is a file format: it's how that motion ships inside products.
When is Figma Motion enough on its own?
If your animation only needs to live inside a Figma prototype, a stakeholder walkthrough, or a Figma Site, you don't need us; Figma Motion handles that beautifully. Same for social clips: Figma Motion exports MP4 and GIF directly. If you're shipping a single micro-interaction to one web page, copying the CSS from Dev Mode is honestly fine too. Frame-by-frame character animation with complex effects is still After Effects territory; bring it to Lottie through our AE plugin instead. LottieFiles for Figma is for one job: taking the motion you designed to every platform of a real product, as one file, without a rebuild.
