Figma Design 推出代码图层，可在画布上共享和迭代代码

With code layers in Figma Design, you can explore multiple directions with code, side by side with your team.

Share Code on the Figma canvas

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 alts

Designers 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.

Move between your materials

Code 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.

Refine with your judgment

When 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.

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.

Read Figma CEO and Co-founder Dylan Field’s recap of Config.

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.

Related articles

Introducing Figma Motion: Your canvas now has a timelineJune 24, 2026By David HornsbyMotion 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.Inside Figma; Product updates; Figma Design; Motion; 3D design; Config; News; Figma’s design agent, now with custom tools and greater contextJune 24, 2026By Georgia Rust, Rodrigo DaviesPrompting gets you started. Custom tools, real context, and skills take the design agent further—so what ends up on the canvas actually looks like you.Inside Figma; Product updates; Figma agent; Figma Design; Config; AI; News; Connecting Figma and WeaveJune 24, 2026By Itay SchiffToday, we’re announcing new ways your Weave creative workflows can live alongside your Figma frames.Inside Figma; Product updates; Figma Weave; Config; AI; News

Create and collaborate with Figma