Figma: Figma Motion brings a native animation timeline to the design canvas

Figma Motion, announced at Config 2026 on June 24, adds animation directly inside the Figma design environment. Previously, designers who needed to communicate motion—transitions, microinteractions, animated components—had to leave Figma for After Effects, Rive, Framer, or similar tools, then translate the result back for developer handoff. Figma Motion removes that step.

The feature centers on a timeline interface on the canvas. Layers can be dragged to adjust timing, keyframes control properties like position, scale, rotation, and opacity independently, and the scrubbing interface lets teams preview how an animation plays across its full duration.

Animation presets—fade, move, scale—provide a starting point. They can be stacked for simultaneous playback or sequenced by dragging in the timeline. Motion variables work like style tokens: a team defines easing values once, applies them across a design system, and updates all instances by changing the variable. For organizations maintaining large component libraries, this means animation behavior can be governed the same way typography and color already are.

Animated components carry motion with them. A button’s hover animation defined in a design system applies wherever that component is used across files, without manual re-application.

In Dev Mode, the full timeline is visible to developers and animations export in CSS, JSON, and React formats through motion.dev. The Figma agent can generate keyframe suggestions from text prompts, which the announcement frames as a starting point for designers newer to animation work.

The practical consequence is that animation decisions can be made earlier in the design process, in the same file and context as the components they affect, visible to the whole team without requiring a separate tool or a separate file format.