Skip to main content

Code to canvas

note

Note: Code to canvas is different from the Figma MCP server's write to canvas feature, which opens the canvas in Figma Design and FigJam up to agents. Learn more: Write to canvas

Using the remote Figma MCP server, you can convert live UI from your browser into editable Figma frames. Capture a single screen or an entire flow in one session.

Code-first workflows often produce UI that grows organically. Sharing it usually means screenshots or asking someone to run a build locally. The Figma MCP server brings real UI into Figma instead. You can capture the full sequence of a multi-step flow and view each step side by side. Structural issues such as abrupt permissions, unclear empty states, and steps that should be combined become easier to spot than when inspecting one route at a time.

Captured frames become standard Figma design layers. You can use the canvas to organize, duplicate, rearrange, refine copy, and annotate decisions. Reviewing the UI on the canvas helps your team align on structure and intent before committing changes back to code.

By bringing your code to the canvas, the Figma MCP server help close the loop between your designs and your codebase. After you complete reviews of your captured UI, prompt the Figma MCP server with a link to a Figma frame. Your agent can then implement the UI changes and decisions from the shared design. This completes the roundtrip: UI rendered from code → canvas for alignment → back to code for implementation.

Supported Clients​

The code to canvas tool can be used with select MCP clients:

  • Augment
  • Claude Code
  • Codex by OpenAI
  • Cursor
  • Factory
  • Firebender
  • VS Code
  • Warp
  • Xcode 27 beta

Get started​

Figma’s code to canvas tool, generate_figma_design, is a feature of the Figma MCP server. By prompting the Figma MCP server, you can capture live UI to:

  • New Figma Design files
  • Existing Figma Design files
  • Your clipboard

You can have any seat to use the code to canvas tool to create or edit files in your drafts. To edit an existing file outside your drafts, you must have a Full seat and edit permission.

To get started:

  1. Set up the remote Figma MCP server. Follow the steps for your client.

  2. Prompt your client to capture your interface. For example:

    • To a new file: “Start a local server for my app and capture the UI in a new Figma file.”
    • To an existing file: “Start a local server for my app and capture the UI in <Figma file URL>.” If the URL doesn’t correspond to a Figma Design file, your client defaults to creating a new file instead.
    • To your clipboard: “Start a local server for my app and use the Figma MCP server to capture the UI to my clipboard.”

    Your client should start the server, inject the necessary script for the code to canvas tool, and open a browser window. Your client may also ask you to select which Figma organization or team you want to use for the capture.

    The tool makes an initial capture when the browser window first opens.

  3. In the browser window, use the code to canvas toolbar to capture specific parts of the UI and different states:

    • Click Entire screen to capture the current full state of your interface
    • Click Select element to capture a specific element in the interface

  4. When you’re done capturing your UI:

    • If you’re capturing UI to a Figma Design file, click Open file.
    • If you’re capturing UI to your clipboard, paste the design layers into a Figma file of your choice.
    • You can also prompt your client to complete the process.
note

Note: If the target file has a library containing variables added, Figma matches and binds variables (color, number, and string) to compatible properties in the captured layers automatically. To use your own variables, add the library to the file before you capture. Learn more: Turn coded screens into editable design layers

Tips:

  • If you or your client have already started a local server, you can exclude the “Start a local server for my app…” portion of the example prompts. Generally, your client may infer that a local server needs to be available, but it can help to be specific the first time.

  • If you’re capturing UI multiple times in a conversation, your client will usually infer that you want to send the UI to the same file.

    For example, suppose you’re capturing the interface of a site with multiple pages. If you prompt “Capture the login page to <an existing Figma Design file URL>,” you can subsequently prompt things like “Capture checkout to the same file” or even simply, “Also capture the account screen.”

    Generally, your client will know you want to use the same Figma file, or will you ask you to confirm.

  • When you’re capturing UI to an existing file, your client can suggest recent files you’ve created or edited as options.

  • If you’re trying to capture your UI from a live web app or site, you can prompt your client to use a tool like Playwright to inject the required script. For local UI, this isn’t necessary.

Common issues​

The use_figma or generate_figma_design tool isn't available​

Both tools are provided by the remote MCP server only. The desktop server doesn't provide them. If your client doesn't list them, check the following.

1. Confirm the remote server is installed.

The remote server connects to https://mcp.figma.com/mcp. Check your client's MCP configuration for that URL. If it's missing, follow Set up the remote server.

2. Check whether the desktop server is also configured.

This is the most common cause. If you set up the desktop server previously, that entry stays in your client configuration. The Figma desktop app runs the desktop server on http://127.0.0.1:3845/mcp automatically whenever the app is open, so it connects without any action from you — and because both servers expose tools under similar names, your client may resolve Figma tool calls to the desktop server and never load the remote-only tools.

In Claude Code, list your configured servers:

claude mcp list

If you see an entry pointing at http://127.0.0.1:3845/mcp alongside your remote entry, remove it:

claude mcp remove figma-desktop

In other clients, open your MCP configuration file and remove or comment out any server whose URL is http://127.0.0.1:3845/mcp.

3. Restart your client.

Tool lists are read at startup. Restart your MCP client after changing the configuration, then confirm the tools are available.

note

You can turn the desktop server off at the source instead. In the Figma desktop app, switch to Dev Mode and disable the server in the MCP server section of the inspect panel. Keep in mind it restarts whenever the app relaunches with the server enabled, so removing the client configuration entry is the more durable fix if you don't use the desktop server.

If you use both servers deliberately, keep them under distinct server IDs — for example figma for the remote server and figma-desktop for the local one — and address the remote server explicitly when prompting.