Skip to content
mcp/harbor
VS Code

figma designer for VS Code

io.github.a1245582339/figma-designer

Give AI agents full read & write access to Figma — 50+ tools for design automation

client:VS Code transport:stdio runtime:npm

Install figma designer in VS Code

.vscode/mcp.json 

{
  "inputs": [
    {
      "type": "promptString",
      "id": "figma-token",
      "description": "FIGMA_TOKEN",
      "password": true
    },
    {
      "type": "promptString",
      "id": "figma-bridge-port",
      "description": "FIGMA_BRIDGE_PORT",
      "password": true
    }
  ],
  "servers": {
    "figma-designer": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "figma-designer-mcp"
      ],
      "env": {
        "FIGMA_TOKEN": "${input:figma-token}",
        "FIGMA_BRIDGE_PORT": "${input:figma-bridge-port}"
      }
    }
  }
}

VS Code prompts for each input the first time the server starts, so no secret is written to the file. VS Code docs

figma designer in other clients

figma designer MCP server