Add the Framelink Figma MCP MCP server to VS Code

Config last verified Jun 1, 2026

The exact config to run Framelink Figma MCP in VS Code — paste it in, restart, and the tools load.

Prerequisites

VS Code installed.
FIGMA_API_KEY — Figma personal access token used to call the Figma REST API.

Setup

1. Open `.vscode/mcp.json`

2. Add this configuration

Add to .vscode/mcp.json

.vscode/mcp.json

json

{
  "servers": {
    "framelink-figma": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=YOUR-KEY",
        "--stdio"
      ],
      "env": {
        "FIGMA_API_KEY": "<FIGMA_API_KEY>"
      }
    }
  }
}

Heads up

VS Code uses the `servers` key (not `mcpServers`) and requires `type`.

3. Restart VS Code and confirm the Framelink Figma MCP tools load.

Gotchas

VS Code uses the `servers` key (not `mcpServers`) and requires `type`.

VS Code is the exception to every other client: its top-level key is "servers", not "mcpServers", and each entry needs an explicit "type" (for example "http" or "stdio"). Secrets are not inlined; instead you declare an "inputs" array and reference each value as ${input:id}, so VS Code prompts for it once and never writes it to disk. Remote servers connect natively with OAuth.

← Back to the Framelink Figma MCP MCP server