figma-pilot

Zero-config MCP server for controlling Figma. 45+ 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.

Setup (3 steps)

1. Install MCP server (one-time)

claude mcp add figma-pilot -- npx -y figma-pilot

Or add manually to your MCP config:

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

2. Import Figma plugin (one-time)

In Figma: Plugins > Development > Import plugin from manifest → 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 (44)

Document (5)

get_document_info, get_selection, read_my_design, get_node_info, get_nodes_info

Creation (4)

create_rectangle, create_frame, create_text, create_component_instance

Styling (4)

set_fill_color, set_stroke_color, set_corner_radius, get_styles

Layout (5)

set_layout_mode, set_padding, set_axis_align, set_layout_sizing, set_item_spacing

Node Operations (5)

move_node, resize_node, delete_node, delete_multiple_nodes, clone_node

Text (3)

set_text_content, scan_text_nodes, set_multiple_text_contents

Components (3)

get_local_components, get_instance_overrides, set_instance_overrides

Annotations (4)

get_annotations, set_annotation, set_multiple_annotations, scan_nodes_by_types

Export (1)

export_node_as_image

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

Presets (1)

create_auto_layout_preset (card, navbar, grid, stack, button, form-field)

Style Management (3)

create_paint_style, create_text_style, apply_style

Variants (2)

switch_variant, get_component_properties

Advanced

Custom port

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

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

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

Development

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

Author

Ankish Khatri

License

MIT