---
title: "Figma MCP — Code to Canvas"
aliases: [code-to-canvas, figma-generate-design, live-ui-to-figma]
tags: [figma, mcp, claude-code, design, ui-capture]
sources: [raw/Code to canvas  Developer Docs.md]
created: 2026-05-15
updated: 2026-05-15
---

# Figma MCP — Code to Canvas

Convert live, running UI from your browser into editable Figma frames — single screens or entire multi-step flows in one session.

> **Note:** "Code to canvas" is distinct from "Write to canvas" (which lets agents write directly to an open Figma canvas). This feature captures rendered UI from a browser.

## What It Does

- Renders your live app in a browser, then sends the DOM/visual output to Figma as editable design layers
- Supports capturing full screens or individual elements
- Useful for capturing entire user flows (login → onboarding → dashboard) side by side
- Structural issues (unclear empty states, abrupt permission walls, steps to merge) become visible on the canvas

## The Roundtrip Workflow

```
Code → Browser render → Figma canvas (align, annotate, refine) → back to code
```

1. Run `generate_figma_design` via Figma MCP
2. Client starts a local server, injects a capture script, opens a browser
3. Use the in-browser toolbar: **Entire screen** or **Select element**
4. Open the resulting Figma file — frames are standard design layers
5. Review on canvas with team, make annotations/decisions
6. Prompt Claude Code with a Figma frame URL → implement the UI changes

## MCP Tool

**`generate_figma_design`** — the underlying Figma MCP tool.

See [[wiki/claude-code/figma-mcp-setup|figma-mcp-setup]] for how to install the remote Figma MCP server first.

## Supported Clients

- Claude Code
- Cursor
- VS Code
- Warp
- Augment, Codex (OpenAI), Factory, Firebender

## Destinations

| Target | How to prompt |
|--------|--------------|
| New Figma file | "…capture the UI in a new Figma file." |
| Existing Figma file | "…capture the UI in `<Figma file URL>`." |
| Clipboard | "…capture the UI to my clipboard." — paste into any file |

- **Any seat** — can create/edit files in your drafts
- **Full seat + edit permission** — required to edit existing files outside your drafts

## Step-by-Step

1. Set up the remote Figma MCP server (see [[wiki/claude-code/figma-mcp-setup|figma-mcp-setup]])
2. Prompt: "Start a local server for my app and capture the UI in a new Figma file."
3. Client injects script, browser opens; initial capture happens automatically
4. In browser toolbar: click **Entire screen** or **Select element** for additional captures
5. Click **Open file** (or paste from clipboard)

## Tips

- If local server is already running, omit "Start a local server…" from the prompt
- Multi-page capture: first prompt with file URL, then "Also capture the checkout page" — client infers the same file
- For live web apps, prompt the client to use Playwright to inject the capture script
- For local UI, Playwright injection is not needed

## Key Takeaways

- **Code-to-canvas closes the dev↔design loop** — no more screenshots, no "run it locally"
- **`generate_figma_design`** is the MCP tool; it requires the remote Figma MCP server
- **Multi-step flow capture** in one session: each state becomes a side-by-side frame
- **Standard Figma layers** — fully editable, supports annotations and design decisions
- **Roundtrip**: UI from code → canvas review → code implementation via Figma frame URL
- For live/deployed apps, use Playwright to inject the capture script

## Related

- [[wiki/claude-code/figma-mcp-setup|Figma MCP Setup]] — install the remote server first
- [[wiki/claude-code/figma-mcp-code-connect|Code Connect + Figma MCP]] — link design components to code
- [[wiki/claude-code/figma-mcp-custom-rules|Figma MCP Custom Rules]] — CLAUDE.md rules for design-to-code flow

---

*Source: raw/Code to canvas  Developer Docs.md*
