Story time!
Rachel is working on a new chat feature in Cheddar, the budgeting app.
When someone asks about their spending, Cheddar can return a breakdown by category and suggest useful follow-up questions.
The static designs are in a good place, but Rachel is still unsure about the interactions. Should the breakdown expand inside the chat thread or open into a focused view? Should suggested questions appear right away or change based on the category someone taps? The ideas make sense in her head, but she wants to try them in context before committing.
She needs something she can click through, adjust, and bring back to the canvas before she feels she can commit to an approach.
There's a ceiling to what you can learn from looking at static frames on the canvas. It might be a whole screen or series of screens you want to validate—or a single component or micro-interaction you want to play with. Either way, the only way to know if something works is to try it out.
In this article, we're going to explore how designs can go through a roundtrip journey from design to prototype and back again using the agent in Figma Design and code layers.
Turn your static designs into code layers
Use Build this with code and the Figma agent will ask you if you want to build the code layer now or add additional context first. Once you've finished prompting, Figma will recreate your designs using code so you can interact with it directly on the canvas.
Add more context to your designs
Add your design systems, libraries, and code sources to get a more realistic output of your code layer.
Add asset libraries
Design systems provide real assets—like library styles, components, usage guidelines, and npm packages—for the Figma agent to build with. Without it, code layers falls back on generic web defaults. Your first output will be closer if the design system is in place from the start.
If your team has published one, select it before prompting.
Include a code source
If you’re already coding in a third-party environment and don’t want to hop back and forth between tools, or you want to see explorations side-by-side in the same place, you can connect a code source so that the code layer uses your real production code. You can clone repositories hosted on GitHub up to 3GB, or upload a local folder up to 100MB.
Note: Code layers don’t work with every repository. Before you clone, check the repository requirements and limits.
Connect external context
If the component ties back to a spec or PRD, connect the relevant source using an MCP connector. Paste a Notion link and tell the agent to use it as the brief — if the spec updates, run the connector again and the agent will incorporate the changes. The agent connector library includes Notion, Jira, Confluence, Linear, and others. You can also create a custom connector to connect any MCP server your team runs.
Keep iterating
Once the initial build lands, keep prompting. Ask for specific interactions, edge states, loading behavior. The agent remembers what you've attached, so you can build on it step-by-step rather than re-explaining the design each time.
How’s the interaction looking?
Working through an interaction tends to surface things that don't show up in static frames. For example, an edge state you hadn't designed for or a transition that feels off at real speed.
In this case, Rachel’s been inspired by the auto-suggestions that pop up above the chat box. She’d like to explore that idea a bit more on the canvas.
Bring it back to design
Extract designs allows you pull aspects of a code layer into editable designs, make changes to the designs, and then push those updates to the code layer for a roundtrip experience. You can extract the current state of the entire code layer page as it currently looks, select an element to extract, or click through the prototype to capture a flow into multiple frames.
If you're working on a prototype that lives in Figma Make file, you can also bring that onto the design canvas as a code layer. If you make edits to that code layer, you can push those changes back to the main Make file.