Figma 推出 code layers 功能并进入开放测试

When we brought code to the canvas

Design together with code layers on the canvas

Today, code layers moves into open beta. Now teams can explore and build prototypes backed by code on the canvas.

, we were excited to see how teams would build visually, shape ideas together, and push the bounds of what’s possible. Many of them are already using code layers to explore code-backed ideas on the canvas and move between design and code faster. Whether you’re testing a micro interaction or thinking through a complete flow, teams from Dell to Cox Automotive offer a place to start.

Superside: Build complex interactions from static designs

Superside is a creative partner for global brands, and Leonardo Rica, Motion Design Lead, wanted to explore new possibilities for interactive motion using code layers. As a test project, Leonardo built a concept for an interactive credit card wallet that allows users to scroll through a stack of cards, tap one to bring it forward, and flip it over to see its details. Leonardo designed the static frames in Figma, asked the Figma agent

3 ways product designers use the Figma agent for craft, speed, and creative expression

Here’s how teams at Uber, Granola, and Atlassian support high-quality, fast-moving work with the Figma agent, now generally available.

to turn the frames into a code layer, then added motion

Introducing Figma Motion: Your canvas now has a timeline

Motion now lives on the canvas—in the same file as your components, your variables, and your team—so your designs can come to life from day one.

to the code layer through prompts. He included reference screenshots and exact values for each card’s position, size, and spring motion. “Code layers works best when I give it hard numbers,” Leonardo says. The result is a level of interaction that he says would be nearly impossible to build as a traditional prototype.

Instead of generating everything at once, Leonardo built in stages. “I got the scroll right first, then added the tap and flip as an addition without breaking what already worked,” he says. At one point, a card sliding back into the stack briefly showed in front of the cards that should have been on top of it. Leonardo described the cause in a single, precise prompt, and the Figma agent fixed it “like magic.” Next, he sees code layers powering interactive animation systems for brands, from scroll and tap behaviors to product UI moments, that clients can experience before anything goes to development.

Leonardo’s prompting tips

→ Give code layers hard numbers: exact position, size, and spring values

→ Include reference screenshots

→ Build in stages. Get the scroll right first, then layer on tap and flip.

→ When something breaks, describe the cause in one precise prompt.

Dell: Compare working alternatives side by side

Miguel Wermuth, Product Designer at Dell, works on the customer account experience for both enterprise customers and dell.com shoppers across mobile, tablet, and desktop. Since Dell’s design systems team

How to lighten design system upkeep with the Figma agent

Figma’s agent can take on repetitive work across your design system, from maintaining your library to automating how designs adhere to it. Here, we share a few ways to put the Figma agent to work.

made its coded React components available in Figma, Miguel’s code layers are built from the same components the developers use. That gives teammates a more faithful picture of how a proposed design would look and behave in the shipped product. Miguel uses code layers to bring conversational AI experiences onto the canvas: a stakeholder can ask a question and the prototype responds with the right screen. “The fact that a stakeholder can actually type something into a text field unlocks a next level of prototyping that we didn’t have before,” he says.

Once fellow designers approve a flow, Miguel builds it out in code layers to get sign-off from cross-functional partners, who find a working prototype easier to follow than a series of static screens. As edits, he duplicates code layers to keep versions side by side, which makes it easier to choose between alternatives than switching through version history. “It’s like you’re looking at a wall, and you look at A and you look at B,” Miguel says. The working prototype also makes an impression in review cycles: “When I show it to product managers and business stakeholders, we get that wow factor. It’s extremely functional.”

With code layers, I can work with code while designing on the canvas. It’s really powerful to have more back and forth between design and code.

Cox Automotive: Prototype at 10x speed

Cox Automotive, part of Cox Enterprises, makes VinSolutions, a CRM that helps car dealerships manage customer relationships. Lindsay Brechler, Senior Product Manager, brings AI into those workflows, including with Virtual Contact Assistant, an agent the team built that can email and text customers on the dealer’s behalf. To align stakeholders on four proposed tiers of a new feature for dealers, Lindsay brought a large HTML prototype into code layers and refined it with the Figma agent. “I’m not a designer, I’m a product manager,” she says. “The agent did the editing, so I could focus on the concepts behind each tier.”

Because every version stayed on the canvas, Lindsay could pick up from any one of them and keep iterating without starting from scratch. “I went through 19 versions with only about an hour of hands-on-keyboard time, since the agent did most of the processing,” she says. “Compared with building it myself in Figma as a non-designer, that’s at least 10 times more efficient, or about 90% time saved.” When the prototyping was done, Lindsay downloaded a single, complex HTML file to share on Cox Automotive’s internal site. “From iteration to iteration, code layers holds every screen and interaction together very well,” she says. The clickable prototype shows what a long product requirements document can’t, and it keeps design, engineering, and product aligned as they shape the feature together.

Rocket Money: Settle the details early

Rocket Money, an operating subsidiary of Rocket, LLP, helps people take control of their personal finances. Derek Onay, Lead Product Designer, Design Systems, uses code layers to share early ideas with the team as working prototypes. Design systems

How to put your design system to work with the Figma agent

Your design system can help the Figma agent understand the principles and guidelines that define your product. Here’s how to make that context useful to the agent.

live in the details, from how components look and behave to how they come together across a product. When the team was building foundational screen components, it was important to settle interaction details and check against accessibility standards early, before they affected people using the product. Derek built a concept in code layers to drive those conversations. “Discussing interaction patterns is the largest unlock for me, because those are the things that are hard to communicate with static frames,” he says.

Derek prompted the Figma agent to rebuild an existing design in code using the team’s exact design system component names. After a couple of minutes and two cleanup prompts, he shared it with stakeholders to decide whether the concept was worth pursuing. “Code layers is a big plus for alignment and prototyping,” Derek says. “Instead of trying to describe an interaction pattern, I can simply share a link to a code layer and talk it through with my team.”

With code layers, the real value is in having the ability to better communicate ideas and gain stakeholder alignment. I can share a working prototype and meet my team where they already are, in Figma.

Merkle: Reduce handoffs between design and development

The impact of code layers for Merkle:

30% faster iteration and feature development

Up to 50% less time creating documentation, like interaction specs on tickets

Merkle, a global consultancy, uses code layers across its entire design and build process, from blank-canvas ideation to iterating on features already built in code. As a result, iteration and feature development are 30% faster thanks to fewer handoffs and less waiting on designer or developer availability. Teams also spend up to 50% less time creating documentation, such as interaction specs on tickets. “Code layers is dramatically improving the ability to communicate ideas in the best way possible,” says Dave Calleja, VP Global Lead of Experience Design. “It’s giving teams more options, not fewer, to explore, evolve, and collaborate in ways not previously feasible without significant overhead.”

More than anything, code layers represents a shift from handoffs to hand-in-hand collaboration, so Merkle and its clients can work faster while pushing the work further. “The power of Figma’s code layers is removing the perceived decision between code-based and canvas-based tools, while providing the full power of both,” Dave says.

Putting code and canvas side by side means our teams can explore and deliver distinctive, creative experiences grounded in a shared material.

Checkout.com is a global payments platform, and Kris Murphy, Senior Product Designer, works on design payment features. When a prospective client wanted to see the technology in action, Kris built a demo in code layers and shared screenshots of the client’s app so the Figma agent could match its colors, fonts, and design patterns. “Code layers helped me ideate and deliver at speed,” he says.

Before sharing the demo with the client, Kris wanted to make sure every screen was polished. Instead of clicking through the prototype screen by screen, he pulled every screen out of the code layer onto the Figma canvas. From there, it was easy to review them side by side and catch and fix anything that needed rework. Kris then sent those edits back to the code layer, and the Checkout.com team could review the full flow of revisions made on the canvas, too.

Code layers feels like a proper bridge between design and development. It’s helped me ideate and deliver at speed.

Code layers is rolling out in open beta and will use AI credits. On paid plans, creating and editing within code layers is free through November 4, 2026.