Figma Motion: animation moves into the canvas

Until now, UI motion was created outside Figma. The designer built it in a second tool, exported a video or a description, and development had to rebuild the curves and timings, often by eye. In the process, precision gets lost: an easing curve becomes an approximate idea, a timing becomes a guess. It is exactly this break, not a lack of animation tools, that has made motion inconsistent across many products.

Three things noticeably change the workflow:

• Timeline in the canvas. Keyframes, presets, and motion controls sit right where the design already lives. No switching to a second tool.
• Motion as part of the design system. A component gets animated once, and the motion travels like colour or typography across every screen and every file. This is the point that enforces consistency instead of just hoping for it.
• Readable handoff. In Dev Mode, the entire timeline is visible: every timing value, every easing curve, every keyframe. Export goes out as CSS, JSON, or framework-ready React, plus MP4, WebM, animated SVG, and GIF.

This means development reads the motion instead of interpreting it. That is the real shift.

An integrated tool is not automatically the right one for every case. Complex, narrative motion work, such as an elaborate brand film, remains a job for specialised tools. Figma Motion targets interface animation: states, transitions, micro-interactions, in other words exactly what a product needs every day and what has suffered from the handoff break until now. For this class of motion, the integration is the win. For anything beyond it, the toolbox stays mixed.

Anyone maintaining a product with recurring UI patterns benefits most: motion defined once stays consistent, and implementation gets exact values instead of approximations. Motion here is not decoration but part of an interface's comprehensibility, a point we go into in more detail in the role of UX in building software. Figma Motion finally makes this part editable in one place.