Figma Bridge MCP Server

Access Figma files through the Model Context Protocol (MCP). This server exposes Figma's REST API as MCP tools, enabling AI assistants to read and analyze Figma designs.

Features

| Tool | Description | |------|-------------| | get_file_overview | Get file structure: pages, frames, component/style counts | | get_design_tokens | Extract colors, typography, spacing, effects as tokens | | get_component_tree | List components, component sets, variants, and properties | | get_node_styles | Extract visual styles from nodes with CSS generation | | export_assets | Export nodes as SVG, PNG, or PDF with download URLs |

Prerequisites

Node.js 22+
Figma Personal Access Token (PAT)

Quick Start

git clone <repo>
cd figma-bridge-mcp
npm install
cp .env.example .env
# Edit .env with your Figma PAT
npm start

Getting a Figma PAT

Go to Figma Settings → Account → Personal Access Tokens
Create a new token with these scopes:
- file_content:read
- file_metadata:read
- library_content:read
Copy the token to your .env file

Note: PATs expire after 90 days. The server validates your PAT on startup and will show a clear error if expired.

MCP Client Configuration

Claude Desktop / Cursor

Add to your MCP client config:

{
  "mcpServers": {
    "figma-bridge": {
      "url": "http://localhost:3100/mcp"
    }
  }
}

Tool Reference

get_file_overview

Get an overview of a Figma file structure.

| Parameter | Type | Required | Description | |-----------|------|----------|-------------| | file_key | string | Yes | Figma file key from URL | | include_metadata | boolean | No | Include role, editor type, link access |

get_design_tokens

Extract design tokens from a Figma file.

| Parameter | Type | Required | Description | |-----------|------|----------|-------------| | file_key | string | Yes | Figma file key | | token_types | string[] | No | color, typography, spacing, effect, all | | format | string | No | raw, css_variables, tailwind |

get_component_tree

Get component hierarchy with variants.

| Parameter | Type | Required | Description | |-----------|------|----------|-------------| | file_key | string | Yes | Figma file key | | component_id | string | No | Specific component to inspect | | include_properties | boolean | No | Include property definitions |

get_node_styles

Extract visual styles with CSS generation.

| Parameter | Type | Required | Description | |-----------|------|----------|-------------| | file_key | string | Yes | Figma file key | | node_ids | string[] | Yes | Node IDs to extract (max 50) | | include_children | boolean | No | Also extract children styles |

export_assets

Export nodes as image files.

| Parameter | Type | Required | Description | |-----------|------|----------|-------------| | file_key | string | Yes | Figma file key | | node_ids | string[] | Yes | Node IDs to export (max 20) | | format | string | No | svg, png, pdf | | scale | number | No | Export scale for PNG (1-4) |

Enterprise vs Non-Enterprise

| Feature | Enterprise | Free/Pro/Org | |---------|-----------|--------------| | Variables API | ✓ Full access | ✗ Falls back to Styles API | | Spacing tokens | ✓ Via Variables | ✗ Not available | | Color tokens | ✓ Variables + modes | ✓ Via style fills | | Typography | ✓ Variables | ✓ Via text styles | | Effects | ✓ Variables | ✓ Via effect styles |

The get_design_tokens tool automatically detects your plan and uses the best available API.

Rate Limits

The server implements client-side rate limiting matching Figma's tiers:

| Tier | Limit | Endpoints | |------|-------|-----------| | Tier 1 | 8 req/min | Files, Nodes, Images | | Tier 2 | 20 req/min | Variables | | Tier 3 | 40 req/min | Components, Styles |

One shared rate limiter is used across all MCP sessions (rate limits are per-PAT, not per-session).

Development

npm run dev          # Watch mode with hot reload
npm test             # Run all tests
npm run typecheck    # TypeScript type checking
npm run build        # Build to dist/

Architecture

Express (createMcpExpressApp)
  └── /mcp endpoint
       └── SessionManager
            ├── POST: new session (initialize) or route to existing
            ├── GET: SSE stream (resumability via EventStore)
            └── DELETE: session termination
                 └── McpServer (per-session, 1:1 with transport)
                      └── Tools (5)
                           └── Shared FigmaClient (one per PAT)
                                └── Shared RateLimiter (one per PAT)
                                     └── Figma REST API

McpServer is created per-session (SDK enforces 1:1 server-transport binding)
FigmaClient and RateLimiter are shared across all sessions (rate limits are per-PAT)
DNS rebinding protection via createMcpExpressApp()
Connection resumability via InMemoryEventStore implementing the SDK's EventStore interface

Troubleshooting

| Error | Cause | Fix | |-------|-------|-----| | "Invalid or expired Figma PAT" | PAT expired (90-day limit) | Generate new PAT in Figma settings | | "Insufficient permissions" | Wrong PAT scopes | Regenerate PAT with correct scopes | | "Rate limited by Figma API" | Too many requests | Wait and retry; reduce concurrent tool calls | | "Variables API requires Enterprise" | Non-Enterprise plan | Tool automatically falls back to Styles API |

License

MIT

MCP Servers