design-copilot

Zero-config MCP server for controlling Figma. 80 tools for reading, creating, and modifying designs programmatically.

Architecture

MCP Client  ──(stdio)──>  MCP Server + WebSocket relay (port 3055)  <──(ws)──  Figma Plugin

Two processes. No relay to start separately. No channels. No config.

How it compares

| | cursor-talk-to-figma-mcp | design-copilot | |---|---|---| | Setup steps | 5 (install Bun, setup, start WebSocket, install plugin, join channel) | 3 (add MCP, import plugin, open plugin) | | Separate WebSocket server | Yes — must keep bun socket running | No — embedded in MCP server | | Channel management | Manual (join_channel) | Automatic | | Runtime | Bun | Node.js (npx) | | Tools | ~40 | 80 |

Quick Setup

1. Install (one-time)

Auto-setup for Claude Desktop + Cursor — one command does everything:

npx -y design-copilot setup

This automatically adds Design Copilot to your Claude Desktop and Cursor configs. Restart the app after running.

Or set up individually:

claude mcp add design-copilot -- npx -y design-copilot

Edit ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "design-copilot": {
      "command": "npx",
      "args": ["-y", "design-copilot"]
    }
  }
}

Add to ~/.cursor/mcp.json (or equivalent):

{
  "mcpServers": {
    "design-copilot": {
      "command": "npx",
      "args": ["-y", "design-copilot"]
    }
  }
}

2. Import Figma plugin (one-time)

1. Download/clone this repo
2. In Figma: Plugins > Development > Import plugin from manifest
3. Select src/plugin/manifest.json

3. Open plugin in Figma (per-session)

Open the plugin in Figma. It auto-connects — no clicks needed. You'll see a green "Connected" status.

That's it. Start using tools like get_document_info, create_rectangle, etc.

Tools (80)

Document (5)

get_document_info, get_selection, read_my_design, get_node_info, get_nodes_info

Creation (6)

create_rectangle, create_frame, create_ellipse, create_line, create_text, create_component_instance

Styling (10)

set_fill_color, set_stroke_color, set_corner_radius, set_opacity, set_rotation, set_blend_mode, set_drop_shadow, set_inner_shadow, set_blur, get_styles

Layout (8)

set_layout_mode, set_padding, set_axis_align, set_layout_sizing, set_item_spacing, set_clip_content, set_auto_layout_child_props, set_grid

Node Operations (12)

move_node, resize_node, delete_node, delete_multiple_nodes, clone_node, rename_node, set_visible, set_locked, group_nodes, ungroup_nodes, reorder_node, reparent_node

Text (5)

set_text_content, scan_text_nodes, set_multiple_text_contents, set_text_style_properties, set_text_range_style

Components (9)

create_component, convert_to_component, create_component_set, add_component_property, add_variant, detach_instance, get_local_components, get_instance_overrides, set_instance_overrides

Annotations (4)

get_annotations, set_annotation, set_multiple_annotations, scan_nodes_by_types

Export (4)

export_node_as_image, export_selection, screenshot_viewport, export_multiple_nodes

Navigation (2)

set_focus, set_selections

Connections (3)

get_reactions, set_default_connector, create_connections

Pages (3)

get_pages, set_current_page, create_page

Design Tokens (1)

get_design_tokens

Style Management (3)

create_paint_style, create_text_style, apply_style

Variants (2)

switch_variant, get_component_properties

Batch (1)

execute_batch

Lint (1)

lint_design

Diagnostics (1)

check_connection

Advanced

Custom port

Set the FIGMA_WS_PORT env var or pass --port=<number>:

{
  "mcpServers": {
    "design-copilot": {
      "command": "npx",
      "args": ["-y", "design-copilot", "--port=4000"]
    }
  }
}

The plugin has a Settings panel (gear icon) to change the port on the Figma side.

Troubleshooting

Plugin shows "Disconnected":

• Make sure the MCP server is running (your AI tool starts it automatically)
• Check that the port matches (default: 3055)
• If another process is using port 3055: lsof -ti:3055 | xargs kill

Port already in use:

• Use a different port: --port=4000 in MCP config + change port in plugin settings
• Or kill the stale process: lsof -ti:3055 | xargs kill

Development

npm install
npm run build     # Build once
npm run dev       # Watch mode

Author

Ankish Khatri

License

MIT