figma-graph

MCP server that converts Figma files into graph structures (nodes + edges).

Tools

Tool	Description
get_figma_graph	Fetch a Figma file/node and return it as a graph (nodes + edges)
get_graph_summary	Get stats: node counts, types, depth, component usage
find_components	Find all components and their instance relationships

Setup

npm install
npm run build

Usage with Claude Code

Add to your MCP config (e.g. ~/.claude/claude_desktop_config.json):

{
  "mcpServers": {
    "figma-graph": {
      "command": "node",
      "args": ["/path/to/figma-graph/dist/index.js"],
      "env": {
        "FIGMA_TOKEN": "your-figma-token"
      }
    }
  }
}

Graph Output

The graph contains:

• Nodes: Each Figma layer as a node with id, name, type, parentId, depth, and metadata
• Edges: Three relationship types:
  • parent-child — layer hierarchy
  • instance-component — component instance → master component
• Stats: totalNodes, totalEdges, maxDepth, typeBreakdown

License

MIT