June 24, 2026With code layers in Figma Design, you can explore multiple directions with code, side by side with your team.Agents have expanded who can build and what’s possible to create. But too often, the process of getting there happens alone, in separate chats, disconnected workflows, and isolated exploration.Getting started is flexible:In Figma Design add a code layer from the toolbar, create one from an existing frame, or ask the Figma agent to generate one. From there, start from a template or describe what you want to build. You can also bring in an existing codebase—import a GitHub repository or upload a local folder directly.In Make generate and edit code, then bring it onto the canvas as a code layer to explore, compare, and refine with your team.With code layers in Figma Design, interactive code becomes part of the canvas itself, making it easier for teams to explore, iterate, and shape ideas together in the same place.Entertain all your altsDesigners have always duplicated frames to try alternatives—code layers work the same way. Working experiences can live on the canvas so you can compare how options actually feel, not just how they look. Move, adjust, and resize elements and get an immediate code response. Keep iterating with prompts and the agent generates a new version while preserving the original. Since code layers exist in your shared file, teammates can jump in, leave comments, and prompt against the same layer.Turn any frame on the canvas into working code by asking the agent to build it for you. Move between your materialsCode layers make software explorable. By selecting extract designs you can make code visually understandable by converting the current state back into editable Figma layers. You decide what comes onto the canvas—a single screen, a specific state, or a full flow. From there, one click updates the code layer with your edits. So you can work fluidly between the canvas and code.Extract key flows and states from code onto the canvas as editable design layers.Refine with your judgmentWhen you want more specificity you can annotate in the code editor and ask the agent to make your desired change or click in and make the edit yourself. Once you're happy, convert it back to the code layer and push to your repo so your source reflects the changes you landed on. Now your whole team can see the update.Make changes to the code generated in the code editor.With code layers in Figma Design, the canvas becomes a shared space where design and code evolve together—a place to try things, compare them, and land on the right idea to build.Code layers are rolling out in closed beta over the next few weeks. Sign up here to request early access. Visit our help center to see a round-up of what we launched at Config, and how to get started. Find answers and inspiration on all things Figma at Figma Learn.Nikolas Klein is a product designer turned product manager. He’s been working at Figma since 2018, and has always been focused on getting more people to explore their interactive ideas together. He is now a PM on Figma Make.Create and collaborate with FigmaGet started for free