# Figma lets teams generate and edit code directly on the canvas By Steven Van · 2026-06-24 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]() Figma Collaborative design tool for building interfaces, prototypes, and design systems — all in the browser. [View Figma →]() Sources [Original source]() [Read Figma lets teams generate and edit code directly on the canvas on Creators Toolbox]() --- Canonical source: https://creatorstoolbox.com/blog/figma-code-on-the-figma-canvas