Figma

🎨 Creative

Turn Figma designs into code with AI. Extract layout, styling, and component metadata from any Figma file, frame, or group. Implement pixel-perfect designs in React, Vue, Tailwind, or any framework in one shot.

Tools (4)

Client configuration

Cursor (.cursor/mcp.json)

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp@0.13.2",
        "--stdio"
      ],
      "env": {
        "FIGMA_API_KEY": "your-figma-api-key-here"
      }
    }
  }
}

VS Code (.vscode/mcp.json)

{
  "servers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp@0.13.2",
        "--stdio"
      ],
      "env": {
        "FIGMA_API_KEY": "your-figma-api-key-here"
      },
      "type": "stdio"
    }
  }
}

Replace the placeholders before connecting. Authorize in your client when prompted.

The Cursor JSON also works in Claude Desktop's local MCP configuration. Install the required runtime and local software first.

Documentation →

Activate on Zubnet →

Figma

Tools (4)

Client configuration

Cursor (.cursor/mcp.json)

VS Code (.vscode/mcp.json)

Related Servers