Search animations⌘K
＋
13k likes
914k installs
The gap
Without an export path, a developer rebuilds your animation by eye. Every duration and every easing curve is re- created by hand in CSS, SwiftUl, or Compose.
+
What you get
Export once with the LottieFiles plugin and the exact animation, same curves and same timing, runs natively on web, iOS, and Android in a file measured in kilobytes.
What you export
MP4, GIF, SVG, WebM. Dev mode: CSS, JSON, React
Native mobile & embedded
Hand-built per platform from the web code
Interactivity in the shipped file
Lives in Figma prototypes / generated code
Runtime updates
Edit in Figma, regenerate code
File weight
Video assets are heavy; code varies
File updates
Separate code paths to maintain
What you export
One portable .lottie / .json runtime asset
Native mobile & embedded
Same file renders natively on iOS, Android, React Native, Flutter, embedded — no per-platform rebuild
Interactivity in the shipped file
dotLottie state machines travel inside the file: click, tap, hover, press & hold, and finetune with Lottie Creator
Runtime updates
Add Motion Tokens to bind colors, text & transforms to live data, the deployed asset updates without a rebuild
File weight
dotLottie is a compact vector file
File updates
Re-export once, replace one file 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.
新着情報
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.
