LanguageEnglish
Pillar 02 · Motion Design Guide
Figma Motion: What It Can and Can't Do (and What to Use for Production)
Figma Motion is the fastest way to design motion inside Figma. ExodeUI is for when that motion has to run in the product, with states, physics and input from the user.
What is Figma Motion: in ExodeUI?
Figma Motion is Figma's built-in animation mode, launched in open beta on 24 June 2026. It adds a timeline to a design frame so you can keyframe position, scale, rotation, color and opacity, then export the result as MP4, WebM, GIF, animated SVG, Lottie or dotLottie. It stops at the design file: an exported animation does not run your product on its own, and state, input and data binding still have to be built in code. ExodeUI is the better fit when the motion has to run in a real app on web, iOS and Android, driven by states, physics and input from the user.
Core Architecture
Why Engineers & Designers Choose ExodeUI
Design, logic and motion in one file that runs inside your app.
Runnable component vs exported clip
ExodeUI output is an .exode file the runtime plays in your app. Figma Motion exports video, GIF, SVG or Lottie, which plays animation but does not carry your app state.
State machines wired to your app
Model idle, loading, success and error as states with triggers your code fires, instead of holding every combination as a Figma variant.
Physics that respond to input
Springs and continuous momentum run in the live product, so a drag or fling continues with the velocity of the user, not a fixed curve.
Bring your Figma work in
Frames come across with the ExodeUI Figma plugin, so you keep designing in Figma and build the interactive part in ExodeUI.
Objective Evaluation
How ExodeUI Compares to Figma Motion
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- Ships as a running component: the .exode file plays in React, React Native, SwiftUI, Flutter and more, so the motion is not rebuilt by hand
- A state machine with inputs and events your application fires at runtime
- Springs and physics that respond to drag and gesture velocity in the live product
- An MCP server so AI coding tools such as Claude Code and Cursor can create and edit the motion file
Figma Motion
- Motion lives in the design file unless you export it as video, GIF, SVG or Lottie; it does not run as your app component on its own
- Exported Lottie and dotLottie can play animation and carry interactive states at the format level, but they are not wired to your application data
- Figma Motion is in open beta; publishing animated components, agent generation and high-resolution exports need a paid Full seat
- 3D transforms are announced as coming soon, not shipped
Developer Handoff
Using It in Your Code
Your app loads the compiled file through the ExodeUI runtime and talks to it through inputs and events.
import { ExodeUICanvas } from 'exodeui';
// Springs, states and timing live in the .exode file (designed in the
// editor). Your code passes inputs in and hears events back.
export function FluidCard() {
return (
<ExodeUICanvas
src="/fluid_card.bexode"
onTrigger={(name) => console.log('ExodeUI event:', name)}
/>
);
}What Figma Motion is
Figma Motion is a mode inside Figma that puts an animation timeline next to your design. Figma introduced it at Config 2026 and started rolling it out on 24 June 2026, and it is still in open beta, so features can change. You switch a frame to Motion mode and keyframe properties such as position, scale, rotation, color, stroke width, path trim and arcs. It ships with animation presets (Fade, Rotate, Scale, Resize and more) and custom styles, motion variables for easing and timing, bezier curves and springs, and auto-keying that records changes as you scrub. Later updates added text animation and audio on the timeline. Motion is available while you edit on all Figma plans, including Starter; Figma for Government plans do not have it.
- Launched at Config 2026, rolling out from 24 June 2026, in open beta
- Timeline, keyframes, presets, custom styles, motion variables and springs
- Text animation and audio on the timeline arrived in the 30 September 2026 update
- 3D transforms are listed as coming soon on the Figma Motion page
What Figma Motion can export
From a frame with animation you can export MP4, WebM, GIF or animated SVG directly from Figma. On 30 September 2026 Figma added Lottie and dotLottie export as well. Exports larger than 1920 by 1080, or above 30 frames per second, need a paid plan. Lottie export does not support everything: shaders, video and angular gradients come out as static images, and some effects such as drop shadow, noise and glass are flattened to their first-frame look, so Figma recommends testing the file in the player you plan to use. Dev Mode shows the full motion timeline and can copy animation values as CSS, JSON or React (including motion.dev), and the Figma MCP server passes animations to coding agents. Copying code and publishing animated components need a paid Full seat or Dev seat.
Video and image
MP4, WebM, GIF and animated SVG, capped at 1920×1080 and 30 FPS on free plans.
Lottie and dotLottie
Added 30 September 2026; shaders, video and angular gradients are not supported, and some effects flatten to the first frame.
Code and agents
Dev Mode copies values as CSS, JSON or React, and the Figma MCP server hands motion to coding agents, on a paid seat.
Where Figma Motion stops for production
Figma Motion is strong at designing motion next to the interface, and its export and Dev Mode output close much of the old handoff gap. The limit is what an export is: a video, a GIF or a Lottie file is a playback asset, and the code from Dev Mode is a snippet a developer still wires up. Neither runs as your product component on its own, and neither is bound to the states and data inside your app. If a button has to be idle, hovered, pressed, loading, disabled and in error, and the animation has to react to data and user input on web, iOS and Android, that logic has to be built in each codebase. Figma Motion now covers more of the motion design and handoff step than it did at launch; the runtime step is where it hands off to a tool built for it.
If the motion has to run in the app
ExodeUI is a browser and desktop tool for interactive UI and animation, for designers, developers and AI agents. You build the motion once in an open .exode file with state machines, spring physics, inputs and events, then ship it with runtime packages for React, Vue, Svelte, Angular, Solid, React Native, SwiftUI and Flutter. Your code passes inputs in and hears events back, so the same file runs in the app instead of being rebuilt per platform. An MCP server lets Claude Code, Cursor and other AI coding tools create and edit the file from plain-language prompts. You can bring frames in from Figma with the ExodeUI Figma plugin. We make ExodeUI, so weigh this part accordingly.
Topic Cluster Network
Explore Connected Concepts & Tooling
ExodeUI vs Figma Motion
The runtime difference, side by side
Figma to Exode overview
Migrating Figma motion work to ExodeUI
Motion Development Environment
Explore the full MDE category
Figma to Exode Converter Tool
Turn Figma animation values into production springs
Glossary: Spring Physics
Spring math, damping and stiffness explained
Got Questions?
Frequently Asked Questions
Build living components with real motion.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.