Figma Claude Connect

What it does

Figma Claude Connect turns Claude into a design partner. It renders an interactive bridge between Claude and Figma Desktop, allowing the AI to create UI components, manage design tokens, and audit files in real-time.

Key features

• Prompt-to-Design: Create login cards, navbars, and full screens via text.
• Token Management: Programmatically add, rename, and audit design variables and colors.
• Design Auditing: Run accessibility checks and compare Figma components with code implementations.
• Real-time Sync: Direct WebSocket connection between the MCP server and Figma plugin.

Installation

1. Clone the repo and run npm install && npm run build:local.
2. Add the server to claude_desktop_config.json:

{
  "mcpServers": {
    "figma-console": {
      "command": "node",
      "args": ["/absolute/path/to/dist/local.js"],
      "env": { "FIGMA_ACCESS_TOKEN": "your_token" }
    }
  }
}

1. Import figma-claude-connect/manifest.json into Figma Desktop via Plugins → Development.

Supported hosts

• Claude Desktop