figma-motion

Config 2026: New Materials, New Tools and a More Expressive Canvas | Figma Blog (opens in new tab)

Figma’s Config 2026 focuses on making the canvas a more expressive, collaborative environment where code, motion, shaders, generative plugins, and Weave tools work alongside traditional design layers. The company argues that code is a design material rather than a separate discipline, and that AI should support—rather than replace—human creativity. New features aim to let teams explore ideas faster while keeping design, implementation, and collaboration connected. ## Code Layers on the Canvas - Figma is introducing code layers, allowing any design layer to become an interactive code layer with one click or a prompt. - Teams can duplicate code layers and explore multiple directions side by side, just as they would with design frames. - Code layers support collaborative workflows including riffing, commenting, and iteration within the same Figma file. - Designers can extract code-generated designs back into editable design layers. - When changes are made to the design, a single click updates the corresponding code layer. - Early access is expected to begin in July 2026 through the Figma beta waitlist. ## Motion as a Core Design Material - Figma Motion brings animation directly into Figma Design, reducing the need to move between separate tools. - Its timeline includes keyframes, presets, and other controls for creating motion from scratch or adding animation to existing designs. - The Figma agent can generate an initial motion concept for designers to refine. - Motion can become part of a design system: an animation applied to a component can carry across screens and collaborators’ files. - In Dev Mode, developers can inspect the complete timeline, including timing values, easing curves, and keyframes. - Animation can be copied as CSS, JSON, or React-ready code. - Motion is MCP-compatible, allowing animated frames to be passed directly to coding agents. - Export formats include MP4, WebM, Animated SVG, and GIF, with additional formats planned. ## A More Unbounded Canvas - Figma describes the canvas as more than a place to store work: it is intended to connect ideas, tools, collaborators, and implementation. - The company’s broader Config strategy is to provide composable materials that let users experiment at the speed of their thinking. - Upcoming capabilities include shader fills and effects, generative plugins, Figma Weave tools, and expanded Figma agent functionality. - Figma argues that AI has lowered the barrier to creating, but people—not AI—will raise the creative ceiling through experimentation and bold expression. Figma’s direction is to unify design and development in one collaborative workspace. Designers and developers should use the new materials selectively: code layers for interactive exploration, Motion for reusable animation systems, and the canvas as a shared environment for rapid iteration from concept through implementation.

Introducing Figma Motion: Your Canvas Now Has a Timeline | Figma Blog (opens in new tab)

Figma Motion brings animation directly into the Figma canvas, alongside components, variables, and team collaboration. Its timeline, keyframes, presets, agent assistance, and Dev Mode support aim to make motion a shared design activity rather than a specialist handoff. The feature also enables reusable motion systems through animated components and motion variables. ## Design and Animate in the Same File - Motion is a new canvas mode alongside Design, Draw, and Dev modes. - Designers can switch a frame into Motion mode to access a timeline. - The timeline supports: - Dragging layers to control timing - Scrubbing through animations - Independent keyframes for position, scale, rotation, and opacity - Auto keyframing while the playhead is moving - Time-based comments tied to specific moments - Preset styles such as fade, move, and scale provide a quick starting point. - Animation styles can be stacked to run simultaneously or sequenced across the timeline. - Figma’s agent can guide less experienced designers and help generate or refine animations. - Motion remains in the same file as the rest of the design, reducing context switching and handoff friction. ## Build a Reusable Motion System - Animated components carry their motion behavior wherever the component is reused. - Motion can become part of a design system instead of being recreated as one-off work. - Motion variables allow teams to define reusable animation properties such as easing. - Variables can have multiple modes, letting teams switch animation behavior across an entire page or file. - Custom animation styles are planned for a future release. ## Collaboration and Handoff - Time-based canvas comments let teams review precise points in an animation. - Dev Mode gives developers access to the motion work, supporting smoother implementation. - Figma presents motion as a shared responsibility across designers, developers, and collaborators. - Atlassian users cited improved collaboration, faster feedback, and easier adoption by designers who are less familiar with animation. ## Shader Effects and Motion - Properties exposed by shaders can be keyframed on the motion timeline. - Any shader-controlled value with a slider or input field can potentially be animated over time. - This expands animation beyond Figma’s traditionally limited set of animatable properties. Figma Motion is positioned as a way to make motion native, systematic, and collaborative. Teams can prototype animations alongside interface designs, encode them into components and variables, and bring developers into the process earlier.