Claude → Figma

Create and modify Figma designs directly from Claude using the Model Context Protocol (MCP).

npm: https://www.npmjs.com/package/claude-to-figma

Overview

This bridge allows Claude to control Figma in real-time. Ask Claude to create frames, shapes, text, components, and more - and watch them appear instantly in your Figma canvas.

Requirements

• Claude Code - Download from claude.ai/download
• Figma Desktop - The plugin runs in Figma Desktop

Architecture

Claude Code ──► MCP Server ──► WebSocket Server ──► Figma Plugin
                (stdio)         (port 3055)         (runs in Figma)

Quick Start

1. Install the Figma Plugin

1. Open Figma Desktop
2. Go to Menu → Plugins → Development → Import plugin from manifest
3. Navigate to the plugin folder and select src/figma-plugin/manifest.json
4. Run the plugin - it opens with a Setup view

2. Follow the Setup Steps

The plugin shows 4 setup steps with live status indicators (orange → green):

| Step | Action | Paste in Claude Code | |------|--------|---------------------| | 1. Install | Install the npm package | run npm install -g claude-to-figma | | 2. Run Server | Start the WebSocket server | run claude-to-figma-server | | 3. Restart | Restart Claude Code | Close and reopen, or open new terminal | | 4. Connect | Connect to your Figma file | connect to figma-xxx (use your channel ID) |

Each step turns green automatically as it completes. When all 4 are green, you're ready to design!

3. Start Designing

Once connected, ask Claude to create anything:

Create a mobile app frame with a dark header

Add a white card with rounded corners

Create a button that says "Get Started"

Plugin Interface

The plugin has four views accessible via header tabs:

| Tab | Description | |-----|-------------| | terminal | Main view - channel ID, connection status, command log, icon folder | | setup | Step-by-step setup guide with live status indicators | | cmds | Feature command reference with copy-to-clipboard buttons | | mini | Compact mode showing only header + log |

Mini Mode Behavior:

• Shows only header + command log
• Clicking setup or cmds auto-expands to full view

Commands View (cmds):

• 12 feature categories with example commands
• Each command has a copy button
• Categories: Creation, Page Management, Modification, Auto Layout, Text, Variables, Components, Effects, Icons & Images, Selection & Document, Validation, Export

Available Tools (95+)

Connection

• connect_to_figma - Connect to a Figma plugin channel
• get_connection_status - Check connection status

Document

• get_document_info - Get document name and pages
• get_current_page - Get current page and children
• get_selection - Get selected nodes

Creation

• create_frame - Create frames/containers
• create_rectangle - Create rectangles
• create_ellipse - Create circles/ellipses
• create_text - Create text elements
• create_line - Create lines
• create_polygon - Create polygons (triangle, hexagon, etc.)
• create_star - Create star shapes
• create_component - Create components
• create_instance - Create component instances

Modification

• move_node, resize_node - Position and size
• set_fill_color, set_stroke - Colors and borders
• set_corner_radius, set_corner_radii - Rounded corners
• set_opacity, set_rotation - Opacity and rotation
• set_effects - Shadows and blur
• delete_node, duplicate_node - Delete and duplicate

Layout

• set_auto_layout - Enable auto layout with full control
• set_constraints - Set responsive constraints
• append_to_frame - Move nodes into frames

Styles & Variables

• get_local_styles - Get all local styles
• apply_fill_style, apply_text_style - Apply styles
• get_local_variables - Get variables
• bind_variable - Bind variables to properties
• create_variable_collection - Create variable collection with modes
• create_variable - Create COLOR, FLOAT, STRING, BOOLEAN variables
• set_variable_value - Set variable value for specific mode
• sync_variables_with_page - Compare variables with actual values
• audit_variable_usage - Find unused variables, show usage counts
• extract_variables_from_selection - Extract colors/spacing from selection
• extract_variables_from_page - Extract variables from page
• extract_variables_from_project - Extract variables from entire project
• extract_variables_from_component - Extract variables from component

Images & Icons

• set_image_fill - Add image from URL
• insert_svg - Insert SVG markup
• insert_icon - Insert Lucide icons
• insert_local_icon - Insert icons from local folder
• set_icon_folder - Set local icon folder path

Validation

• validate_design - Run comprehensive design validation
• check_contrast - Check WCAG contrast ratio
• analyze_composition - Check layout issues

And More...

Boolean operations, gradients, text properties, layer ordering, viewport control, export, and more.

Manual Installation (Development)

Step 1: Clone and Install

git clone https://github.com/your-repo/claude-to-figma
cd claude-to-figma
npm install
npm run build

Step 2: Start WebSocket Server

npm run socket

Keep this terminal open.

Step 3: Configure Claude Code

Add to ~/.claude.json:

{
  "mcpServers": {
    "figma": {
      "command": "claude-to-figma"
    }
  }
}

Step 4: Install Figma Plugin

1. In Figma: Menu → Plugins → Development → Import plugin from manifest
2. Select src/figma-plugin/manifest.json

Step 5: Connect

In Claude Code:

connect to figma-abc123

Quick Start Commands

Once connected, you can ask Claude to:

Create a mobile app frame 375x812

Add a blue header at the top, 60px tall

Create a text that says "Welcome" in the center

Add a green button at the bottom

Available Tools

Connection

| Tool | Description | |------|-------------| | connect_to_figma | Connect to a Figma plugin using the channel ID | | get_connection_status | Check if connected to Figma |

Document Info

| Tool | Description | |------|-------------| | get_document_info | Get document name and pages | | get_current_page | Get current page and its children | | get_selection | Get currently selected nodes |

Creation

| Tool | Description | Parameters | |------|-------------|------------| | create_rectangle | Create a rectangle | x, y, width, height, fillColor, name | | create_frame | Create a frame (container) | x, y, width, height, fillColor, name | | create_text | Create text | x, y, content, fontSize, fontWeight, fillColor, name | | create_ellipse | Create ellipse/circle | x, y, width, height, fillColor, name |

Modification

| Tool | Description | Parameters | |------|-------------|------------| | move_node | Move a node | nodeId, x, y | | resize_node | Resize a node | nodeId, width, height | | set_fill_color | Change fill color | nodeId, r, g, b, a | | set_corner_radius | Set corner radius | nodeId, radius | | delete_node | Delete a node | nodeId | | set_node_name | Rename a node | nodeId, name | | append_to_frame | Move node into a frame | nodeId, frameId |

Layout

| Tool | Description | Parameters | |------|-------------|------------| | set_auto_layout | Enable auto layout | nodeId, direction (HORIZONTAL/VERTICAL), padding, itemSpacing |

Color Format

Colors use RGB values from 0 to 1:

{
  r: 0.2,   // Red (0-1)
  g: 0.5,   // Green (0-1)
  b: 1.0,   // Blue (0-1)
  a: 1.0    // Alpha/opacity (0-1, optional)
}

Examples:

• Red: { r: 1, g: 0, b: 0 }
• Green: { r: 0, g: 1, b: 0 }
• Blue: { r: 0, g: 0, b: 1 }
• White: { r: 1, g: 1, b: 1 }
• Black: { r: 0, g: 0, b: 0 }

Example Usage

Creating a Simple Mobile Screen

You: Connect to Figma channel figma-abc123

Claude: Connected to Figma!

You: Create a mobile app frame with a blue header and white background

Claude: I'll create that for you.
[Creates frame 375x812]
[Creates rectangle at top with blue fill]
[Sets frame background to white]

You: Add a title "My App" in the header, white text

Claude: [Creates text "My App" centered in header with white fill]

You: Add a rounded button at the bottom that says "Get Started"

Claude: [Creates rectangle with corner radius]
[Creates text "Get Started"]
[Positions at bottom of frame]

NPM Scripts

| Script | Command | Description | |--------|---------|-------------| | npm run build | tsc | Compile TypeScript | | npm run dev | tsc --watch | Watch mode for development | | npm run socket | node dist/websocket/server.js | Start WebSocket server | | npm run start | node dist/mcp-server/index.js | Start MCP server (used by Claude) | | npm run setup | npm run build && echo 'Done' | Build and show instructions |

Project Structure

claude-to-figma/
├── src/
│   ├── figma-plugin/
│   │   ├── manifest.json    # Figma plugin manifest
│   │   ├── code.js          # Plugin main code (Figma API)
│   │   └── ui.html          # Plugin UI (WebSocket client)
│   ├── mcp-server/
│   │   └── index.ts         # MCP server for Claude
│   └── websocket/
│       └── server.ts        # WebSocket relay server
├── dist/                    # Compiled JavaScript
├── package.json
├── tsconfig.json
└── README.md

Troubleshooting

Plugin shows "Connection error"

1. Make sure WebSocket server is running: npm run socket
2. Check server status: curl http://localhost:3055/status
3. Click "Reconnect" in the plugin

"Channel not connected" error

1. Check that Figma plugin is open and shows green "Connected" status
2. Verify you're using the correct channel ID
3. The channel ID changes each time you restart the plugin

Plugin won't import (manifest error)

Make sure the manifest.json has correct networkAccess:

{
  "networkAccess": {
    "allowedDomains": ["*"],
    "reasoning": "Required to connect to local WebSocket server"
  }
}

Commands timeout

1. Check that Figma is the active window
2. Make sure the plugin window is still open
3. Try closing and reopening the plugin

Claude doesn't have the tools

1. Restart Claude Code after adding to settings.json
2. Verify the path in settings.json is correct
3. Check that dist/mcp-server/index.js exists (run npm run build)

Server Status Endpoint

Check server status anytime:

curl http://localhost:3055/status

Response:

{
  "status": "running",
  "channels": ["figma-abc123"],
  "pendingRequests": 0
}

Development

Watch mode

For active development, use watch mode:

npm run dev

This recompiles TypeScript on file changes.

Testing WebSocket directly

You can test commands without Claude:

const WebSocket = require('ws');
const ws = new WebSocket('ws://localhost:3055');

ws.on('open', () => {
  ws.send(JSON.stringify({
    id: 'test-1',
    channelId: 'figma-YOUR-CHANNEL-ID',
    command: 'create_rectangle',
    args: { x: 0, y: 0, width: 100, height: 100 }
  }));
});

ws.on('message', (data) => {
  console.log('Result:', JSON.parse(data));
});

Changelog

Latest Updates

Variable Management (9 new tools)

• create_variable_collection - Create collections with modes (Light/Dark)
• create_variable - Create COLOR, FLOAT, STRING, BOOLEAN variables
• set_variable_value - Set values per mode
• sync_variables_with_page - Compare variables with actual design values
• audit_variable_usage - Find unused variables across document
• extract_variables_from_selection - Extract colors/spacing from selection
• extract_variables_from_page - Extract from current page
• extract_variables_from_project - Extract from entire project
• extract_variables_from_component - Extract from specific component

Plugin UI Improvements

• Added cmds tab with feature command reference
• 12 categories with copyable example commands
• Clicking setup/cmds in mini mode auto-expands
• Mini mode shows only header + log (cleaner)

Total tools: 95+

License

MIT