figma-claude-connector

AI-powered Figma design tool via MCP (Model Context Protocol). Control Figma canvas directly from Claude Code, Cursor, or any MCP-compatible AI client.

AI Client ──stdio──▶ MCP Server ──ws://localhost:3055──▶ Figma Plugin

Quick Start

1. Add to your MCP config

Claude Code (.mcp.json):

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-claude-connector"]
    }
  }
}

Cursor (~/.cursor/mcp.json):

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-claude-connector"]
    }
  }
}

2. Install the Figma Plugin

1. Open Figma Desktop
2. Go to Plugins > Manage Plugins
3. Search for "Claude Connector"
4. Click Install

3. Use

1. Run the plugin in Figma: Plugins > Claude Connector
2. Confirm "Connected" in the plugin UI
3. Start designing with AI from your MCP client

Features — 122 Tools

Canvas Manipulation (82 tools)

| Category | Tools | Examples | |---|---|---| | Nodes | 4 | createFrame, createRectangle, createEllipse, createText | | Components | 7 | createButton, createCard, createInput, createComponent, createInstance | | Layout | 6 | applyAutoLayout, createGridLayout, createFlexContainer, alignDistribute | | Shapes | 8 | createLine, createPolygon, createStar, createVector, createSection | | Styles | 4 | applyFill, applyShadow, applyStroke, createColorStyles | | Local Styles | 11 | createPaintStyle, createTextStyle, importComponentByKey | | Operations | 11 | groupNodes, flattenNodes, booleanOperation, moveNode, resizeNode | | Annotations | 3 | addAnnotation, getAnnotations, deleteAnnotation | | Comments | 4 | postComment, getComments, replyComment, resolveComment | | Query | 4 | getSelection, findNodes, getNodeDetails, getFileInfo | | Viewport | 13 | scrollIntoView, setImageFill, setCornerRadius, setEffects | | Metadata | 5 | setPluginData, getPluginData, setDescription | | Export | 1 | exportImage (PNG/SVG/PDF) | | Typography | 1 | createTypographyScale |

Figma REST API (40 tools)

| Category | Tools | Examples | |---|---|---| | Files | 6 | getFile, getFileNodes, getImages, getFileVersions | | Components | 9 | getTeamComponents, getFileComponents, getTeamStyles | | Projects | 2 | getTeamProjects, getProjectFiles | | Variables | 3 | getLocalVariables, getPublishedVariables, modifyVariables | | Webhooks | 6 | createWebhook, getWebhook, updateWebhook, deleteWebhook | | Dev Resources | 4 | getDevResources, createDevResources, updateDevResources | | Analytics | 4 | getComponentActions, getComponentUsages, getStyleActions | | Reactions | 3 | getCommentReactions, addCommentReaction | | Activity | 2 | getActivityLogs, getPayments | | Users | 1 | getMe |

REST API tools require a Figma Personal Access Token. Set it via the FIGMA_TOKEN environment variable.

Architecture

┌─────────────────┐     stdio      ┌─────────────┐   WebSocket    ┌───────────────┐
│   AI Client     │ ◄────────────► │  MCP Server  │ ◄────────────► │ Figma Plugin  │
│ (Claude, Cursor)│                │  (Node.js)   │  ws://3055     │ (Canvas API)  │
└─────────────────┘                └─────────────┘                └───────────────┘

• MCP Server: Communicates with AI clients via stdio, connects to Figma plugin via WebSocket
• Figma Plugin: Receives commands from the MCP server and executes Figma API calls on the canvas

Figma REST API Setup

To use REST API tools (file reading, team components, analytics, etc.), set your Personal Access Token:

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-claude-connector"],
      "env": {
        "FIGMA_TOKEN": "figd_xxxxx"
      }
    }
  }
}

Generate a token at: Figma > Settings > Personal Access Tokens

Troubleshooting

Plugin shows "Waiting for server..."

• Ensure the MCP server is running: lsof -i:3055
• Start manually: npx figma-claude-connector

Port 3055 already in use

kill $(lsof -ti:3055)

Font errors

• Figma must have the required fonts loaded
• Inter font (Regular, Medium, Bold) is supported by default

Requirements

• Node.js >= 18
• Figma Desktop app

License

MIT