Code Layers Enters Open Beta: Add Code to the Figma Canvas

Figma has launched Code Layers in open beta: teams can add code to the canvas and build working prototypes alongside their designs. As the Figma Blog reported in an October 24, 2026 article, six teams are already using the tool to test interactions and align on decisions. It’s available to try in open beta, but teams need to account for AI credit usage when planning their work.

From Static Screens to Working Versions

Code Layers can start from Figma designs, a product’s code components, or an existing HTML prototype. The Figma agent helps create a code layer and update it in response to team requests. The layers stay on the canvas, so teams can review versions side by side instead of only one at a time.

At Superside, the starting point was a set of static screens for a card wallet. With the agent’s help, Leonardo Rica added scrolling through the card stack, selecting a card, and flipping it to see its details. He worked in stages: first getting the scrolling right, then adding the other actions. He gave the agent screenshots and precise values for positioning, dimensions, and spring animation settings. That let the team test an interaction that’s hard to judge from still frames.

At Dell, code layers draw on React components that developers already use in the product: the design system team made them available in Figma. Designer Miguel Vermut shows stakeholders a working flow where they can enter a question and see the prototype respond with a relevant screen. After aligning on the flow with designers, he develops it further for discussion with other project participants. Miguel keeps alternatives side by side by duplicating code layers.

Faster Iteration and Checking the Details

At Cox Automotive, senior product manager Lindsey Brechler uploaded a large HTML prototype and used the agent to explore four versions of tiering for a new dealer feature. She says 19 iterations took about an hour of hands-on keyboard time, with the agent doing most of the processing. Compared with building it herself in Figma as someone without a design background, she estimated the time savings at around 90%. Brechler then exported a complex HTML file for the company’s internal site. That’s her assessment of one experiment, not a promise that every user will work at the same speed.

Rocket Money uses Code Layers to discuss component behavior earlier and check it against accessibility requirements. Derek Oney asked the agent to rebuild an existing design in code, specifying the exact names of design system components. A few minutes and two follow-up prompts later, he showed the concept to project stakeholders. The working example helped bring up points that are difficult to explain through a series of static screens.

Merkle uses the tool at different stages, from exploring ideas to refining features already implemented in code. According to the company, iterations and feature development have become 30% faster thanks to fewer handoffs and less waiting between specialists. Documentation, including descriptions of interactions in tasks, takes up to 50% less time. Those figures reflect Merkle’s experience.

Checkout.com designer Chris Murphy built a prototype to demonstrate the technology to a potential client. To match the colors, fonts, and visual style, he gave the agent screenshots of the client’s app. Before the presentation, Murphy brought the screens out of the code layer onto the canvas, checked them side by side, and sent fixes back to the layer. That let him assess the screens together rather than stepping through the entire prototype one screen at a time.

What This Means for Teams and Businesses

For a website owner or marketer, a working flow can make discussions more concrete: project stakeholders can see not just the sequence of screens, but how the interface responds to actions. Designers and developers can benefit from checking behavior alongside the design, especially when the prototype draws on components already used in the product. A related question is how to give the agent the rules of a design system; an article about the DESIGN.md format describes another approach.

Code Layers is still in open beta and will use AI credits. On paid plans, creating and editing code layers is free through November 4, 2026. Teams planning to try the tool should keep that deadline in mind when choosing a task for their experiment.

My Take: Start With One Flow

I like the chance to move a discussion about a flow from words to action: let someone click, scroll, and type, then see where their expectations diverge from what the team had in mind. I’d start not by moving an entire design over, but with one short interaction that the team hasn’t agreed on. Then I’d build a simple version in the browser: it’s useful for a designer to encounter the real constraints of their own solution.

But a working prototype doesn’t mean the flow is right for its audience. Generating alternatives can be inspiring, but without an understanding of users, it becomes an attractive accident. Motion is much the same: a purposeful transition helps people understand the interface, while unnecessary animation distracts from the task.

Sources

Where the news comes from. The text is a retelling in the author’s own words; the facts come from the source, the opinion is the author’s.

1. 6 ways teams are experimenting with code layers www.figma.com

About the author

Bella V. Vashadze

UX/UI designer

I design websites and interfaces in Tbilisi, and especially love the moment when a clear user journey emerges from a chaotic brief. I’m currently testing prototypes with lighter animations.

All posts by the author