TechPrufer
Get started
Figma
Figma logoFigma · Feature trail

Figma Motion Animation Timeline

2 posts · Jun 2026

What this trail covers

Figma Motion introduces a native animation timeline on the canvas, enabling keyframing of position, scale, rotation, and opacity. It supports auto keyframing, time-based comments, and preset animation styles. The system aims to build a motion system for design components and introduce motion variables for customization. It also integrates with Dev Mode for smoother handoffs and exports to various formats (MP4, GIF, SVG, WEBM, CSS, JSON, React, motion.dev). Future enhancements include 3D transforms and shader effect keyframing. The Figma agent assists in generating motion directly on the timeline.

All Figma trails
  1. Introducing Figma Motion: Your canvas now has a timelineThis post details the introduction of a native animation timeline to the Figma canvas, allowing for direct keyframing of motion properties (position, scale, rotation, opacity). It introduces auto keyframing, time-based comments for collaboration, and preset animation styles. The capability extends to building animated components and motion variables for design systems. Integration with Dev Mode provides inspectable timelines and exportable code (CSS, JSON, React, motion.dev). The Figma agent is leveraged to assist in generating motion directly on the timeline.