Figma lets teams generate and edit code directly on the canvas
Code layers can start from a prompt, a repo import, or Make, and closed-beta sign-ups are open now.
With code layers, Figma Design lets teams generate and edit code directly on the canvas, next to the rest of a file. A layer can start from the toolbar, from an existing frame, from a prompt to the Figma agent, or from an imported GitHub repo or local folder; code built in Make can also be brought onto the canvas as a code layer.
- Code layers work like duplicated frames: teammates can compare alternatives, move and resize elements for an immediate code response, and keep prompting to generate new versions while the original is preserved.
- Selecting "extract designs" converts a screen, state, or full flow from a code layer back into editable Figma layers; edits there update the code layer in one click.
- Specific changes can be made by annotating in the code editor and asking the agent, or by editing the code directly, then converting back to a code layer and pushing to a repo.
Code layers are rolling out in closed beta over the coming weeks, with sign-ups open for early access.
Figma
Collaborative design tool for building interfaces, prototypes, and design systems — all in the browser.
View Figma →