# Figma MCP Server MCP server

The Figma MCP server brings Figma design context directly into your AI workflow.

## At a glance

Figma MCP Server is an MCP server in the Design & Media category. It is hosted remotely and connects over HTTP, and declares no required credentials. It exposes 2 tools, including get_design_context and get_variable_defs. It scores A (88/100) on the MCP Skills Hub health score as of Oct 28, 2026.

## Install

### How to install Figma MCP Server in Claude Code

1. Add the server

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

2. Verify it's connected

```bash
claude mcp list
```

3. Sharing it with your team?

   Add `--scope project` to write it to .mcp.json in the repository root, which you can commit (with the secrets left as environment variables).

4. Use it in a session

   Ask Claude to use the tools this server exposes (e.g. get_design_context, get_variable_defs). It discovers them automatically.

### How to install Figma MCP Server in Claude Desktop

1. Open your MCP config

   macOS: ~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

2. Add this server

```json
{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote",
        "https://mcp.figma.com/mcp"
      ]
    }
  }
}
```

3. Why the wrapper?

   This is a remote (HTTP) server and Claude Desktop only launches local processes, so mcp-remote proxies the connection. It will open a browser window if the server needs OAuth.

4. Restart Claude Desktop

   The tools appear under the 🔌 menu once the app reloads.

### How to install Figma MCP Server in Cursor

1. Create / edit .cursor/mcp.json in your project

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

2. Enable it

   Cursor Settings → MCP → toggle the server on. Tools become available to the Composer/Agent.

### How to install Figma MCP Server in Codex CLI

1. Add to ~/.codex/config.toml

```toml
[mcp_servers.figma]
command = "npx"
args = ["-y", "mcp-remote", "https://mcp.figma.com/mcp"]
```

2. Why the wrapper?

   Codex runs MCP servers as local processes, so mcp-remote bridges this HTTP endpoint to stdio.

3. Run Codex

   Codex loads MCP servers from config.toml on startup and exposes their tools to the agent.

### How to install Figma MCP Server in Windsurf

1. Edit ~/.codeium/windsurf/mcp_config.json

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

2. Reload

   Windsurf → Cascade → refresh MCP servers. Cascade can now call the tools.

### How to install Figma MCP Server in Cline

1. Open Cline → MCP Servers → Configure

   Adds to cline_mcp_settings.json.

2. Add the server

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

### How to install Figma MCP Server in VS Code

1. Create .vscode/mcp.json

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

2. Start it

   VS Code shows a ▶ Start action above the server entry. Agent mode (Copilot Chat) can then use the tools.

## Tools

- `get_design_context` — provides a structured React + Tailwind representation of your Figma selection. This is a starting point that your AI assistant can translate into any framework or code style, depending on your prompt.
- `get_variable_defs` — extracts the variables and styles used in your selection (color, spacing, typography, etc). This helps the model reference your tokens directly in the generated code.

Source repository: https://github.com/figma/mcp-server-guide

---

Source: https://mcp-skills-hub.vercel.app/mcps/com-figma-mcp-mcp · MCP Skills Hub · data as of 2026-10-28T12:31:05Z