Figma Pulls AI Generation, Motion, and Live Code Into One Canvas
At its Config 2026 conference, Figma added AI image generation, a real animation timeline, and importable working code to its canvas, so a designer or PM can take an idea from prompt to near-shippable mockup without leaving the file.
Figma spent years letting designers draw screens and then hand them to engineers to actually build. At its Config 2026 conference on June 24, the company tried to collapse that handoff. In one run of announcements, Figma put AI generation, a real animation timeline, importable working code, and a prompt-driven agent inside the same canvas where people already design.
What Figma actually shipped
There are four pieces, all aimed at keeping you in one file.
Weave is the node-based AI generator Figma acquired when it bought Weavy. It now sits in the Figma Design panel as more than 20 tools for tasks like style transfer, product shots, and pulling materials out of an image. You generate and remix visuals without leaving the design surface.
Figma Motion adds a proper animation timeline to the canvas: keyframes, presets, transitions, and 3D transforms. The output exports to CSS, JSON, React, or video, so a motion idea can move toward production rather than living as a one-off clip in a separate app.
The Figma agent takes a prompt and builds generative plugins and custom shaders for you. It can save a prompt as a reusable "skill" and pull in context through connectors to GitHub, Slack, Linear, and Notion, so it works from your actual project instead of a blank slate.
Code Layers is the most ambitious piece. It lets you drop a GitHub repo or local folder onto the canvas as editable, interactive code layers, explore working-code directions side by side, extract designs back into Figma layers, and push changes back to the repo.
The CEO's framing
Figma co-founder and CEO Dylan Field, who announced the lineup, pushed back on the old "design versus code" divide. "Code isn't the opposite of design," he wrote. "Code is a material for design." The pitch is that a designer should be able to work with real code the way they work with shapes and text, as raw material on the canvas rather than a separate phase owned by engineers.
Read the rollout dates carefully
Not all of this is usable today. Figma Motion, the Weave tools, and the agent (in open beta, building plugins, skills, and static shaders) are available now. Code Layers is in closed beta and is scheduled to open in July. Interactive shaders are listed as coming soon, and the deeper integration that syncs Figma's canvas live with Weave is slated for later this year. TechCrunch reported Code Layers as available immediately, which conflicts with Figma's own beta timeline, so the features shipping now are the real story for the moment.
If you do any motion graphics or UI animation, Figma Motion is now a full timeline built into the canvas, with keyframes, transitions, and 3D transforms that export to video, CSS, or React, and for a lot of work it replaces After Effects.
If you make images or other visual assets, Weave's 20-plus AI tools generate and restyle them, build product shots, or pull a texture from a photo, all without leaving the file.
Sources
- Dylan Field (Figma CEO), "Code is a material for design" / Code Layers (X)
- Dylan Field, Config 2026 keynote summary (X)
- Figma blog, Config 2026 recap
- Figma blog (Nikolas Klein), "Code on the Figma canvas"
- Figma blog (Itay Schiff), "Connecting Figma and Weave"
- TechCrunch, "Figma adds code layers, support for animations, more AI features"
Comments
Sign in to join the conversation.