Introducing Figma Motion: Your Canvas Now Has a Timeline | Figma Blog (opens in new tab)
Figma Motion brings animation directly into the Figma canvas, alongside components, variables, and team collaboration. Its timeline, keyframes, presets, agent assistance, and Dev Mode support aim to make motion a shared design activity rather than a specialist handoff. The feature also enables reusable motion systems through animated components and motion variables. ## Design and Animate in the Same File - Motion is a new canvas mode alongside Design, Draw, and Dev modes. - Designers can switch a frame into Motion mode to access a timeline. - The timeline supports: - Dragging layers to control timing - Scrubbing through animations - Independent keyframes for position, scale, rotation, and opacity - Auto keyframing while the playhead is moving - Time-based comments tied to specific moments - Preset styles such as fade, move, and scale provide a quick starting point. - Animation styles can be stacked to run simultaneously or sequenced across the timeline. - Figma’s agent can guide less experienced designers and help generate or refine animations. - Motion remains in the same file as the rest of the design, reducing context switching and handoff friction. ## Build a Reusable Motion System - Animated components carry their motion behavior wherever the component is reused. - Motion can become part of a design system instead of being recreated as one-off work. - Motion variables allow teams to define reusable animation properties such as easing. - Variables can have multiple modes, letting teams switch animation behavior across an entire page or file. - Custom animation styles are planned for a future release. ## Collaboration and Handoff - Time-based canvas comments let teams review precise points in an animation. - Dev Mode gives developers access to the motion work, supporting smoother implementation. - Figma presents motion as a shared responsibility across designers, developers, and collaborators. - Atlassian users cited improved collaboration, faster feedback, and easier adoption by designers who are less familiar with animation. ## Shader Effects and Motion - Properties exposed by shaders can be keyframed on the motion timeline. - Any shader-controlled value with a slider or input field can potentially be animated over time. - This expands animation beyond Figma’s traditionally limited set of animatable properties. Figma Motion is positioned as a way to make motion native, systematic, and collaborative. Teams can prototype animations alongside interface designs, encode them into components and variables, and bring developers into the process earlier.