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
• Capture code from your webpage: Use the Figma extension to copy code and paste it onto the canvas as 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.

Turn your webpage into a code layer

Use the Figma Chrome extension to copy code from your webpage and paste it into a Figma file as a code layer. Download the Figma extension from the Chrome web store.

1. Navigate to your webpage, then click in your Chrome toolbar.
2. In the toolbar that appears, click Capture code.
3. Once the code is copied to your clipboard, open a Figma Design file and paste with ⌘ Command V (Mac) or Control V (Windows/Linux).

The capture is placed on the canvas as a code layer.

Connect your code source

If you’re already coding in a third-party environment and don’t want to hop back and forth between tools, or you want to see explorations side-by-side in the same place, you can connect a code source so that the code layer uses your real production code.

The best way to use your own code with code layers is by cloning repositories hosted on GitHub. After connecting Figma to one or more GitHub organizations or accounts, you can select a repository to clone for your code layer. Figma stores the clone of your repository so you can make changes, utilize multiple branches so you can experiment, and then create pull requests to merge your improvements back into the original repository.

Learn how to connect your code source to code layers.

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 and 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 the 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.

Use the MCP with code layers

With the Figma MCP server, you can now move a project from your coding agent straight into a Figma Design file as a code layer. Your agent packages the project and imports it onto the canvas. From there, you can keep iterating with the Figma Make agent, pull designs from it, and share it with your team, all in the same file as your designs.

To get started, be specific in your prompt, like:

Import this project as a code later in <Figma file URL>

Imports can take 10 minutes or more, and some projects may need changes to run in a code layer.

Creating code layers requires a Full seat. The import itself doesn’t use Figma AI credits, but prompting the Figma Make agent to make changes afterward does. Learn more about the Figma MCP server tools.

Frequently asked questions