Canvas-based animation timeline
Move from a design frame to Motion mode and work on a timeline that sits beside the canvas, so animation lives in the same file as the rest of the design.
Figma Motion
ReclamarFigma Motion is Figma’s canvas-based animation workspace for building motion in the same file as design, components, and variables.
What Figma Motion is
Figma Motion is Figma’s animation workspace, presented on the same canvas where design, components, variables, and team collaboration already live. The launch post describes it as a new Motion mode with a timeline beside the design, so animation work happens in the same file rather than in a separate tool.
The product is aimed at making motion easier to create, review, and reuse. Designers can keyframe core properties, apply preset animation styles, use animated components and motion variables, and collaborate with the team through time-based comments and Dev Mode-oriented handoff. The same page also positions the Figma agent as a way to generate keyframes from prompts and lower the learning curve for motion work.
Core capabilities
Timeline controls and keyframes
Adjust timing by dragging layers, scrubbing the playhead, and keyframing position, scale, rotation, and opacity independently. Auto keyframing records changes while the playhead moves.
Preset animation styles
Start quickly with preset styles such as fade, move, and scale, then stack them in parallel or sequence them on the timeline.
Reusable motion systems
Use animated components and motion variables so motion patterns can travel across screens, collaborators, and files with the rest of the design system.
Agent-assisted creation
Prompt the Figma agent to build keyframes directly on the timeline, which helps designers new to animation get started and reduces repetitive setup for experienced users.
Review and handoff support
Add time-based comments on the canvas and use Dev Mode functionality for a smoother review and handoff process.
Common use cases
Animating product interfaces
Build motion directly in the same file as the UI so designers can iterate on interactions without handing work off to a separate animation tool.
Building reusable design-system motion
Create motion once for a component and reuse it across screens and files, so shared UI elements keep the same behavior.
Getting started with motion design
Use the Figma agent to generate starting keyframes or suggestions when you want help translating an idea into motion.
Collaborative motion review
Review timing and behavior with teammates using comments anchored to moments on the timeline, then refine the animation before handoff.
Pros and Cons
Pros
- Keeps motion in the same Figma file as design work, which reduces tool switching.
- Supports direct timeline editing with keyframes, scrubbing, and auto keyframing.
- Lets teams reuse motion through animated components and motion variables.
- Includes time-based comments and Dev Mode support for review and handoff.
- Uses the Figma agent to help generate motion from prompts and assist less experienced users.
Cons
- The public source is a launch post and a product page with partial coverage, so some workflow details are not documented here.
- The page says custom animation styles are coming soon, which indicates that some functionality is not yet available.
- The source does not clearly describe export or output options for Motion itself.
FAQ
How do I get access to Figma Motion?
Figma Motion is built into Figma’s canvas experience and is presented as part of the Motion beta. The pricing page says Figma Motion beta is available on Full seats, so access depends on your plan and beta availability.
How does Motion fit into the Figma workflow?
The launch post says you can switch a frame to Motion mode and work on the timeline alongside your design. It also describes Dev Mode access and time-based comments for handoff and review.
What can I animate in Figma Motion?
The page describes keyframing position, scale, rotation, and opacity, plus shader properties. It also mentions preset animation styles such as fade, move, and scale.
Can teams build reusable motion systems in Motion?
The announcement says motion lives in the same file as your components, variables, and team, and that animated components and motion variables can travel across files. It also notes that custom animation styles are coming soon.
What outputs does Figma Motion support?
The source does not describe export formats for Motion today. It does state that 3D transforms coming soon will export to CSS and connect through MCP, but that is a separate upcoming capability.
Quick Facts
- Category
- Design Tool
- Product
- Figma Motion
- Source domain
- figma.com
- Availability
- Beta on Full seats
- Primary users
- Designers, motion designers, and product teams
- Workflow
- Animation timeline inside the Figma canvas