# Figma MCP server

> Bring Figma design context, variables and components into your assistant to generate code from frames or write back to the canvas.

- Listing: https://mcp.tc/i/figma
- Connect: use the server's own URL `https://mcp.figma.com/mcp` (OAuth sign-in at the server); clients connect to it directly. The listing link is a page, not an MCP endpoint.
- Type: remote (Streamable HTTP)
- Auth: OAuth sign-in
- Category: [Design, Websites & CMS](https://mcp.tc/c/design)
- Vendor: Figma
- Verified: yes, mcp.tc checked that this is the official server (https://mcp.tc/verify). It says who runs the server, not that it is safe.
- Homepage: <https://developers.figma.com/docs/figma-mcp-server/>
- Docs: <https://developers.figma.com/docs/figma-mcp-server/>
- Repository: <https://github.com/figma/mcp-server-guide>

## About

Connects an AI assistant to Figma design files. It can read design context such as variables, components and layout data from a selected frame or layer link, and use it to generate code. It also supports Code Connect to reuse your real components, and writing native content (frames, components, variables, auto layout) back to the canvas, which is in beta.

Runs as a hosted Streamable HTTP endpoint at https://mcp.figma.com/mcp. Users sign in with Figma through OAuth. Rate limits apply to read tools and depend on the Figma plan and seat type, with a small monthly cap on Starter plans and View or Collab seats.

## What it can do

- Generate code from a selected Figma frame or layer link
- Extract variables, components and layout data from designs
- Reuse your own components through Code Connect
- Write frames, components, variables and auto layout to the canvas (beta)
- Convert web pages into Figma designs (rolling out)

## Example prompts

- "Implement the design at this Figma frame link in React."
- "Pull the color and spacing variables from this Figma file."
- "Build a card component in my Figma file using our design system."
- "Which of my codebase components map to this Figma frame?"

## Install

### Claude Code

1. Run this in a terminal, in your project folder:

```bash
claude mcp add --transport http figma https://mcp.figma.com/mcp
```

2. Start Claude Code, type `/mcp`, pick **figma** and choose **Authenticate**. A browser window opens for the Figma sign-in.

Add `--scope user` to make it available in every project, not just this one.

### Claude Desktop

1. Open **Settings → Connectors** and click **Add custom connector**.

2. Name it **Figma** and paste this URL:

```url
https://mcp.figma.com/mcp
```

3. Click **Add**, then **Connect**, and sign in when Figma asks.

Claude Desktop’s JSON config file only starts local servers. Remote servers go through Connectors, and connectors you add on claude.ai show up here too.

### claude.ai

1. Open the connector form on claude.ai. This button fills in the name and URL for you:

[Add to claude.ai](<https://claude.ai/customize/connectors?modal=add-custom-connector&connectorName=Figma&connectorUrl=https%3A%2F%2Fmcp.figma.com%2Fmcp>) (opens connector settings)

2. Check that the URL reads `https://mcp.figma.com/mcp` and click **Add**.

3. Click **Connect** and sign in when Figma asks.

Free plans allow one custom connector. On Team and Enterprise plans an owner adds it under **Organization settings → Connectors**.

### ChatGPT

1. On chatgpt.com, open **Settings → Security and login** and turn on **Developer mode**.

2. Go to `chatgpt.com/plugins` and click **+** to create an app for a remote MCP server.

3. Paste `https://mcp.figma.com/mcp` as the server URL and choose **OAuth**. ChatGPT sends you to Figma to sign in.

Developer mode is available on the web for Plus, Pro, Business, Enterprise and Education accounts.

### Cursor

[Add to Cursor](<https://cursor.com/install-mcp?name=figma&config=eyJ1cmwiOiJodHRwczovL21jcC5maWdtYS5jb20vbWNwIn0%3D>) (opens Cursor)

Or add it by hand to `~/.cursor/mcp.json` (all projects) or `.cursor/mcp.json` (this project):

`mcp.json`:

```json
{
  "mcpServers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}
```

Cursor shows **Needs login** next to the server. Click it to sign in.

### VS Code

[Install in VS Code](<https://vscode.dev/redirect/mcp/install?name=figma&config=%7B%22type%22%3A%22http%22%2C%22url%22%3A%22https%3A%2F%2Fmcp.figma.com%2Fmcp%22%7D>) (opens VS Code)

Or from a terminal:

```bash
code --add-mcp '{"name":"figma","type":"http","url":"https://mcp.figma.com/mcp"}'
```

Or commit it to the repo in `.vscode/mcp.json`:

`.vscode/mcp.json`:

```json
{
  "servers": {
    "figma": {
      "type": "http",
      "url": "https://mcp.figma.com/mcp"
    }
  }
}
```

VS Code asks you to sign in the first time the server starts.

### Devin Desktop

1. Add it to `~/.config/devin/mcp_config.json` (macOS and Linux) or `%APPDATA%\devin\mcp_config.json` (Windows):

`mcp_config.json`:

```json
{
  "mcpServers": {
    "figma": {
      "serverUrl": "https://mcp.figma.com/mcp"
    }
  }
}
```

2. Refresh the MCP server list in Cascade and sign in when asked.

Devin Desktop is the new name for Windsurf. It reads `serverUrl` (or `url`) for remote servers.

### Codex

```bash
codex mcp add figma --url https://mcp.figma.com/mcp
codex mcp login figma
```

Or edit `~/.codex/config.toml` directly:

`config.toml`:

```toml
[mcp_servers.figma]
url = "https://mcp.figma.com/mcp"
```

### Gemini CLI

```bash
gemini mcp add --transport http figma https://mcp.figma.com/mcp
```

Then, inside Gemini CLI, run `/mcp auth figma` to sign in.

This adds it to the current project. Add `-s user` to use it everywhere.

### Any client

Most clients accept this shape. Some name the URL field differently: `serverUrl` in Devin Desktop, `httpUrl` in Gemini CLI’s settings file.

```json
{
  "mcpServers": {
    "figma": {
      "type": "http",
      "url": "https://mcp.figma.com/mcp"
    }
  }
}
```

Zed puts servers under `context_servers` in its settings. Cline needs `"type": "streamableHttp"`, or it assumes SSE.

Client only starts local servers? Bridge it with `npx -y mcp-remote https://mcp.figma.com/mcp`.

## Details

- Server version: 1.0.3
- Last checked: 2026-10-03 (reachable, asks for credentials)
- Listed: 2026-10-03
- Updated: 2026-10-03

---
Source: https://mcp.tc/i/figma (mcp.tc is an independent directory, not affiliated with this server's publisher). Corrections: https://mcp.tc/report