Figma | Code Layers & Specs Connect AI Prototypes
Figma's October 15, 2026 announcements connect working prototypes, written decisions and AI agents more closely on the canvas. Code layers entered open beta, while Specs began rolling out as a shared home for project context. The practical aim for a design team is to keep the reasoning behind an interaction visible alongside the experience being tested.
Bring the working prototype into the design review
Code layers can bring existing designs, local code, GitHub projects and prototypes from connected coding tools onto the canvas. Teams can duplicate a prototype and compare alternatives side by side. That gives a review more substance than a recording or screenshot, because colleagues can examine the behavior being discussed.
A useful starting point is a single flow with a decision still open: two ways to reveal a filter, different checkout feedback or an alternative navigation pattern. Keep the content consistent while comparing the interaction. The canvas should help the team identify why one version works better, rather than merely collect more options.
Keep visual edits connected to the prototype
The Figma agent can refine interactions in a code layer, while Extract designs converts selected screens or flows into editable Figma layers. Direct visual review and coded behavior can therefore inform one another. Teams can also review code changes through branches and pull requests before merging them into a shared project.
For a designer, that makes it useful to separate observations about appearance from observations about behavior. A cramped label needs a different correction from a broken transition. Annotate the specific screen or state, confirm the intended change and test the interaction again after the visual refinement has been applied.
Use Specs to preserve the decisions behind the screen
Specs combines written context with references to frames, diagrams and code layers. Existing Markdown can be brought onto the canvas, and the Figma agent can read and reply to comments. Through MCP, a coding agent can receive the spec together with the linked design context needed to act on it.
For a handoff, record the selected direction, the reason for choosing it and any unresolved questions. Link the relevant state instead of relying on a vague description of the screen. Keep exploratory alternatives distinct from accepted decisions so a teammate or agent can tell which behavior is actually intended for implementation.
Check beta access feature by feature
Code layers is rolling out in open beta on all plans; creation and editing on paid plans is free through November 4, 2026. Specs is rolling out in open beta to paid plans on web, desktop and mobile. Design-system guidelines and code sources have separate beta stages, so access is not uniform across the announcement.
Evaluate the workflow with a small shared task before depending on the entire package. Confirm which features are available to the people reviewing it, then test that the prototype and its written decisions remain understandable together. A clear review should leave an agreed next step, not just a more elaborate collection of generated material.
Daisuki's Take: What This Means for Designers
We see the strongest change in making the reasoning shareable. A working prototype is easier to improve when the team can also see the decisions and questions that shaped it.
We would use Specs to record what the team learned from comparing alternatives, then carry that context into the next revision or handoff.
For designers working with agents, speed becomes more useful when intention survives the process. Keep the approved behavior and its explanation close enough to review together.
Sources and Recommended Links
- Build by design: New workflows for new ways of building | Figma Official Blog
- Design together with code layers on the canvas | Figma Official Blog
- Introducing Specs: Markdown as a medium | Figma Official Blog
