Claude + Figma MCP: Design-to-Code That Actually Works
Figma's official MCP server gives Claude structured design context, but good production code still depends on narrow selections, repository rules, and visual review.
Claude Figma MCP works today through Figma's official remote MCP server, which gives Claude Code structured access to frames, variables, components, screenshots, and Code Connect mappings. It is useful for implementation, not automatic production code: the best results come from small design selections, explicit repository constraints, and a human visual check.
Table of contents
- The short answer
- How Claude Figma MCP works today
- Step-by-step setup
- Claude Code vs other MCP clients
- The catch most guides skip
- What to connect first
- A workflow that produces reviewable code
The short answer
Claude plus Figma is now a first-party MCP workflow, not a screenshot workaround or unofficial package. Use Figma's remote server with Claude Code, pass a link to one frame or layer, and implement it inside an existing repository.
Figma recommends the hosted endpoint because it has the broadest feature set and needs no desktop app. The desktop server suits selection-based prompting or local-process requirements, but it needs Figma Desktop, Dev Mode, and an eligible paid seat. Figma's official server guide confirms that remote access is available across plans while desktop access requires a Dev or Full seat on a paid plan.
Our view at MCP Directory is blunt: use remote first.
How Claude Figma MCP works today
The server does not hand Claude a finished component. It translates a Figma node into structured context, then Claude combines that with the code, dependencies, and instructions in your repository.
With the remote server, copy a frame or layer URL into the prompt. Claude extracts its node ID; it does not browse the page like a person. Figma can return layout information, component data, variables, a screenshot, and Code Connect mappings. The remote-server documentation describes this link-based mechanism and OAuth sign-in.
That beats screenshot-only prompting because an image cannot reliably express Auto Layout rules, token names, variants, or component identity. MCP supplies those signals; Claude still makes the engineering decisions. If you are new to the client, start with the Claude MCP client page.
Step-by-step setup
The safest setup is the official Figma plugin for Claude Code. It installs server settings and Figma workflow skills together, avoiding a copied configuration block that may age badly.
- Install Claude Code and confirm that the
claudecommand runs in your terminal. - Run
claude plugin install figma@claude-plugins-official. This is the exact command in Figma's Claude Code setup guide. - Restart Claude Code if it was open. Enter
/plugin, switch to Installed, choosefigma, and start authorization. - Sign in to Figma, inspect the requested access, and select Allow access. Return to Claude Code and check
/plugin; Figma should show as connected. - In Figma, right-click a focused frame or layer and choose Copy link to selection. Paste that URL into Claude Code with the target framework, repository path, reuse requirements, and acceptance criteria.
- Ask for a plan before edits. Review the proposed files, allow only necessary tool calls, run the project's tests, and compare the rendered result with the frame.
A good first prompt is: "Implement the frame at this Figma URL in the existing React app. Reuse components under src/components, use existing design tokens, do not add dependencies, and report any design detail that the repository cannot represent." Adjust those paths to your project. Our MCP installation guide explains the broader client/server model.
When to use the desktop server
Use the desktop server only when you want Claude to follow the current Figma selection or your organization requires the local app. Enable Dev Mode and MCP in Figma Desktop, then run claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp.
Figma Desktop must remain open and the local server enabled. Restart Claude Code and use /mcp to verify it. Do not substitute older /sse examples: Figma's current Claude setup page specifies HTTP at /mcp.
Claude Code vs other MCP clients
Claude Code is our first choice because it can inspect and edit the repository in the same loop. Claude Desktop fits design discussion; Cursor and Windsurf fit teams already committed to those editors.
| Client | Official remote Figma path | Repository editing | Best fit | Main trade-off |
|---|---|---|---|---|
| Claude Code | Figma plugin plus OAuth | Yes, terminal-native | Existing codebases | Terminal action review |
| Claude Desktop | Settings > Connectors and remote URL | Limited versus an IDE agent | Audits and design discussion | Repo context is less direct |
| Cursor | Figma plugin via /add-plugin figma | Yes, editor-native | Cursor-based teams | Editor-specific configuration |
| Windsurf | MCP client configuration | Yes, editor-native | Cascade-based teams | Less Figma-specific setup guidance |
Figma lists Claude Code, Cursor, and Windsurf as compatible clients, but notes that the client and model—not the server—produce the final code. See its remote-versus-desktop comparison. For more editor detail, visit the Cursor directory page.
The catch most guides skip
The biggest limitation is context quality. A huge page can overwhelm useful context, while unnamed layers, detached components, arbitrary values, and missing Code Connect mappings give Claude weak signals that look authoritative.
Use progressive retrieval: start with one component, ask for metadata when the node is large, fetch context only for required children, and retain a screenshot. Figma's custom-rules guide recommends get_metadata when a response is too large or truncated, followed by narrower get_design_context calls.
Read calls are also metered. Figma currently allows View and Collab seats up to six calls per month; Dev and Full seats get higher limits that vary by plan. The account can access only files it may view or edit, according to Figma's rate-limit and access table.
Avoid whole-file prompts and one-shot "make it pixel perfect" requests. They consume context, hide assumptions, and encourage duplicated components. The trade-off is deliberate prompting for maintainable code.
What to connect first
Connect only tools that close a real gap. Our first three picks are Figma's official server, GitHub's official MCP server, and Microsoft's Playwright MCP server—in that order.
- Figma MCP: It supplies design structure, variables, screenshots, and Code Connect data. Prove one component workflow before adding anything else.
- GitHub MCP: Use the official GitHub MCP Server repository when Claude needs issue, pull-request, or remote repository context. Keep write tools off until the diff passes review.
- Playwright MCP: Use Microsoft's Playwright MCP repository to inspect the implementation in a browser and catch responsive, interaction, and accessibility failures. It verifies behavior; it does not replace tests.
Browse the best MCP servers for alternatives, but resist a crowded tool belt. Each server expands permissions, tool ambiguity, and the prompt-injection surface.
A workflow that produces reviewable code
The winning workflow is a narrow, testable loop: inspect one design unit, map it to the existing system, implement it, render it, and compare. Treat MCP output as evidence, not as a specification that overrides the repository.
- Prepare the Figma frame with named layers, components, variables, and important states.
- Give Claude the exact node link, repository constraints, and existing components to reuse.
- Request design context and a screenshot before edits; for a large node, request a structural map and work child by child.
- Review the file plan, then permit a small diff. Reject new dependencies unless truly required.
- Run formatting, type checks, tests, and browser comparisons at relevant breakpoints. Log mismatches as follow-up tasks.
Code Connect improves this process because mapped Figma instances can include real component references rather than generic substitutes. Figma's Code Connect documentation explains how mappings appear in server context. Still review prop choices and variant logic.
Claude Figma MCP is worth adopting as a disciplined context channel. Use the official remote server, keep prompts scoped, connect design nodes to real components, and verify the rendered UI. That is slower than a one-shot demo and much faster than maintaining duplicated code.