Figma MCP

MCP server for the Figma API. Lets AI agents fetch designs, nodes, and rendered images from Figma.

Features

• 🎨 Get Node — Fetch node JSON with layout, styles, children
• 🖼️ Get Image — Render any node as PNG/JPG/SVG/PDF
• 📋 List Frames — Discover all frames in a file
• 🔍 Search — Find nodes by name

Quick Start

npm install
npm run build

Configuration

Requires FIGMA_TOKEN environment variable. Get one from: https://www.figma.com/developers/api#access-tokens

Claude Desktop

Add to ~/.config/claude/claude_desktop_config.json:

{
  "mcpServers": {
    "figma": {
      "command": "node",
      "args": ["/path/to/figma-mcp/dist/server.js"],
      "env": {
        "FIGMA_TOKEN": "figd_xxxxx"
      }
    }
  }
}

Claude Code

Add to .claude/settings.json:

{
  "mcpServers": {
    "figma": {
      "command": "node",
      "args": ["/path/to/figma-mcp/dist/server.js"],
      "env": {
        "FIGMA_TOKEN": "figd_xxxxx"
      }
    }
  }
}

Tools

figma_get_node

Get a node's JSON data including layout, styles, and children.

figma_get_node({
  fileKey: "jWm9EQEE08EY743SGyj6ru",  // From Figma URL
  nodeId: "9389-158685",               // Node ID
  depth: 2                             // Children depth (0-10)
})

Returns:

{
  "id": "9389:158685",
  "name": "DR_Home__ConnectOrg_0004_",
  "type": "FRAME",
  "size": { "width": 1440, "height": 1024 },
  "children": 3,
  "full": { ... }
}

figma_get_image

Render a node as an image.

figma_get_image({
  fileKey: "jWm9EQEE08EY743SGyj6ru",
  nodeId: "9389-158685",
  scale: 2,        // 0.5 - 4
  format: "png"    // png, jpg, svg, pdf
})

Returns:

{
  "nodeId": "9389-158685",
  "imageUrl": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/...",
  "format": "png",
  "scale": 2
}

figma_list_frames

List all top-level frames in a file.

figma_list_frames({
  fileKey: "jWm9EQEE08EY743SGyj6ru"
})

Returns:

Found 45 frames:

- **Home Page** (FRAME) — id: `123:456`
- **Settings Modal** (FRAME) — id: `789:012`
...

figma_search

Search for nodes by name.

figma_search({
  fileKey: "jWm9EQEE08EY743SGyj6ru",
  query: "Button"
})

Returns:

Found 12 matches for "Button":

- **Primary Button** (COMPONENT)
  id: `1:234`
  path: Document → Components → Buttons → Primary Button
...

Getting File Key and Node ID

From a Figma URL:

https://www.figma.com/design/jWm9EQEE08EY743SGyj6ru/File-Name?node-id=9389-158685
                              ^^^^^^^^^^^^^^^^^^^^^^^^                ^^^^^^^^^^^
                              fileKey                                 nodeId

License

MIT