Motion moves onto the Figma canvas

Figma has announced that motion design is now native to the canvas, sitting alongside Design, Draw, and Dev modes as part of a connected design experience. Instead of exporting work to external tools or piecing together animations in plugins, teams can animate the same components, variables, and files where the rest of the design lives. The feature is in open beta, with an animation timeline that makes keyframe control available to any designer, not just motion specialists.

Switching any frame to Motion mode reveals the timeline adjacent to the design. Designers can drag layers to adjust timing, scrub to preview frames, and set keyframes for position, scale, rotation, and opacity. Auto keyframing records changes while the playhead moves, and time-based comments let collaborators discuss specific moments in the animation. For quicker workflows, preset styles such as fade, move, and scale can be stacked to play simultaneously or sequenced. Because the final output is grounded in the actual file properties, the animations are inspectable and shareable within the normal Figma workflow.

A home for a real motion system

Figma is positioning motion as a system-level capability rather than a set of one-off animations. Two features support this direction:

  • Animated components: An animation built into a component now travels with it across every screen and collaborator file, just like fill or typography. This prevents teams from rebuilding the same motion work from scratch.
  • Motion variables: Designers can create easing variables with multiple defined modes and apply those across animations. Switching a mode at the page level updates every animation that references it at once.

This systematized approach extends beyond individual files. Product designer Adanna Onuekwusi noted that having motion in the same space lets her publish a motion process as a library—making what one person creates something the rest of the team can reuse. Atlassian designer Alexandra Pereira added that the shift removes friction from shipping, moving animated illustrations "from a specialist handoff into a system capability." Dev Mode access and the ability to comment on the timeline support that smoother back-and-forth.

Context for new capabilities: shaders and 3D

The motion timeline also expands what can be animated beyond typical object properties. Every property a shader exposes can now be keyframed over time. Previously, only a limited set of properties were animatable; with shader support, anything controllable via a slider or input field can be animated using keyframes.

Figma also previewed 3D transforms, coming soon. These will enable rotating frames, vectors, and text on the z-axis with native controls and live previews. Every transform remains fully editable, and the result exports to CSS and connects through MCP so the spatial design matches what reaches code. Combining 3D transformation with motion in the same file would enable spatial interactions not previously possible in Figma.

The agent lowers the animation learning curve

Motion is technically demanding, and Figma is addressing that with its agent. Describing what you want in natural language prompts the agent to build real keyframes on the timeline, grounded in the file's components and tokens. For designers newer to animation, this removes the learning curve; for those who already animate, it handles repetitive tasks so they can polish easing curves, timing, and details.

This accessible approach has resonated with practitioners. Atlassian's Davy Fung described using the agent to get feedback on a banner animation's strengths and weaknesses, while Maxwell Hathaway, a lead motion designer, sees broad value: "People get to see how things move really quickly, and that access is going to help them develop taste faster."

From first frame to final build

The handoff stage is where motion often diverges from the original design intent. Figma has added export options—MP4, GIF, SVG, or WEBM—directly from any animated frame for early alignment. When the file is ready for development, Dev Mode's Motion tab displays the full timeline with readable timing values, easing curves, and keyframes. Developers can copy animation code directly from the panel in CSS, JSON, or framework-ready React and motion.dev formats.

Motion also carries through Agent context via MCP compatibility. Sharing a link to any animated frame with a coding agent preserves the full motion context, so details are not rewritten or reinterpreted in the build.

Motion is currently in open beta. Starter users have access with limited exports; full seat users on all plans can use motion primitives and export capabilities. Full design system integration and the agent for motion are reserved for paid plans. Figma is taking waitlist signups for 3D transforms.