Figma Motion: Native Animation Timeline Now in Open Beta
FigmaFigma introduced Figma Motion, a native animation timeline built directly into the design canvas, now available in open beta for all plans. Designers can create keyframe animations, apply preset styles, animate shaders, and export to CSS, JSON, React, MP4, WebM, Animated SVG, and GIF formats without leaving Figma. Figma Motion brings collaborative motion design into the same file as components, variables, and team members, eliminating the longstanding need for separate animation software. Time-based canvas comments let the full team review and annotate animations at specific moments in the timeline.
Featured Video
A video we selected to help illustrate this changelog
Sources & Mentions
4 external resources covering this update
Introducing Figma Motion: Your canvas now has a timeline
Youtube
Figma adds code layers, support for animations, more AI features in new update
TechCrunch
Figma launches a new integrated Motion design tool alongside Code Layers and new AI features
AlternativeTo
Figma Launches Code Layers & Motion at Config 2026
CMSWire
Figma Brings Animation Natively to the Canvas with Figma Motion
For years, motion design lived outside Figma. Designers created animations in dedicated tools like After Effects or Principle, exported them, and handed off files for developers to interpret and reimplement in code. That workflow required context-switching and introduced friction at nearly every stage of the design process. With the launch of Figma Motion at Config 2026, Figma has collapsed that gap by building a full animation timeline directly into the design canvas.
Figma Motion is available in open beta on all plans starting June 24, 2026.
Timeline-Based Animation on the Canvas
At the core of Figma Motion is a visual timeline that lets designers animate any layer or component without leaving their design file. Designers can drag layers to adjust timing, scrub to preview any moment, and keyframe individual properties including position, scale, rotation, and opacity independently of one another.
Animation presets for common patterns like fade, move, and scale can be applied quickly and stacked on the timeline to run simultaneously or sequenced one after another. Auto-keyframing records every change made while the playhead is active, making it straightforward to capture motion intent without manually setting every frame.
Shader and Variable Compatibility
One of the more technically significant aspects of Figma Motion is its integration with the new shader and variable systems introduced at the same Config 2026 event. Every property a shader exposes can be keyframed on the motion timeline, meaning the same AI-generated shader fills and effects that live on the canvas can now be animated. Motion variables allow designers to define reusable timing and easing values that apply consistently across animations in a file.
Collaborative Motion Review
Figma Motion introduces time-based comments on the canvas, allowing any collaborator with file access to point to a specific moment in the animation. This brings the full team, including product managers, engineers, and stakeholders, into the motion review process in the same environment where the design lives.
Dev-Ready Exports
Figma Motion supports multi-format export tailored to different downstream needs: CSS for web, JSON for data-driven handoffs, React for component-based implementations, and video formats including MP4, WebM, Animated SVG, and GIF. Lottie support is planned for a future update. The MCP server is also compatible with Figma Motion, enabling AI coding agents to query and work with motion data directly.
Availability
Figma Motion is available in open beta on all plans. No additional seat type or paid upgrade is required to use the core animation features during the beta period.