Figma Code Layers Bring Interactive Prototypes Into Team Review

A prototype can be easy to click through and surprisingly hard to review together. The design sits in one place, the working code in another, and the client’s notes arrive in a third. Figma’s new Code Layers beta aims to bring some of that conversation onto the shared canvas.

Opened on October 15, Code Layers lets teams place running, code-backed prototypes in Figma Design. Collaborators can try them, compare versions side by side, and leave feedback nearby. For agencies, the useful question isn’t whether a prototype looks finished. It’s whether the team can use it to make a decision, and keep a clear list of what still needs checking before production.

What changed on October 15

Figma says Code Layers moved into open beta on October 15, 2026. The feature brings interactive prototypes onto the canvas where teams already review designs. Instead of sending a coded prototype around as a separate project, a team can discuss it alongside the frames, comments, and alternate directions in the Figma file.

That changes the setting for review, not the standard for a finished product. A static screen shows how a page might look. A working prototype can show what happens when someone taps a control, moves through a flow, or hits an error state. That makes certain conversations more concrete. It doesn’t mean every state or technical detail has been checked.

Figma’s Code Layers announcement says teams can duplicate prototypes to test alternatives and leave feedback alongside them. The canvas can be a useful meeting place for the work. It still needs someone to keep the meeting notes from turning into the entire project plan.

Start with an existing idea

Teams don’t have to begin with a blank canvas. Figma lists several ways into a Code Layer: turn selected design frames into an interactive prototype, import a supported codebase from GitHub or a local folder, or capture a live webpage with Figma’s Chrome extension. There’s also an option to start with an empty Code Layer and build from there.

Those starting points suit different stages of an agency project. Design frames can help when a team wants to test how an existing concept feels in motion. A repository may be a better starting point when there’s already a coded flow to share. Capturing a live page can give the group a reference for a redesign without asking everyone to open a separate browser tab and guess which version they’re looking at.

Access is rolling out, so a feature not appearing in the toolbar may simply not have arrived in that account yet. Figma’s beta and availability details say Code Layers are available across its listed plans and require edit access. Teams should check the current account and file permissions before building a review around the feature.

Compare concepts side by side

When a client asks for “one more option,” a team can duplicate a Code Layer and explore another layout or interaction on the same canvas. That gives reviewers a direct comparison instead of a memory test: Which version had the shorter route? Which menu felt clearer? Was the animation helping, or merely waving hello?

A small amount of labeling makes those comparisons easier to use. Before inviting stakeholders, the agency can give each direction a clear name, state the question it tests, and leave space to record the preferred version and the reason for choosing it.

• Name each direction: Use labels that distinguish the idea, such as “compact checkout” and “guided checkout.”
• State the question: Note what the team wants to learn, such as whether people understand the next step without extra explanation.
• Record the decision: Capture which version stakeholders prefer, what they want changed, and who will follow up.
• Keep the options distinct: Avoid changing several major details at once if the review is meant to compare one specific choice.

That last note matters when a review includes several competing edits. If one direction changes the layout, language, and interaction all at once, a stakeholder’s preference may be hard to interpret. Clear versions make it easier to carry the decision forward rather than relitigate it at the next meeting.

Gather feedback and prepare sign-off

A working flow gives clients something specific to respond to. They can try the sequence and leave comments next to the prototype, while designers and developers can discuss the behavior in the context of the page. “I don’t know where to go after this step” is easier to act on when everyone can see the step in question.

For sign-off, it helps to keep two decisions separate. Stakeholders can approve the direction shown in the prototype: the layout, the intended flow, and the interaction being proposed. That approval doesn’t settle whether the production version works for every user, device, or unusual situation.

A review file can make that distinction visible with a short production-check list. For example:

• Accessibility: Check keyboard access, focus states, readable contrast, and assistive-technology behavior.
• Edge cases: Review empty, loading, error, and repeated-action states, along with unusual input.
• Implementation: Confirm technical details, responsive behavior, data needs, and how the approved direction fits the existing product.
• Ownership: Note who will handle each open item and when it needs another review.

These checks belong with the project, but they shouldn’t be buried under a client’s approval comment. A prototype can make an idea easier to judge. It doesn’t certify production behavior or replace engineering and accessibility review. The handoff is clearer when the client decision and the remaining checks are recorded as separate things.

Use the beta window with eyes open

Figma says Code Layers will use AI credits during the open beta. On paid plans, creating and editing within Code Layers is free through November 4, 2026. After that date, Code Layer tasks will use AI credits. Figma also notes that a single prompt can involve multiple tasks, and work by the Figma agent beyond generating or editing Code Layer code may still use credits during the free period.

As of October 19, the free period has a little over two weeks left. That makes this a useful moment for teams on paid plans to test the review process: try a real concept, compare two directions, and see whether comments stay understandable once several people have weighed in. They can also note which parts of the process need a separate production check.

The beta is a place to discuss and refine ideas, not a shortcut around the checks required before a release. That distinction keeps a client’s “looks good” from quietly becoming approval of code no one has tested in the relevant conditions.

Inspire Studio provides a workspace for agencies and their clients, intended to help manage asset workflows. Visit Inspire Studio to learn more about its workspace.