Figma Code Layers: Agent Reads Prototype Connections
FigmaFigma updated code layers so the agent now reads the prototype connections and interactions between design frames when it builds a code layer from them. Designers spend less time prompting the complex parts of a flow and more time refining the prototype and finding edge cases. Code layers is currently in open beta.
Key Takeaways
- Prototype connections now feed the agent, so the links and interactions between frames inform the code layer it generates.
- Designers can prompt less for complex flows, because the flow already drawn on the canvas serves as context.
- The time saved goes toward refining the prototype and finding edge cases, which is the stated aim of the update.
- The change applies when a code layer is created from design frames, not to every way of creating one.
- Code layers remains in open beta, so behavior may still change.
- The update builds on Figma's push to make prototypes run as real code on the canvas rather than as frame-to-frame links.
What Changed
Figma updated how code layers are created from design frames. When a designer uses a set of frames to generate a code layer, the Figma agent now reads the prototype connections and interactions between those frames, in addition to the frames themselves. The flow already drawn on the canvas becomes part of the context the agent works from.
Why It Matters
Complex flows used to need long prompts that described navigation, transitions and state changes in words. With this update, the connections a designer has already wired between frames carry that information. Figma says this means designers spend less time prompting the complicated parts of a flow and more time refining the prototype and finding edge cases.
Availability
Code layers is currently in open beta. The release note is filed under Figma Design, AI, Design and Prototyping. Figma points to its help center article on code layers in Figma Design for setup details.