Figma Motion is currently in open beta. Features may change and you may experience performance issues as we continue to improve Figma Motion. Learn more about what's included in the beta.
Before you Start
Who can use this feature
Available on any plan
Anyone with can edit access to a file can use Figma Motion
Figma Motion lets you create, refine, and build production-ready animations without ever leaving your design file.
Enter Figma Motion
You can access Figma Motion directly inside your design files. To open Figma Motion, Motion in the toolbar.
Note: If you don’t see the Motion option in the toolbar, make sure you have can edit access to the design file.
Use the timeline
While Figma Motion is enabled, the timeline appears across the bottom of your screen. This is where you’ll set keyframes, adjust animation placement and length, and preview your animations. Learn more about the timeline.
Animate your designs
Figma Motion lets you animate your designs at whatever level of control you need, from quick presets to custom keyframes.
Jump in with preset animations
Preset animations let you quickly add motion to your designs without manually configuring keyframes. Learn more about using preset animations.
Take full control with keyframes
Add keyframes manually for precise control over every layer and property, or enable auto-keyframe and let Figma Motion record your changes automatically. Learn more about adding keyframes.
Generate animations with the Figma agent
Describe the motion you want and the Figma agent adds keyframes to the timeline. From there, keep prompting or fine-tune the details on the timeline until the motion is just right. Learn more about generating animations with the Figma agent.
Fine-tune the details with easing
Nothing in nature moves at a perfectly uniform speed. Easing lets you bring that reality to your animations, giving you control over how they accelerate and decelerate. Learn more about easing.
Build your motion system
Motion systems let your whole team quickly add on-brand animations anywhere.
Create animated components
There’s no need to create great motion from scratch every time. Turn your animations into components and reuse them again and again. Learn more about creating animated components.
Use easing and timing variables
Move between different motion values quickly with easing and timing variables. Learn more about variables.
Collaborate on the timeline
Time-stamped comments let you tie feedback to specific moments in an animation. Learn more about comments.
Build and share your animations
Inspect animations in Dev Mode
Developers can scrub through and inspect animations at full fidelity using the read-only timeline, then copy animation code directly into CSS, JSON, or motion.dev. Learn more about viewing animations in Dev Mode.
Pass motion context to your agentic coding tools
Send animation code to your agentic coding tools via the Figma MCP server to implement designs quickly and accurately. Learn more using the Figma MCP server.
Export animations
Export your animations to share with others or save copies outside of Figma. Learn more about exporting animations.