Claude for Figma

Custom MCP server that enables Claude Code to create designs in Figma.

Architecture

┌─────────────┐      stdio      ┌─────────────┐      WebSocket     ┌─────────────────┐
│ Claude Code │ <-------------> │ MCP Server  │ <----------------> │ WebSocket Bridge│
│             │                 │             │                    │   (Port 3001)   │
└─────────────┘                 └─────────────┘                    └────────┬────────┘
                                                                            │
                                                                            │ WebSocket
                                                                            │
                                                                   ┌────────▼────────┐
                                                                   │  Figma Plugin   │
                                                                   │  (inside Figma) │
                                                                   └─────────────────┘

Quick Start

1. Install Dependencies

bun install

2. Build the Figma Plugin

cd figma-plugin && bun run build

3. Install the Figma Plugin

1. Open Figma Desktop
2. Go to Menu → Plugins → Development → Import plugin from manifest...
3. Select figma-plugin/manifest.json

4. Start the WebSocket Bridge

bun run dev:bridge

5. Run the Figma Plugin

In Figma, go to Menu → Plugins → Development → Claude Design Bridge

You should see "Connected to Bridge" in the plugin UI.

6. Add MCP Server to Claude Code

claude mcp add figma-design -- bun /Users/rezailmi/Documents/GitHub/claude-for-figma/mcp-server/src/index.ts

7. Use Claude to Create Designs!

Now you can ask Claude to create Figma designs:

Create a login form with:
- A frame 400x500px
- A title "Sign In"
- Email and password input fields (rectangles with text)
- A blue login button

Available Tools

Frame & Layout

• create_frame - Create a frame container
• set_auto_layout - Configure flexbox-like layout

Shapes

• create_rectangle - Rectangle with optional rounded corners
• create_ellipse - Ellipse or circle
• create_polygon - Triangle, pentagon, hexagon, etc.
• create_star - Star shape
• create_line - Line

Text

• create_text - Create text with font options
• set_text_content - Update text content
• set_text_style - Change font size, weight, color, alignment

Styling

• set_fill - Set fill color (hex)
• set_stroke - Set border/stroke
• set_corner_radius - Round corners
• set_opacity - Set transparency
• set_effects - Add shadows, blur

Layout

• resize_node - Change dimensions
• move_node - Reposition
• append_child - Add to parent frame
• remove_node - Delete node

Document

• get_selection - Get selected nodes
• get_document_info - Get document info

Development

Run in Watch Mode

# Terminal 1: WebSocket Bridge
bun run dev:bridge

# Terminal 2: Figma Plugin (watch mode)
cd figma-plugin && bun run watch

Test MCP Server

bunx @modelcontextprotocol/inspector bun mcp-server/src/index.ts

Troubleshooting

"Not connected to Figma bridge"

• Ensure WebSocket bridge is running: bun run dev:bridge
• Check that Figma plugin shows "Connected to Bridge"

"Figma plugin not connected"

• Open Figma Desktop
• Run the plugin: Menu → Plugins → Development → Claude Design Bridge
• Check the plugin UI for connection status

"Request timeout"

• The Figma plugin may have disconnected
• Re-run the plugin in Figma