Figma code layers for designers: the short answer

Figma code layers are interactive prototypes backed by running code that sit directly on the Figma canvas, next to your frames. Figma moved them into open beta on 15 October 2026, announced at Config India and described in its post Design together with code layers on the canvas. You can start one by converting a design frame, cloning a GitHub repo, capturing a live web page with the Figma Chrome extension, importing a coded prototype through the Figma MCP server, or prompting the Figma agent from an empty layer.

What do Figma code layers change for designers? They remove the wall between "the design" and "the prototype that actually works". A designer can now test real state, real scrolling and real data behaviour without leaving the file or asking an engineer for a branch. The skill that matters shifts from drawing every state by hand to judging, steering and correcting a working build.

What Figma actually shipped

This section sticks to what Figma's own pages state.

The layer itself. The Figma help center article on code layers describes a code layer as an interactive prototype backed by running code. You add one with the Code tool in the toolbar (shortcut B), drag it out on the canvas, and open the Figma agent to describe what you want. Several code layers can play on one page at the same time, and you can preview them on a phone through the Figma mobile app.

Ways in. You can select one or more frames and click Build selection to convert them. You can capture a page with the Chrome extension and paste it into a design file. You can connect GitHub, clone a repo into a code layer and later open pull requests back to it. You can import a local folder, or ask your coding agent to push a project in through MCP, which the help center notes can take 10 minutes or more.

Editing. You prompt the agent for changes, or open the code editor to read and edit code directly. A point and edit mode lets you click elements in the preview and adjust colour, padding, margins and type in a properties panel, then apply the change through the chat.

Getting designs back out. Extract designs turns the current view of a code layer into editable Figma layers. You can extract the whole state, a single element, or record a flow so each screen becomes its own frame.

Availability and cost. Figma says code layers are rolling out in open beta and access may vary by account. Creating them needs a Full seat and edit access to the file. Code layers use AI credits, but on paid plans creating and editing within them is free through 4 November 2026, according to the Figma release notes. Figma has not published what usage will cost after that date.

Hype vs reality

The hype says designers no longer need developers. That is not what shipped. Code layers are framed as prototypes, and the help center warns that some projects may need changes to run inside one. A prototype that feels right is not the same as production code that is accessible, tested, secure and maintainable.

What does hold up is the speed of the question "does this actually work?". Static frames lie about loading, empty states, long names, keyboard focus and scroll behaviour. A running prototype exposes those problems early, while they are still cheap to fix. Being able to put three versions side by side on the same canvas, comment on them and duplicate one to explore your own idea is a genuine change to how design reviews run.

Verdict: treat code layers as the best place to argue about behaviour, not as a delivery pipeline. The GitHub and pull request route is promising, but it should go through normal engineering review.

Static frames vs code layers vs a separate coded prototype

The Build, Break, Extract loop

A simple way to try code layers this week, as a named routine you can repeat on any flow.

1. Build. Pick one flow that keeps going wrong in handoff, such as onboarding or a filtered list. Select the frames and use Build selection. Give the agent the rules in plain language: what happens on error, what the empty state shows, what loads first. If your team already writes Figma Specs for this flow, point the agent at the spec rather than retyping it.

2. Break. Play the layer and try to break it. Paste a very long name. Tab through it with the keyboard. Load it on a phone through the Figma mobile app. Annotate the frames where it fails and ask the agent to fix one problem at a time, so you can see what changed.

3. Extract. When the behaviour is right, use Extract designs or Record a flow to bring the working screens back into editable layers. Now your design file reflects what was proven in code, not what was guessed in a mockup. If the prototype lives in a connected repo, push a branch and let engineers review it like any other contribution.

Where it fails: large production codebases, heavy backends and anything that depends on private services are poor fits. Use a lightweight prototyping repo instead. If you need a real backend behind a marketing site, Payload in Figma Make is the closer match.

Where this takes design work

Over the next one to three years, the main design artefact moves from a picture of the product to a working slice of it. Figma's own launches this month point the same way: Specs hold the intent, the Figma agent builds, and code layers are where the team sees and judges the result. The role that grows is the design engineer: someone who can hold taste, systems and enough code literacy to know when a build is wrong.

Teams building AI products will feel this first, because AI features are mostly behaviour: streaming answers, uncertain states, approvals and undo. Those are almost impossible to review as static frames. That is a large part of why AI product development and UI/UX design services are converging.

The fear: am I falling behind if I cannot code?

Honest answer: you do not need to become a software engineer, but you do need to be comfortable inside a running prototype. Reading a component tree, spotting why a layout breaks and describing a fix precisely are now design skills. The designers at risk are the ones whose only output is pixel-perfect static screens nobody can test.

Concrete next moves: build one code layer before the free period ends on 4 November, learn the point and edit panel, and practise writing short, testable instructions for the agent. That is a week of effort, not a career change.

FAQ

What are Figma code layers?

Figma code layers are interactive, code-backed prototypes that live on the Figma canvas next to regular design frames. You can create them from a design, a GitHub repo, a captured web page, an MCP import or a prompt, then edit them with the Figma agent or the built-in code editor.

Are Figma code layers free?

Code layers use AI credits. On paid plans, creating and editing within code layers is free through 4 November 2026, according to Figma. Figma has not said publicly what the cost will be after that date.

Will Figma code layers replace front-end developers?

No. Figma positions code layers as prototypes, and its help center says some projects need changes to run in one. They speed up exploring behaviour and can open pull requests, but production code still needs engineering review, testing and accessibility work.

Are Figma code layers overhyped?

Partly. The claim that designers can now ship products alone is overhyped. The ability to test real interaction on the canvas, compare versions side by side and extract working screens back into design layers is a real and useful change.

How do I turn a Figma design into a code layer?

Select one or more frames, choose Code in the toolbar or press B, then click Build selection in the right sidebar. You can then prompt the agent to refine the result and play it on the canvas or on your phone.

Getting help with code-backed design

If your team wants to move from static handoff to working prototypes, especially for AI features, a UI/UX agency in Casablanca like DIGCY can help set up the workflow. DIGCY is a Dribbble Selected Agency that serves Casablanca, Morocco and Africa remotely and works with clients globally. Start with one flow, prove it in code, then scale what works through product design services.