Code to canvas

With the Figma MCP server, you can capture live UI from your browser and turn it into editable Figma design layers. Capture a single screen or an entire flow in one session.

UI built in code often grows organically, and sharing it usually means sending screenshots or asking someone to run a build. Capturing it to Figma instead lets you see every step of a multi-step flow side by side, so issues like abrupt permission prompts, unclear empty states, or steps that should be combined are easier to spot.

Captured frames are standard Figma layers. Your team can organize, duplicate, rearrange, edit copy, and annotate decisions on the canvas. When you're done, share a link to the updated frame with your agent so it can implement the changes in code. This completes the round trip: code to canvas for review, then back to code.

Code to canvas is one of several ways to bring coded screens into Figma. For other methods, like the Figma Chrome extension, see Turn coded screens into editable design layers.

Supported clients

Code to canvas works with these MCP clients:

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

Capture your UI

Your agent uses the generate_figma_design tool to capture UI to one of these destinations:

• A new Figma Design file, created in your drafts
• An existing Figma Design file. Requires edit access to the file.
• Your clipboard, so you can paste the layers into any file

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

2. Prompt your agent to capture your UI. 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 link isn't to a Figma Design file, your agent creates 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 agent starts the server, adds the script that code to canvas needs, and opens a browser window. It may ask which Figma team or organization to use. The first capture happens automatically when the window opens.

3. Use the toolbar in the browser window to capture more of your UI, including different states:
   • Click Entire screen to capture the full current view.
   • Click Select element to capture a specific element.

4. When you're done:

   • If you captured to a Figma Design file, click Open file.
   • If you captured to your clipboard, paste the layers into a Figma file.

   You can also ask your agent to finish the capture for you.

Tips

• Skip the server step if it's already running. If a local server is already running, you can leave out "Start a local server for my app" from your prompt. Your agent can often work out that it needs a server, but it helps to say so the first time.
• Keep capturing to the same file. In the same conversation, your agent usually assumes you want to keep using the same file, or asks to confirm. For example, after "Capture the login page to <Figma file URL>," you can say "Capture checkout to the same file" or just "Also capture the account screen."
• Pick from recent files. When you capture to an existing file, your agent can suggest files you've recently created or edited.
• Capture a live site. To capture a live web app or site instead of a local one, ask your agent to use a tool like Playwright to add the required script.

For more tips on getting accurate captures, see Tips for better captures.

Troubleshooting

The generate_figma_design or use_figma tool isn't available

These tools are only available on the remote server, not the desktop server. If your client doesn't list them:

1. Check that the remote server is set up. Look in your client's MCP configuration for https://mcp.figma.com/mcp. If it's missing, set up the remote server.

2. Check whether the desktop server is also set up. This is the most common cause. If you set up the desktop server before, it's still in your client's configuration. The Figma desktop app runs it at http://127.0.0.1:3845/mcp whenever the app is open. Because both servers have similar tool names, your client may use the desktop server and never load the remote-only tools.

   In Claude Code, list your servers:

   claude mcp list

   If there's an entry for http://127.0.0.1:3845/mcp next to your remote server, remove it:

   claude mcp remove figma-desktop

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

3. Restart your client. Clients load their tool list when they start. Restart after changing the configuration, then check that the tools are available.

Related articles

• Workflow lab: Code to canvas
• Guide to the Figma MCP server