Figma code layers - Design, code and specs together on one Figma canvas
by•
Figma’s code layers put working code on the design canvas, next to the designs. Create one from a frame, a GitHub repo, a webpage via Chrome extension, or by asking the Figma agent. Compare options side by side, and turn a code layer’s states back into editable layers. Figma Specs add design and technical requirements on the canvas, and Payload connects data to Make. Public beta.
Replies
Figma code layers put working code directly on the Figma design canvas, right next to your designs, so teams can see how a screen looks and how it behaves in one place.
Problem: Designs and code usually live in separate worlds. A static mockup can’t show how something really behaves, and checking a coded version means jumping between tools, which makes it hard for designers and developers to compare options and agree on a direction.
Solution: A code layer is an interactive, code-backed prototype that sits on the canvas like any other layer. You can start one by converting a design frame, importing a GitHub repo, capturing a website with the Figma Chrome extension, or asking the Figma agent to build it from a prompt or template.
What makes it different: Code and design stay connected in both directions. You can duplicate code layers like frames to compare options side by side, and moving or resizing elements updates the code. You can also extract a code layer’s current state, a single screen or a whole flow, back into editable Figma layers, then sync your edits to the code with one click. When you’re done, you can push the changes to your repository. Teammates can comment on and prompt the same layer in a shared file.
Key features:
Create code layers from a frame, a GitHub repo, a webpage or a prompt
Compare coded design options side by side
Prompt the agent for new versions while the original stays intact
Convert code back into editable layers, and sync edits back to the code
Edit in a code editor, then push to your repository
Figma MCP can create code layers from AI tools
Who it’s for: Designers, developers and product teams who want to explore and review real, working UI together instead of handing static files back and forth.
Figma blog post, and see the Config India recap for rollout details.
Putting working code next to the design on the same canvas is the part I’ve wanted for years. The back-and-forth between a Figma frame and a half-finished prototype in a separate repo is where most of our design decisions get lost. Curious how well “turn a code layer’s states back into editable layers” holds up on a real, messy component, like a form with validation states. If that works, this changes how we build. Congrats on the launch!