# Figma (official)

> Figma's own MCP server — read design context, generate code, and write back to the canvas.

[Canonical HTML page](https://top-mcps.com/mcp/figma-mcp-server) · [server.json](https://top-mcps.com/mcp/figma-mcp-server.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-mcp-server": {
      "command": "Add",
      "args": [
        "https://mcp.figma.com/mcp",
        "as",
        "an",
        "HTTP",
        "MCP",
        "server",
        "in",
        "your",
        "client",
        "(no",
        "install)"
      ]
    }
  }
}
```

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

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

```shell
claude mcp add figma-mcp-server -- Add https://mcp.figma.com/mcp as an HTTP MCP server in your client (no install)
```

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

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

```json
{
  "mcpServers": {
    "figma-mcp-server": {
      "command": "Add",
      "args": [
        "https://mcp.figma.com/mcp",
        "as",
        "an",
        "HTTP",
        "MCP",
        "server",
        "in",
        "your",
        "client",
        "(no",
        "install)"
      ]
    }
  }
}
```

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

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

```jsonc
{
  "servers": {
    "figma-mcp-server": {
      "command": "Add",
      "args": [
        "https://mcp.figma.com/mcp",
        "as",
        "an",
        "HTTP",
        "MCP",
        "server",
        "in",
        "your",
        "client",
        "(no",
        "install)"
      ]
    }
  }
}
```

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

Open via Cascade → hammer icon → Configure.

```json
{
  "mcpServers": {
    "figma-mcp-server": {
      "command": "Add",
      "args": [
        "https://mcp.figma.com/mcp",
        "as",
        "an",
        "HTTP",
        "MCP",
        "server",
        "in",
        "your",
        "client",
        "(no",
        "install)"
      ]
    }
  }
}
```

### Cline — `cline_mcp_settings.json`

Open via the Cline sidebar → MCP Servers → Edit.

```json
{
  "mcpServers": {
    "figma-mcp-server": {
      "command": "Add",
      "args": [
        "https://mcp.figma.com/mcp",
        "as",
        "an",
        "HTTP",
        "MCP",
        "server",
        "in",
        "your",
        "client",
        "(no",
        "install)"
      ]
    }
  }
}
```

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

Continue uses modelContextProtocolServers with a transport block.

```json
{
  "experimental": {
    "modelContextProtocolServers": [
      {
        "transport": {
          "type": "stdio",
          "command": "Add",
          "args": [
            "https://mcp.figma.com/mcp",
            "as",
            "an",
            "HTTP",
            "MCP",
            "server",
            "in",
            "your",
            "client",
            "(no",
            "install)"
          ]
        }
      }
    ]
  }
}
```

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

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

```shell
# ~/.codex/config.toml
[mcp_servers.figma-mcp-server]
command = "Add"
args = [
  "https://mcp.figma.com/mcp",
  "as",
  "an",
  "HTTP",
  "MCP",
  "server",
  "in",
  "your",
  "client",
  "(no",
  "install)",
]
```

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

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

```jsonc
{
  "context_servers": {
    "figma-mcp-server": {
      "command": {
        "path": "Add",
        "args": [
          "https://mcp.figma.com/mcp",
          "as",
          "an",
          "HTTP",
          "MCP",
          "server",
          "in",
          "your",
          "client",
          "(no",
          "install)"
        ]
      }
    }
  }
}
```

### ChatGPT — `ChatGPT → Settings → Connectors (remote URL)`

Paste this into Settings → Connectors → Add custom connector. Requires ChatGPT Pro / Team / Enterprise / Edu with Developer mode enabled. ChatGPT supports remote HTTPS MCP servers only — stdio servers must be hosted on a public HTTPS endpoint first.

```json
{
  "name": "Figma (official)",
  "transport": "http",
  "url": "https://mcp.figma.com/mcp"
}
```

## At a glance

- **Maintainer:** Figma
- **Transport:** Streamable HTTP
- **Auth model:** OAuth 2.1
- **Required secrets:** None
- **Supported clients:** Claude, Cursor, VS Code (with GitHub Copilot), Any remote-MCP-compatible client, Paid Figma plan
- **License:** Proprietary
- **Language:** TypeScript
- **Latest version:** remote
- **Last verified:** 2026-09-02
- **GitHub stars:** 1,953 (fetched 2026-09-14T10:51:07.952Z)
- **Score:** 81/100 (rubric 2026-09 — see https://top-mcps.com/about/methodology)
- **Source:** https://github.com/figma/mcp-server-guide
- **Homepage:** https://developers.figma.com/docs/figma-mcp-server/

## Tools & permissions

| Tool | Description | Args | Side effects |
|------|-------------|------|--------------|
| `download_assets` | Downloads exports and original source images (remote server only). | `—` | read |
| `get_code_connect_map` | Retrieves node ID to code component mappings. | `—` | read |
| `get_code_connect_suggestions` | Suggests mappings (Figma-prompted). | `—` | read |
| `get_context_for_code_connect` | Component metadata for templates (Figma-prompted) (remote server only). | `—` | read |
| `get_design_context` | Design context for a layer or selection. | `—` | read |
| `get_figjam` | Converts FigJam diagrams to XML. | `—` | read |
| `get_generative_plugin` | Reads a generative plugin's source manifest (remote server only). | `—` | read |
| `get_libraries` | Lists subscribed and available libraries (remote server only). | `—` | read |
| `get_metadata` | Sparse XML outline of a selection. | `—` | read |
| `get_motion_context` | Keyframe animation data and code snippets. | `—` | read |
| `get_screenshot` | Screenshot of a selection. | `—` | read |
| `get_shader` | Reads a shader effect or fill's source manifest. | `—` | read |
| `get_variable_defs` | Variables and styles used in a selection. | `—` | read |
| `list_file_shaders` | Lists shaders used in a specific file (remote server only). | `—` | read |
| `list_generative_plugins` | Lists generative plugins in your library (remote server only). | `—` | read |
| `list_shaders` | Lists shader effects and fills in your library. | `—` | read |
| `search_design_system` | Searches libraries for components, variables, styles (remote server only). | `—` | read |
| `whoami` | Identity and plans of the authenticated user (remote server only). | `—` | read |
| `add_code_connect_map` | Maps a Figma node ID to a code component. | `—` | write |
| `create_generative_plugin` | Creates a generative plugin scaffold (remote server only). | `—` | write |
| `create_new_file` | Creates a blank Design, FigJam, or Slides file (remote server only). | `—` | write |
| `create_shader` | Creates a shader fill or effect scaffold (remote server only). | `—` | write |
| `generate_diagram` | Generates a FigJam diagram from Mermaid (remote server only). | `—` | write |
| `generate_figma_design` | Generates design layers from interfaces (remote server only). | `—` | write |
| `send_code_connect_mappings` | Confirms suggested mappings (Figma-prompted). | `—` | write |
| `update_generative_plugin` | Replaces a generative plugin's code.ts or ui.html (remote server only). | `—` | write |
| `update_shader` | Replaces a shader's main.ts (remote server only). | `—` | write |
| `upload_assets` | Uploads images into a Figma file (remote server only). | `—` | write |
| `use_figma` | General-purpose create, edit, and inspect (remote server only). | `—` | write |

## Security & scope

- **Access scope:** network
- **Sandbox:** Hosted endpoint at mcp.figma.com/mcp over Streamable HTTP, authorised against your Figma account and seat. No local process runs for the remote server; the trust boundary is the Figma account you authorise and the files it can reach.
- **Gotchas:**
  - Eleven of the 29 tools write: they create files, upload images and generate native Figma content. An agent with the full tool set can modify real design files, so scope it to a project you are willing to let it edit.
  - Starter plans and View/Collab seats are limited to six tool calls per month — enough to test, not to work. Confirm the seat before adopting.
  - Write-to-canvas is free only during the beta and is stated to become usage-based paid later.
  - The server is a Beta feature governed by the Figma Developer Terms, so the tool surface can change between releases.
  - The linked repository is Figma's guide and skills for the server, not its source — the server itself is closed and hosted, so you cannot audit or self-host it.

## Quick answer

**What it does.** Exposes 29 tools in five groups: Design to code, Code to design, Design systems and Code Connect, Generative plugins and shaders, and Account. Reads a selection's design context, variables, metadata and screenshots; writes native Figma content — new files, uploaded images, generated designs and diagrams — through the remote server.

**Best for:**
- Writing native content back into Figma files
- Generating code from a selected frame
- Code Connect component mapping
- Extracting variables and design tokens
- Teams on paid Figma plans wanting vendor support

**Not for:**
- Starter plans and View/Collab seats (6 calls per month)
- Read-only workflows where a community server suffices
- Self-hosted-only environments

## Description

The official Figma MCP server is Figma's first-party endpoint at mcp.figma.com/mcp, and the only one that can write to a Figma file. 29 documented tools cover design-to-code (design context, metadata, screenshots, variable definitions, asset export), code-to-design (create files, upload assets, generate designs and diagrams), Code Connect mapping, and generative plugins and shaders. A desktop-app server is also offered, but 17 of the 29 tools — including everything that writes — are remote-only.

## Why it matters

Every other Figma MCP reads. This one writes: an agent can build frames, components and variables in a real Figma file using your design system as the source of truth, which closes the loop from code back to design. It is also the only Figma-supported option, so it tracks the API rather than lagging it.

## Key features

- First-party Figma server
- Write to canvas — remote server only
- 29 documented tools across five groups
- Code Connect integration
- Remote endpoint at mcp.figma.com/mcp, plus a desktop-app option

## FAQ

### Is this different from the Framelink Figma MCP?

Yes, and both are listed here. This is Figma's own server at mcp.figma.com/mcp — the only one that can write to a Figma file. Framelink (figma-developer-mcp) is the community server with far wider adoption for read-only design-to-code, and it does not require a paid Figma seat beyond an API token.

### What are the rate limits?

They are the reason to check your seat before adopting it. Starter plans and View or Collab seats on paid plans get up to six tool calls per month. A Dev or Full seat on Professional, Organization or Enterprise gets per-minute limits matching the Tier 1 Figma REST API. Tools that write to files are exempt.

### Remote or desktop server?

Remote is Figma's recommendation and is required for most of the surface — 17 of the 29 tools are remote-only, including every write-to-canvas tool. The desktop server runs alongside the Figma desktop app and covers the read-oriented design-to-code tools.

### Is writing to the canvas free?

During the beta, yes. Figma states the write-to-canvas feature will eventually become usage-based paid. Treat current pricing as provisional and re-check before you build a workflow that depends on it.

### Is the server open source?

No. The server is a hosted Figma service under the Figma Developer Terms. The linked repository, figma/mcp-server-guide, is Figma's official guide and agent skills for it — not the server implementation — so treat the star count as interest in the guide rather than in a readable codebase.

## Changelog

- **2026-09-02** — Refreshed install snippets and fact sheet; verified for 2026.
- **2025-08-05** — Initial directory listing.