Figma 代码层功能开放测试：支持在画布上通过智能体协作开发原型

Welcome to Workflow Lab, where we present a sample workflow

Workflow lab: Staying in the flow with Figma’s agent

Knowing what work to hand to an agent is a skill of its own. This workflow shows how a designer shapes a new temporary-access feature while the Figma agent handles the library updates, crit feedback, and a first draft of a design system spec.

using Figma products and tools.

Working in separate vibe coding tools can make exploration feel like a solo exercise, and we’ve heard from designers that they want room to build visually, compare alternatives, and work through ideas with their teams.

Code layers

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.

facilitates that multiplayer workflow, allowing teams to riff on interactive, code-based prototypes directly on the Figma canvas. Here, we explore how code layers and 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.

support that shared process, from comparing and editing prototypes to combining teammates’ ideas.

The problem

In this example, we’re following a designer as they add a new button to a fictional marketplace app called Pickup. The button allows users to select their delivery address in Pickup’s map view, which already exists in the app. The designer could explore different versions in a separate coding tool and send the team links to try them out. But exploring different options in different places means that comparing details and building on a teammate’s ideas takes more back-and-forth. To better collaborate with their team, they bring the app’s code onto the Figma canvas, where they can try alternatives side by side, refine the design, and combine elements from different teammates’ explorations into one working prototype.

Exploring directions on the canvas

The designer starts by bringing the map view’s code onto the Figma canvas as a code layer. This allows them to add and test the delivery feature on the app’s existing map screen.

There are several ways to create a code layer:

• Use the Figma Chrome extension to capture code from your webpage and paste it onto the canvas.
• Select an existing design frame and prompt the Figma agent to turn it into an interactive code layer.
• Create an empty code layer and prompt the agent to build something from scratch.
• Clone a connected GitHub repository.
• Upload a folder of code files from your computer.
• Ask an external coding agent to import a project onto the Figma canvas through MCP.
• Create an empty code layer and prompt the agent to build something from scratch, using a description or a PRD as a starting point.

Starting from a PRD?

If your PRD lives in Notion, use the Notion connector to share it with the Figma agent, then ask the agent to build a code layer based on those requirements.

For this project, the designer chooses Clone repository in the agent panel, selects Pickup from their connected GitHub account, keeps the main branch selected, and clicks Clone to load the app’s existing code into a code layer.

With the code layer on the canvas, the designer uses the Figma agent to start exploring multiple directions at once. They start by selecting the code layer and writing a prompt:

Make three variations of this and add a new delivery button to the map page. When clicked, the user can choose their address. The first one should be an omnisearch address field, but surprise me with the other two.

The Figma agent generates three layers on the canvas, each with a slightly different direction:

• Option 1: Address search, an omnisearch field that lets users search for their delivery address
• Option 2: Map-based selection, which allows users to choose their delivery location by moving around a map
• Option 3: Address shortcuts, which prompt users to choose a saved address or use their current location

The designer selects each code layer and clicks through their interactive versions side by side. They can see how each option handles the same task, in the same shared space, without needing to switch between prototypes that live in different tools. Teammates can also jump in to try the options and leave comments on the canvas. To explore their own variation, they can select a code layer and ask the Figma agent to create a new version with the changes they have in mind.

Editing in both code and design

After some exploration, the designer decides they’re happy with the omnisearch option and wants to keep riffing on the details. So, they duplicate the layer on the Figma canvas by pressing Option and dragging the code layer to create a copy beside the original (Alt-drag on a PC). This creates a new code layer the designer can play around with, while keeping the first option intact. And, because it sits right next to the original code layer, they can easily compare and contrast any changes they make.

The designer wants to refine the details in a full-screen format, so they click the Open code editor button on the code layer. This view offers an agent chat panel on the left, the preview of the code layer in the center of the screen, and the ability to look at the underlying code by clicking Files.

As they work through the details, the designer notices that the heading on the banner image could use some work. They could prompt the agent to make the change, or edit the individual element manually. Because they already have a clear idea of the tweak they want to make, they choose the latter. In the full-screen view, the designer clicks Edit, selects the heading in the preview, and increases its font size using the properties panel. They then click Apply in the agent chat, which updates the code behind the duplicate code layer while leaving the original unchanged. To compare the change with the original, the designer can return to the canvas and preview the two code layers side by side.

Next, the designer can continue editing the prototype’s individual elements using familiar Figma tools. They return to the canvas, select the code layer, and click Extract designs. They can extract the current state—the whole page as it currently appears—or select a specific element, like a product card or delivery button. Extract designs turns the elements into editable Figma design layers, so they can experiment with layout and styling using the tools the designer already knows.

With the extracted design layers on the canvas, the designer can experiment with more detailed edits. They add more space around the Delivery options label to make the button feel less cramped.

Under Extract designs the designer can choose Record flow to capture screens as they click through the working app. When they click Stop, Figma places those screens on the canvas as separate, editable design frames in sequence. With the screens laid out together, they can review the flow and make changes across it.

With fully editable design layers on the canvas, the designer can use Figma’s design tools to try different ideas, move components, adjust typography, or tweak other details across the flow. Now that they can see the full flow laid out, the designer notices the Delivery options button opens directly to an address entry panel. They change the button label to “Choose delivery address” so users know what to expect before clicking.

Once they’re happy with the changes, the designer clicks Update code layer to send the edits from the extracted design layers back to the working prototype. With those changes applied and a few more explorations on the canvas, the designer is ready to share the work with the team so they can keep refining the flow together.

Merging ideas together

Next, the designer wants to bring their ideas together with the team’s. Elsewhere on the canvas, another designer has been using code layers to make the map easier to browse when many items appear close together. They have explored a few options, like placing a number on the map to show how many items are in an area, or displaying those items together in a grid. They’ve also left notes beside some of the explorations to explain their thinking.

The designer likes their teammate’s grid view, which arranges nearby items in rows and columns on the map, and wants to bring it into the delivery flow they’ve been working on. They select both the grid-view code layer and the delivery exploration, then asks the agent to combine them with a prompt: Create a new code layer combining the grid clustering from the grid layer and the delivery feature from the delivery code layer.

The agent creates a new code layer combining the two explorations into a single working experience. Before sending the updated code back to the repository, the designer asks the agent to compare it with the original and document the changes in a technical spec

Introducing Specs: Markdown as a medium

We’re launching Specs, a container for your context that lives on the Figma canvas.

—a collaborative document on the canvas that outlines what implementation involves. The designer writes:

Describe the changes in the combined code layer and how they differ from the original code layer. Flag upfront any changes that have technical implementation implications that should be reviewed with a developer, such as backend work or API calls.

The path to production

The team now has a working prototype that combines the delivery feature with a clearer way to browse items on the map, plus a technical spec describing the changes. A developer can review the prototype and spec to identify what still needs to be built and tested before the feature reaches users.

The updated code can then go back to the team’s branch or into a pull request for review and testing before release. The explorations, comments, and spec remain together on the canvas, giving reviewers a place to revisit the options and understand how the team arrived at this direction.

The designer’s address selection flow and their teammate’s map explorations started separately. Code layers gave them a shared place to try both, refine the details, and bring their work together before committing to an implementation.

Code layers is now in open beta for 100% of users. Learn more about using code layers and the Figma agent.