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.

Figma

Name: Figma
Author: Figma

Official

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

Score 64(?)FigmaMITVerified Apr 19, 2026Top MCPs for Documents & Content →

Install View on GitHub

Install Figma

— pick your client, copy, paste.

claude_desktop_config.jsonjson

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

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

CLI or .mcp.jsonshell

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

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

.cursor/mcp.jsonjson

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

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

.vscode/mcp.jsonjsonc

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

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

~/.codeium/windsurf/mcp_config.jsonjson

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

Open via Cascade → hammer icon → Configure.

cline_mcp_settings.jsonjson

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

Open via the Cline sidebar → MCP Servers → Edit.

~/.continue/config.jsonjson

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

Continue uses modelContextProtocolServers with a transport block.

~/.codex/config.tomlshell

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

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

~/.config/zed/settings.jsonjsonc

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

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

ChatGPT → Settings → Connectors → Developer modejson

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

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

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

Not for

Canvas automation
Bulk file manipulation

Setup recipe

1
Install
Copy the install snippet for your client from the Install section above.
2
Set required secrets
Set FIGMA_ACCESS_TOKEN in your shell environment before launching your MCP client.
3
Try a minimum working prompt
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.

Tools & permissions

Tools list pending verification. The server exposes tools over MCP; we haven’t yet parsed its capability manifest into this page. Check the GitHub repo for the authoritative list.

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.

Agent prompt pack

— copy into Claude, Cursor, or ChatGPT.

Paste into Claude, Cursor, or ChatGPT. Edit the [brackets] before sending.

Recommend the best MCP servers for [task: e.g. documents & content work] in [client: Claude].

Constraints:
- Prefer tools that are [official | open-source | read-only] — pick what matters for my use case.
- Exclude MCPs that require [e.g. a paid plan, OAuth-only flows, remote-only transport].
- Return at most 3 picks, ranked.

For each pick include:
1. One-sentence rationale.
2. The ready-to-paste install snippet for my client.
3. Any required secrets I need to create before installing.

Cross-check the top-mcps.com listing: https://top-mcps.com/top-mcps-for-documents-content

Compare Figma against a real alternative. Swap the second MCP in [brackets] if you want a different match.

Compare Figma MCP vs [Context7 MCP] for the following job: [describe the job, e.g. "let an agent create GitHub issues on bug triage"].

Judge them on:
- Setup time and complexity (what a new user hits first).
- Auth model (none / API key / OAuth 2.1) and credential risk.
- Transport (stdio / Streamable HTTP / SSE) and where the server runs.
- Required secrets and the blast radius if they leak.
- Operational risk in an unattended agent loop.
- Which one is "good enough" for a weekend prototype vs. production.

End with one sentence: which should I pick for my scenario, which is: [my scenario].

References:
- https://top-mcps.com/mcp/figma
- top-mcps.com listing for Context7

Asks the agent to install and verify. Works inside Claude Code, Cursor Agent, Codex CLI.

Install the Figma MCP server for my [client: Claude] at the default config path for that client.

Use the exact install snippet published at https://top-mcps.com/mcp/figma (fetch https://top-mcps.com/mcp/figma.json for the canonical server.json if you can read URLs).

Before finishing:
1. Create the required secrets (FIGMA_ACCESS_TOKEN) and put them in the appropriate env block — do not hard-code them.
2. Restart or reload the client so it picks up the new server.
3. Verify the server is connected (green / running state) and at least one tool is listed.
4. If anything fails, read the client's MCP logs and report the exact error — do not silently retry.

Confirm when done and list the tools the server now exposes.

Frequently asked questions

What changed

— 2 updates tracked.

Apr 19, 2026
Refreshed install snippets and fact sheet; verified for 2026.
Mar 5, 2025
Initial directory listing.

Figma

Install Figma

Quick answer

What it does

Best for

Not for

Setup recipe

Install

Set required secrets

Try a minimum working prompt

Tools & permissions

Security & scope

Agent prompt pack

Frequently asked questions

What changed

More Documents & Content MCPs

Context7

Notion

Obsidian

Install Figma

Quick answer

What it does

Best for

Not for

Setup recipe

Install

Set required secrets

Try a minimum working prompt

Tools & permissions

Security & scope

Agent prompt pack

Full details

Frequently asked questions

What does the access token need?

Does it return screenshots or just data?

Can it extract design tokens / variables?

Does it support dev-mode annotations?

What changed

More Documents & Content MCPs

Context7

Notion

Obsidian