StackMCP

Set up Figma MCP in VS Code

Access Figma designs, extract design tokens, inspect layers, and bridge the gap between design and code from your AI editor.

1

Locate the config file

VS Code reads MCP server configuration from the following file:

.vscode/settings.json → mcp section

Create this file if it does not already exist. For VS Code, this is inside your workspace .vscode/settings.json file under the mcp section.

2

Add the configuration

Add the following to your VS Code config file:

json
{
  "servers": {
    "figma-mcp": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "figma-mcp"
      ],
      "env": {
        "FIGMA_ACCESS_TOKEN": "YOUR_FIGMA_ACCESS_TOKEN"
      }
    }
  }
}
3

Set up environment variables

Figma MCP requires the following environment variables:

FIGMA_ACCESS_TOKENRequired

Figma personal access token

4

Verify it works

Restart VS Code. Figma MCP should appear in your MCP server list with 8 tools available.

This server adds approximately 4,120 tokens to your context window for tool definitions.

Set up Figma MCP in other editors

Claude CodeCursorWindsurfClaude DesktopContinue
← Back to Figma MCP