The design canvas just became the most expressive creative surface in any tool
Figma dropped a barrage of announcements at Config 2026 this week, and the through-line is clear: the canvas is no longer just for static design. It now holds code, motion, shaders, generative plugins, and multi-model AI workflows, all composable alongside your existing design layers.
This is not a future roadmap. Motion, code layers, shader fills, generative plugins, and Weave tools are all live or entering beta now. Here is what each one actually does and what you can make with it.
Figma Motion: Animation Lives on the Canvas Now
The biggest announcement is Figma Motion. There is now a timeline directly inside Figma Design, complete with keyframes, easing curves, and presets. You can animate any layer, build motion from scratch, or ask the Figma agent to generate a starting point.
What makes this different from every other animation tool that plugs into design: motion travels through your design system. Animate a component once, and that animation follows the component across every screen and every collaborator. It works the same way fills and typography already do in Figma.
When you switch to Dev Mode, the full timeline is inspectable. Every timing value, easing curve, and keyframe is readable without interpretation. You can copy animation code in CSS, JSON, or framework-ready React. You can also export as MP4, WebM, Animated SVG, or GIF. And it is MCP-compatible, so you can pass any animated frame directly to a coding agent for implementation.
What this means in practice: you no longer export to After Effects or Lottie to animate a design system component. You build the motion inside Figma, it lives with the component, and developers get production-ready animation code from the same file.
Code Layers: Code Is Now a Design Material
Figma is treating code the same way it treats images, vectors, and text layers. You can turn any design layer into an interactive code layer with one click (or a prompt). You can duplicate code layers to explore multiple directions side by side, just like you would with design frames.
When you want to move from code back to design layers, you can extract design frames into editable design layers. When you are ready to go back, one click updates the code layer with what changed.
This is not Figma adding a code preview window. Code layers are first-class canvas citizens. They sit next to your design frames, they accept comments, they show up in multiplayer cursors, and they round-trip cleanly between visual and code editing.
Code layers enter beta starting in July. You can join the waitlist now.
Shader Fills and Effects: Procedural Materials Without Leaving the Canvas
Shaders have always run under the hood in Figma, but creating them required specialist knowledge and they were hard to share with your team. Now you describe what you want (or use an image as reference), and the Figma agent builds the shader for you.
Effects transform what is already in a layer. Fills act as a new material. Both are parameterized by default, so you add controls directly on the canvas and shape them in real time. They stack with other effects, and they convert to code and popular formats.
Gradient map, Riso print, Luminance particles: these are not static filters. They are live, adjustable, composable materials that respond to your parameters. Interactive shaders are coming soon, pending performance work.
Generative Plugins: Build Your Own Tools by Describing Them
Generative plugins let you create canvas-native tools by describing the behavior, controls, and parameters you need. No local dev environment or plugin API knowledge required. You describe the tool, the agent builds it, and it feels native to the canvas.
Build something for yourself, share it with anyone in your file, and soon publish tools to your team, organization, or the broader community. This is Figma betting that the best tools are the ones designers build for their own workflows.
Weave Tools: Multi-Model Workflows on the Canvas
Figma Weave is a node-based canvas for building generative workflows. You connect models, transform assets, refine outputs, and compare approaches. Instead of prompting for a single result, you sculpt a multi-model workflow that turns what is in your head into a visible, inspectable, iterable process.
Weave tools now live on the Figma canvas. You build workflows in Weave and publish them as templates for others to use or remix. Soon you will be able to publish them as tools for your team, organization, or the community. The Transfer Style Weave tool is already available to apply a style from one image to another.
The Agent Gets Skills, Connectors, and Attachments
The Figma agent (launched to everyone just before Config) also got a significant upgrade. Skills package up your workflows and conventions into reusable instructions. Connectors let the agent reach tools already in your stack: Notion, Slack, Granola, Hex, GitHub, Atlassian, and more. Attachments bring in research, briefs, or any relevant artifact.
Agent chats are now visible to teammates by default, so you can see what directions others are exploring and build on their thinking. Private chats are still available when you need them.
The agent is also coming to FigJam and Slides.
What This Unlocks
The pattern across every announcement is the same: Figma is removing the boundaries between design, code, motion, and generative AI. The canvas is not just where your static designs live anymore. It is where you compose, animate, code, generate, and ship, all in one surface.
For designers who have been jumping between Figma, After Effects, VS Code, and various AI tools to get a single project out the door, this collapses that workflow. Motion lives with the design system. Code round-trips with visual layers. Shaders are one prompt away. And the agent can reach your team context and external tools to keep moving.
The practical shift: a single Figma file can now contain your design system, your motion system, your code prototypes, your generative workflows, and your team context. That is a lot of surface area on one canvas, and it will take time for teams to figure out how to organise it. But the direction is unmistakable. Figma is building toward a world where the gap between designing something and making something real is measured in clicks, not handoffs.
Want more like this? Join MOKU Club for free. Weekly resources, early access to new guides, and occasional templates you can actually use. Join below.
