---
title: "Figma MCP Server — Setup in Claude Code"
aliases: [figma-mcp-setup, figma-claude-code-setup]
tags: [figma, mcp, claude-code, setup, design]
sources: [raw/Claude Code and Figma Set up the MCP server.md]
created: 2026-05-15
updated: 2026-05-15
---

# Figma MCP Server — Setup in Claude Code

Gives Claude Code structured access to Figma: read components/variables/layout, generate code from frames, use Code Connect, and write native content back to the canvas.

## Two Versions

| Version | When to use |
|---------|-------------|
| **Remote** (recommended) | Most users — broadest feature set |
| **Desktop** | Specific org/enterprise use cases only |

## Remote Setup (Preferred)

Install the Figma plugin (includes MCP server + Agent Skills):

```bash
claude plugin install figma@claude-plugins-official
```

Then:
1. Restart Claude Code
2. Run `/plugin` → navigate to **Installed** tab
3. Select `figma` → press Enter → authenticate via browser
4. Click **Allow access**
5. Run `/plugin` again — `figma` should show as **connected**

## Desktop Setup

Only if remote is unavailable (org/enterprise).

**In Figma desktop app:**
1. Open a Design file → switch to Dev Mode (toolbar toggle)
2. Enable MCP server in right sidebar → copy the URL

**In Claude Code terminal:**
```bash
claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp
```
Restart Claude Code, then verify with `/mcp`.

## What the MCP Server Provides

- Read: components, variables, layout data, FigJam content, Make resources
- Generate code from selected frames
- Code Connect — keeps generated code aligned with real components
- Write to canvas — create/update native Figma content
- Send live web interfaces to Figma as editable layers

## Key Takeaways

- Use the **remote** version unless you have an explicit org/enterprise reason for desktop
- Install via `claude plugin install figma@claude-plugins-official` — this is the recommended path
- After install, authenticate once via browser OAuth; stays connected across sessions
- Desktop version requires Figma desktop app + Dev Mode + manually copying the local URL
- After setup, test with `/mcp` (desktop) or `/plugin` (remote) to confirm connection

## Related Articles

- [[wiki/claude-code/mcp-integration|MCP Integration in Claude Code]]
- [[wiki/claude-code/figma-mcp-custom-rules|Figma MCP Custom Rules (CLAUDE.md)]]
- [[wiki/claude-code/figma-mcp-avoid-large-frames|Avoid Selecting Large Figma Frames]]
- [[wiki/claude-code/plugin-marketplaces|Plugin Marketplaces]]

## Sources

- `raw/Claude Code and Figma Set up the MCP server.md`
- Official: https://help.figma.com/hc/en-us/articles/39888612464151
