Code layers in Figma Design

A code layer is an interactive prototype backed by running code that sits directly on the canvas. With code layers in Figma Design, you can:

• Create realistic design and code explorations all in the same environment, because both code and design sit on the canvas of the same file.
• Evaluate variations of a design experience side-by-side instead of switching branches by duplicating a code layer, prompting a different direction, and compare several running versions at once.
• Preview interactive designs directly on the canvas to capture empty, loading, and error states. Update them, and push updates back to the code layer and even your codebase.
• Start from your team's codebase instead of a blank prompt. Explore, iterate, and review real, front-end prototypes without handoff or committing to engineering resources.

Get started with code layers

Code layers can be created in any Figma design file. There are a few ways to get started with code layers:

• Start from scratch: Add an empty code layer on the canvas and prompt the agent to build
• Connect a GitHub repo: Clone a connected GitHub repo to build on top of an existing frontend codebase
• Upload a local folder: Import your code files directly from your computer
• Start with designs: Select design frames on the canvas, and prompt the agent to turn them into a code layer

Create a code layer from scratch

Add an empty code layer on the canvas and prompt the agent to build. To do this:

1. Select Code from the toolbar, or press B on your keyboard.
2. Click and drag on the canvas to create the layer.
3. Open the Figma agent and type a prompt describing what you’d like to create in the code layer.

Turn a static design into a code layer

To turn a design on the canvas into an interactive code layer:

1. Select a frame on the canvas.
2. Select Code from the toolbar, or press B on your keyboard.
3. From the right sidebar, click Build selection.

You can also turn multiple designs into code layers simultaneously by selecting multiple frames and prompting the agent.

Play a code layer

To interact with the contents of a code layer, select the code layer and press Play in the top-right corner of the layer. This allows you to try out different flows and test the experience to see if changes are needed.

You can play multiple code layers on the same page at once.

Edit a code layer

Prompt the Figma agent for any changes you’d like to make to a code layer.

You can also:

• Open the code editor
• Use point and edit

Once changes are made to the code layer, you may need to click Reload code layer to see the changes.

Open code editor

The code editor allows you to view the code behind the code layer, embed comments into the prototype, and edit designs directly.

To access the code editor:

1. Select the code layer.
2. Click Open code editor in the top-right corner of the layer, or from the secondary toolbar at the bottom of the file.

To exit the code editor and return to the file, click back in the top-left corner.

Point and edit

The edit tool opens a Figma Design-style properties panel in the code editor and lets you point to elements in your functional prototype or web app. When you select an element, depending on the type of element and the way it was generated, you can modify properties such as colors, padding, margins, text styling, and more.

To use the edit tool:

1. Select the code layer and open the code editor.
2. Navigate to the Browser tab at the top of the file.
3. In the upper-right corner, click Edit near the top-right of the file.
4. In the preview, click the element that you want to modify. Drag your cursor or hold ⇧ Shift while clicking to select multiple elements.
5. Make changes using the properties panel. As you make adjustments, the changes appear above the prompt box in the agent chat.
6. In the chat, click Apply. The agent applies the changes you made to the code layer.

Extract a code layer to design

Extract designs allows you to turn the current code layer view into editable design layers on the canvas.

When you have a code layer selected, you’ll have an Extract designs option in the secondary toolbar at the bottom of the file. There are a few options for extracting designs from a code layer:

• Current state: Extracts the whole page inside the code layer as it currently looks
• Select element: Extracts a selected element on the code layer
• Record a flow: Interact with the code layer and Figma will create multiple frames to represent the sequence of screens in that flow. You can update those layers and push changes back to the main code layer.