Code Lives on the Canvas Now — What Figma's Code Layers Mean for Designers Who Build

Figma just shipped code layers — interactive, runnable code that lives directly on the design canvas, side by side with your frames. It's currently rolling out in closed beta, but what it signals is significant: the gap between "this is what it looks like" and "this is what it does" just got a lot narrower.

For designers who are learning to build with AI tools, that's the shift worth paying attention to. You no longer have to ping-pong between a design file and a separate AI chat window, hoping the two stay in sync. The canvas becomes the single place where you explore, compare, and decide — and code is just another material you work with there.

What Code Layers Actually Are

A code layer is a live, interactive piece of working code embedded as an object on your Figma canvas. It behaves like a frame in the sense that you can move it, resize it, and duplicate it — but it runs. Click through it. Test it. Compare two versions next to each other and feel the difference, not just see it.

You can create one a few ways: add it from the toolbar, ask the Figma agent (the built-in AI) to generate one from a prompt, or turn an existing frame into one by telling the agent to "build this with code." You can also bring in an existing codebase by importing a GitHub repository or uploading a local folder — which matters if you're already a few weeks into a project.

The code itself is React (the article shows App.tsx files), so the output is real, deployable frontend code — not a simulation.

The Workflow That Changes Everything

Here's the concrete shift for someone who designs first and builds second.

Trying alternatives used to mean duplicating static frames. You'd make Frame A and Frame B, look at them, and guess which one would feel better in motion or interaction. With code layers, you duplicate working experiences instead. Both versions run. You interact with both. Your gut has actual information to work with.

Iterating used to mean re-prompting in a chat window. Now when you prompt the agent to change something, it generates a new version while leaving the original intact on the canvas. Your teammates can see both, leave comments on either, and prompt against the same layer themselves. Exploration becomes a team sport instead of a solo rabbit hole.

Going back to "design mode" is one click. This is the feature I'd watch most closely: Extract Designs. It converts the current state of a code layer back into editable Figma layers — regular frames and components you can manipulate with design tools. You pick what lands on the canvas: a single screen, a specific interaction state, or a full flow. Tweak it visually, then push the changes back to the code layer with one click. That two-way bridge is genuinely new. Most design-to-code tools have been one-way streets.

How to Actually Use This as a Designer-Builder

If you get early access, here's a practical way to think about slotting code layers into your process:

1. Sketch intent in Figma first. Build your frame the way you normally would — layout, hierarchy, rough components. Don't over-polish it.
2. Right-click and ask the agent to build it. The "Build this with code" option turns your frame into a running code layer. Treat this as a starting point, not a finished product.
3. Duplicate and diverge. Make two or three code layer copies and prompt each one differently. "Make the button feel more urgent." "Try a bottom-sheet pattern instead of a modal." Compare them live.
4. Extract Designs when you get stuck visually. If you want to adjust spacing, swap a color, or restructure a layout and prompting isn't landing right, use Extract Designs to pull it back into editable layers, fix it with your hands, then push it back.
5. Annotate before you hand off. The code editor lets you leave annotations and ask the agent for specific changes. Use this to close the gap between what the AI generated and what you actually meant — before anything goes to a repo.

What to Keep in Mind

Code layers are in closed beta right now — you'll need to sign up at Figma's Config betas page and wait for access. So this isn't something you can dive into today unless you're invited.

A few open questions worth watching: How well does the generated React code hold up as projects grow more complex? The workflow shines for exploration and early-stage building, but it's less clear how it handles edge cases, accessibility requirements, or design systems with lots of custom components. And because this is AI-generated code, you'll want to review what comes out — especially if you're building something real that users will touch.

None of that diminishes what's here. The core idea — that code and design should evolve together in one shared space, visible to the whole team — is exactly right. Designers who build have always worked in two places at once. Now they might not have to.