# Figma

> Inspect Figma designs, components, and variables from an agent.

[Canonical HTML page](https://top-mcps.com/mcp/figma) · [server.json](https://top-mcps.com/mcp/figma.json) · [methodology](https://top-mcps.com/about/methodology)

## Install

### Claude Desktop — `claude_desktop_config.json`

Paste under mcpServers. Fully quit and reopen Claude after editing.

```json
{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "@figma/mcp"
      ],
      "env": {
        "FIGMA_ACCESS_TOKEN": "${FIGMA_ACCESS_TOKEN}"
      }
    }
  }
}
```

### Claude Code — `CLI or .mcp.json`

Run from your repo. Commit .mcp.json to share with your team.

```shell
# export FIGMA_ACCESS_TOKEN=figd_your_token
claude mcp add figma -- npx -y @figma/mcp
```

### Cursor — `.cursor/mcp.json`

Global path: ~/.cursor/mcp.json. Reload window after editing.

```json
{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "@figma/mcp"
      ],
      "env": {
        "FIGMA_ACCESS_TOKEN": "${FIGMA_ACCESS_TOKEN}"
      }
    }
  }
}
```

### VS Code — `.vscode/mcp.json`

VS Code uses the "servers" key (not "mcpServers").

```jsonc
{
  "servers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "@figma/mcp"
      ],
      "env": {
        "FIGMA_ACCESS_TOKEN": "${FIGMA_ACCESS_TOKEN}"
      }
    }
  }
}
```

### Windsurf — `~/.codeium/windsurf/mcp_config.json`

Open via Cascade → hammer icon → Configure.

```json
{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "@figma/mcp"
      ],
      "env": {
        "FIGMA_ACCESS_TOKEN": "${FIGMA_ACCESS_TOKEN}"
      }
    }
  }
}
```

### Cline — `cline_mcp_settings.json`

Open via the Cline sidebar → MCP Servers → Edit.

```json
{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "@figma/mcp"
      ],
      "env": {
        "FIGMA_ACCESS_TOKEN": "${FIGMA_ACCESS_TOKEN}"
      }
    }
  }
}
```

### Continue — `~/.continue/config.json`

Continue uses modelContextProtocolServers with a transport block.

```json
{
  "experimental": {
    "modelContextProtocolServers": [
      {
        "transport": {
          "type": "stdio",
          "command": "npx",
          "args": [
            "-y",
            "@figma/mcp"
          ],
          "env": {
            "FIGMA_ACCESS_TOKEN": "${FIGMA_ACCESS_TOKEN}"
          }
        }
      }
    ]
  }
}
```

### Codex CLI — `~/.codex/config.toml`

Codex uses TOML. Each server is a [mcp_servers.<name>] subtable.

```shell
# ~/.codex/config.toml
[mcp_servers.figma]
command = "npx"
args = [
  "-y",
  "@figma/mcp",
]
env = { FIGMA_ACCESS_TOKEN = "${FIGMA_ACCESS_TOKEN}" }
```

### Zed — `~/.config/zed/settings.json`

Zed calls them "context_servers". Settings live-reload on save.

```jsonc
{
  "context_servers": {
    "figma": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "@figma/mcp"
        ]
      },
      "env": {
        "FIGMA_ACCESS_TOKEN": "${FIGMA_ACCESS_TOKEN}"
      }
    }
  }
}
```

### ChatGPT — `ChatGPT → Settings → Connectors → Developer mode`

Enable Developer mode (paid plans) and enter these values in the UI.

```json
{
  "name": "Figma",
  "transport": "stdio",
  "command": "npx",
  "args": [
    "-y",
    "@figma/mcp"
  ],
  "env": {
    "FIGMA_ACCESS_TOKEN": "${FIGMA_ACCESS_TOKEN}"
  }
}
```

## At a glance

- **Maintainer:** Figma
- **Transport:** stdio, Streamable HTTP
- **Auth model:** API key
- **Required secrets:** FIGMA_ACCESS_TOKEN
- **Supported clients:** Claude, Cursor, Any MCP-compatible client, Figma accounts
- **License:** MIT
- **Language:** TypeScript
- **Latest version:** latest
- **Last verified:** 2026-04-19
- **Score:** 64/100 (rubric 2026-04 — see https://top-mcps.com/about/methodology)
- **Source:** https://github.com/figma/figma-mcp

## Security & scope

- **Access scope:** read-only
- **Sandbox:** Read access to Figma files the authenticated user can see, via a personal access token (or OAuth for enterprise). No write capability.
- **Gotchas:**
  - Personal access tokens are not scoped to specific files — they grant read access to every file the user can open.
  - Very large Figma files (thousands of nodes) are returned in chunks; the agent has to paginate.

## Quick answer

**What it does.** Reads a Figma file or node tree and returns structured data: nodes, styles, components, variables, and optionally screenshots for visual grounding.

**Best for:**
- Design-to-code generation
- Component implementation
- Design-token extraction
- UI-flow documentation
- Spec-accurate coding

**Not for:**
- Canvas automation
- Bulk file manipulation

## Recipes

### Audit a design system for deprecated components

```
In my Figma file "Design System v3", list every component whose description starts with `[deprecated]` or whose name ends in `(old)`. For each, return: component name, Figma page, and node id so I can jump to it.
```

_Tested with: Claude Desktop, Cursor_

## Description

The Figma MCP fetches design context — frames, components, and design tokens — directly from your files. The most common use: generating production UI code from real Figma designs with accurate spacing, colors, and variants.

## Why it matters

Design-to-code is where agents struggle most with invented CSS. Pulling ground truth from Figma turns hallucinations into accurate, copy-able implementation.

## Key features

- Node + frame inspection
- Component and variable access
- Screenshot fetch for visual grounding
- Design-token extraction
- Official Figma maintenance

## FAQ

### What does the access token need?

A personal access token with read access is enough for most workflows. Create one at figma.com/settings → Personal access tokens. For enterprise file access, use an OAuth client so the MCP can scope to specific teams.

### Does it return screenshots or just data?

Both. The default is structured node data (frames, styles, tokens) which is what code generation needs. There is also a screenshot tool that returns a PNG of a specific node — useful when the structure alone does not convey intent.

### Can it extract design tokens / variables?

Yes. Figma Variables (colors, spacing, typography) come through as named tokens the agent can map to your project's token system — Tailwind config, CSS custom properties, whatever the target uses.

### Does it support dev-mode annotations?

Yes. Measurement annotations and Dev Mode specs come through the MCP, which makes "implement this Figma node as React + Tailwind" dramatically more accurate than screenshot-only approaches.

## Changelog

- **2026-04-19** — Refreshed install snippets and fact sheet; verified for 2026.
- **2025-03-05** — Initial directory listing.