6 ways teams are experimenting with code layers

retained text

6 ways teams are experimenting with code layers
Now that code layers is in open beta, you can bring code to the canvas. Here’s how six teams are using it to experiment, get stakeholders aligned, and move faster.
Share 6 ways teams are experimenting with code layers
When we brought code to the canvas Today, code layers moves into open beta. Now teams can explore and build prototypes backed by code on the canvas.
Design together with code layers on the canvas
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 Here’s how teams at Uber, Granola, and Atlassian support high-quality, fast-moving work with the Figma agent, now generally available. 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.
3 ways product designers use the Figma agent for craft, speed, and creative expression
Introducing Figma Motion: Your canvas now has a timeline
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 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.
How to lighten design system upkeep with the Figma agent
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.”
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 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.
How to put your design system to work with the Figma agent
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.”
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.
Checkout.com: Polish working code through design edits
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 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.
Camille is a customer marketing manager at Figma, where she leads programs that celebrate how teams create with Figma. Her curatorial work has been featured in Juxtapoz, Art Ltd., and VICE.

document fetched 2026-10-24 15:23 · canonical https://figma.com/blog/6-ways-teams-are-experimenting-with-code-layers