Blogs›Figma›Figma Motion Animation Timeline
Figma has introduced a native animation timeline directly on the canvas, allowing designers to create and control motion within their designs. This feature enables keyframing of position, scale, rotation, and opacity, with auto keyframing capabilities. It also supports time-based comments for collaboration and integrates preset animation styles. The system aims to build a motion system for design components and introduce motion variables for customization. This update expands Figma Motion to include direct code export in CSS, JSON, and React, and compatibility with MCP for passing animated frames to coding agents. It also introduces new export formats like MP4, WebM, and Animated SVG, with further formats planned. Additionally, Figma Motion is now built to work in code, with the full timeline visible and inspectable in Dev Mode, allowing for direct copying of animation code.
6/24/2026
This post details the integration of Figma Motion with code, enabling direct export of animations to CSS, JSON, and React. It also introduces new export formats (MP4, WebM, Animated SVG) and MCP compatibility for passing animated frames to coding agents. The Dev Mode now displays and inspects the full animation timeline, making timing, easing, and keyframes readable for direct code copying.
6/24/2026
This post introduces the Figma Motion feature, which adds a native animation timeline to the canvas. Key technical contributions include: timeline control with keyframing for position, scale, rotation, and opacity; auto keyframing; time-based comments; preset animation styles that can be stacked or sequenced; animated components that carry motion across files; and motion variables with modes for customization. It also details the integration with Dev Mode for exporting animation code in CSS, JSON, and motion.dev formats, and MCP compatibility. The post also mentions upcoming features like 3D transforms and shader effect keyframing.