Claude Code to Figma

What Claude Code to Figma Captures

Claude Code to Figma captures the interface running in your browser: production, staging, or localhost, the development server on your own computer. You can capture multiple screens in one session and bring them onto the canvas for comparison. Each screen becomes an editable frame that you can rearrange, duplicate, refine, and annotate. Figma's announcement covers those environments and multi-screen flows.

Think of it as laying your working app out on an editing table. The browser shows the experience as someone moves through it; Figma gives you room to examine the steps together.

MCP, short for Model Context Protocol, is the connection that lets Claude Code use Figma's tools. The capture tool is called generate_figma_design. It can send layers to a new Figma Design file, an existing Design file, or your clipboard. New captured files go into your team or organization drafts; clipboard output can be pasted onto a canvas. Figma's tool reference explains these destinations.

Connect Claude Code to Figma Once

Use the remote server for this workflow. It connects to https://mcp.figma.com/mcp and works without the Figma desktop app. Figma documents both a preferred plugin route and manual setup. Choose one. Remote server setup.

Preferred: Install Figma's Claude Code Plugin

With Claude Code already installed, run this in your terminal:

claude plugin install figma@claude-plugins-official

Then follow Figma's documented authorization flow:

1. Restart Claude Code if it was running.
2. Enter /plugin, open Installed, select figma, and begin authorization.
3. Continue to the browser and choose Allow access for your Figma account.
4. Return to /plugin and check that Figma appears connected under Installed.

The plugin includes the MCP configuration and skills, reusable instructions for common Figma workflows. If installation is blocked by your organization, Figma directs you to your Claude administrators. Figma's Claude Code setup guide.

Manual: Make the Connection Available Across Projects

For a manual setup you can reuse across projects, Figma documents this exact command:

claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp

Start a fresh Claude Code session, enter /mcp, select figma, choose Authenticate, then Allow Access. Check the connection with /mcp.

The --scope user flag makes the connection available across your projects. Figma also documents claude mcp add --transport http figma https://mcp.figma.com/mcp, which defaults to the current project. Manual setup and scope.

Which Figma Plan or Seat Do You Need?

Connecting, writing frames, and reading designs back have separate requirements. These are Figma's published rules checked on October 12, 2026:

Sources: MCP availability, capture permissions, and read limits.

Starter users and View or Collab seats have up to 20 read tool calls per month. A tool call is an individual request, so that allowance does not mean 20 complete roundtrips. The capture tool generate_figma_design is exempt from the standard MCP rate limits. Read allowance and capture exemption.

For the wider product and buying decision, see our Figma review.

Worked Example: A Three-Screen Onboarding Roundtrip

Suppose your app already runs and has three onboarding screens: Welcome, Invite teammates, and First project. Use this illustrative exercise to take the flow through capture, design review, and implementation.

Capture the Flow Into One File

Open the project in Claude Code and provide your app URL and destination. For example:

For a new file, ask Claude to create one instead. If your app is not running, ask it to start the local server. The capture workflow has the client prepare the required script and open the browser. An initial capture happens when that window opens. Figma's capture instructions.

Check that Welcome is present, then advance through the app. At Invite teammates and First project, use Entire screen in the capture toolbar. Select element is available for a smaller part. Finish with Open file. Toolbar and completion steps.

My recommendation: keep one viewport size throughout this first pass, and record which state you captured. A screen showing a validation error and the same screen with valid input deserve distinct names.

Edit the Journey in Figma

Keep a row of original captures and duplicate it for proposed changes. Name the frames clearly, then make a concrete decision on each screen:

These edits are design hypotheses. In particular, drawing a skip option does not implement the permission or routing logic behind it. Write that decision beside the approved frame and include it in the implementation brief.

Check the captured layers before treating them as design-system assets. Figma says captures arrive as plain layers, without automatic mapping to your library components or styles. It can bind compatible variables, reusable values such as colors and spacing, from the file or a library you added. Adding published libraries requires a paid plan. Capture and variable behavior.

Send the Approved Frames Back to Claude Code

For each approved frame, right-click and choose Copy link to selection. Paste those links into Claude Code with the implementation request. This is Figma's documented remote workflow. Using frame links.

A useful brief for this example would be:

Figma's get_design_context tool supplies design information to the agent. You can specify your framework and the directory containing your existing components in the prompt. With the remote server, provide frame or layer links; merely selecting something on the canvas does not supply the remote context. Design-to-code tools.

Finally, run the updated app and walk through the same journey. Compare the layout and copy, then check skip behavior, validation, and keyboard navigation. Capture the revised screens when another design review would help. This verification is your team's responsibility: Figma provides context, while the coding agent produces the implementation. What MCP and the agent each do.

Five Places This Workflow Could Pay Off

Start where several people need to make a decision about UI that already exists. These are proposed uses, ranked by how directly they could reduce repeat work.

For teams formalizing reusable design instructions, our Figma Make custom-skills design-system pack is related reading for that separate Figma Make workflow.

The Business Math: Measure the Redraw Work

The budget line to examine is design preparation and repeated implementation. If your team currently recreates built screens before reviewing them, compare that effort with capture and cleanup:

Net value per review = (old preparation and rework hours − new capture, cleanup, and rework hours) × your internal hourly cost − incremental tool costs.

Use your own recorded times. Include any extra implementation review this workflow creates. For a team already using Claude Code and the required Figma seats, existing subscriptions belong in both sides of the comparison; only additional spending changes the result. Figma separates seat access from file permissions, and its Professional subscription cost depends on seat counts and billing term. Figma's billing explanation.

My decision rule: keep the workflow if it gets your team to an approved change with less combined design and engineering effort. A faster import that leaves extensive cleanup is a weak result.

Two Focused Things You Could Build

The useful opportunity is to package the review process around the native connection. These are product hypotheses. DataForSEO's US English estimates, checked October 12, 2026, measure monthly searches, not paying customers.

Strongest: An Onboarding Review Kit

A product team or small agency could pay for a repeatable way to turn its running onboarding into an organized review and an implementation brief. The adjacent demand signals are 590 monthly searches for “claude code to figma” and 260 for “website to figma.” Those audiences may overlap.

The smallest version could be a project-specific capture checklist, Figma review template, frame-naming convention, and reusable prompts that pair approved frame links with behavioral decisions. Start with a guided service so you can observe where teams need help.

This is the strongest opportunity because the deliverable includes decisions about the customer's own flow. The catch: Figma already supplies capture, so a thin import wrapper adds little. Willingness to pay for the review kit still needs validation.

An Implementation-Brief Checker

A team repeatedly handing Figma changes to Claude Code could use a small checker that flags missing frame links, unclear destinations, and absent component guidance before implementation. “Figma to code” has an estimated 720 monthly searches, a broad signal for the underlying job rather than proven demand for this checker.

The smallest version could inspect a structured brief containing approved links, component paths, and acceptance criteria, then produce a list of unresolved questions. The catch is semantic: it can flag an omitted skip-rule description, but it cannot decide whether your users should be allowed to skip. A product owner still needs to make that call.

What the Roundtrip Does Not Solve

Treat this as a deliberate capture, edit, and implementation cycle. Figma describes MCP as a source of structured design context and a starting point for code; the agent still needs your project conventions and clear instructions. It does not guarantee finished code or automatically repair implementation problems. Figma's explanation of the boundary.

Capture quality also varies. Figma identifies heavy JavaScript animation, canvas rendering, and virtualized lists, which render only part of a long list at once, as possible trouble spots. Try capturing a specific element when the full page translates poorly. Scrambled CSS variable names can also prevent variable matching; a development-server capture may preserve readable names. Known capture limits.

I would skip the roundtrip for a trivial copy correction with no design decision to make. I would use it when comparing the whole flow is likely to change what the team builds. If the shared Figma canvas itself is the wrong fit, our Figma alternatives comparison covers that broader choice.

Your Monday move: choose a three-screen onboarding flow, capture it, agree on one improvement, and carry that decision back into the app. Complete that loop before expanding the process to the rest of the product.

If you want this review workflow built around your team's product, we can help automate it.