loading
loading
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. Share Design together with code layers on the canvas Designing with code lets you see how an experience feels and behaves, from micro interactions to complete flows. But when everyone is working separately in their own coding tools, it can feel like you’re designing in isolation, making it harder to share work or compare alternatives. That’s why we introduced code layers earlier this year With code layers in Figma Design, you can explore multiple directions with code, side by side with your team. Code on the Figma canvas Read up on everything that’s launching this week. Build from your existing work When you’re exploring a new product idea, sometimes it’s helpful to start from scratch. Other times, like when you're thinking of a new feature or flow, it's more efficient to start from your existing codebase. Code layers gives you several ways to build on existing work. Import a supported, lightweight prototyping codebase from GitHub or a local folder to build on the screens and interactions you already have. When you import from GitHub, the code layer stays connected to that repository. When Figma designer Maria Gaston wanted to make a prototype she’d built in an IDE easier to review with her team, she imported the code into a code layer using the Figma MCP server. “Working in the coding tool made it hard to share work and iterate,” she says. “It was a very isolated environment. Now, everyone else who has access to this file can easily go in and play with it.” The Figma Chrome extension gives you the power to bring your live web experience onto the canvas as a code layer, so you can keep exploring changes alongside the original page. For example, at Cox Automotive, which provides software and services for car dealerships, senior product manager Lindsay Brechler brought an existing HTML prototype into code layers to align stakeholders on a new feature. Because every version stayed on the canvas, Lindsay could pick up from any one of them and keep iterating without starting from scratch. “From iteration to iteration, code layers holds every screen and interaction together very well,” Lindsay says. You can also turn a Figma design into an interactive code layer. At Rocket Money, Derek Onay, Lead Product Designer for Design Systems, uses this method to share early ideas with his team. When the team was building foundational screen components, it was important to settle interactions and accessibility early, before they affected people using the product. Derek built a concept in a code layer to drive those conversations. “With code layers, the real value is in having the ability to better communicate ideas and gain stakeholder alignment,” he says. “I can share a working prototype and meet my team where they already are, in Figma.” Beyond existing code and designs, you can bring a prototype from your coding tool onto the canvas through Figma’s MCP server Figma’s MCP server brings your design decisions into the tools where code gets written—so what gets built actually matches what was designed. Here’s what that unlocks for everyone who builds products. The TL;DR on MCP: Why context matters and how to put it to work Explore and build together Customer snapshot: Merkle Merkle, a global customer experience agency, uses code layers across its entire design and build process, from blank-canvas ideation to iterating on existing features already built in code. The impact: → 30% faster iteration and feature development. → 50% less documentation, such as interaction specs on tickets. When you’re working with coding agents in an IDE, it’s easy to latch onto your first idea before you’ve considered the alternatives. With code layers, multiple versions of a prototype can sit on the canvas at the same time: You and your team can duplicate a prototype, try a different approach, and compare both versions without switching between them. Miguel Wermuth, a product designer at Dell Technologies, works on the customer account experience for both enterprise customers and dell.com shoppers across mobile, tablet, and desktop. He uses code layers to bring conversational AI experiences, where a stakeholder can type a question and the prototype responds with the right screen, onto the canvas. Once a flow is approved by fellow designers, Miguel builds it out in code layers to get sign-off from business stakeholders, who find a working prototype easier to follow than a series of static screens. To compare versions, he duplicates code layers side by side on the canvas. “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.” Code layers tip Mirror a code layer in the Figma mobile app to review it on the go. But it's not just about evaluating one direction; code layers allows you to zoom out and look at a product experience holistically. As Matt Davey, Chief Experience Officer at 1Password, puts it: “The real superpower of Figma has always been the canvas. It’s like when we used to print out all the pages of a website and stick them on a whiteboard. Being able to look at these UI elements together is incredibly valuable.” Refine without leaving code behind Customer snapshot: Superside You can also refine a code layer’s interactions by prompting the Figma agent. At Superside, motion design lead Leonardo Rica used prompts to develop a credit card wallet code layer where users can scroll through cards, tap one to bring it forward, and flip it over. When cards were briefly stacking in the wrong order, Leonardo described the cause in a single, precise prompt, and the Figma agent fixed it “like magic.” As you refine an idea, code layers lets you make design adjustments and apply them to the working prototype. For visual changes you’d rather make directly, Extract designs turns a screen or flow from a code layer into editable Figma layers. At Checkout.com, Senior Product Designer Kris Murphy, works on products that businesses integrate into their own customer experiences. When a prospective client wanted to see the technology in action, Kris built a demo in code layers. “Code layers helped me build the demo about 50% faster, and that’s with a tool I’m not entirely familiar with yet,” Kris says. Before sharing the demo with a 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 to catch and fix anything that needed to be reworked. 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,” he says. “It’s helped me ideate and deliver at speed.” Code layers tip You can also merge ideas from different versions of the prototype. If the team likes the layout of one and the interactions in another, they can ask the Figma agent to combine them into a new version to test. Other editing options include commenting directly on a prototype, annotating a prototype’s frames to show the agent where a change is needed, or inspecting and editing the code directly. And the newly updated fullscreen experience allows you to work with multiple threads with the agent for different parts of the work. Once you’re ready to share your changes, you can push the updated code to a branch so teammates can continue to build off the prototype. Creating a pull request lets your team review those changes before merging them into the shared project. Code layers is rolling out in open beta starting today, and will use AI credits. On paid plans, creating and editing within code layers is free through November 4, 2026. Sean Blanton is a product designer at Figma, where he builds agentic tools at the intersection of design and code. Previously, he worked at DoorDash and Meta.
document fetched 2026-10-24 10:05 · canonical https://figma.com/blog/design-together-with-code-layers