Figma MCP Bridge

A custom MCP (Model Context Protocol) server that enables Cursor/Claude to programmatically modify Figma designs through a WebSocket bridge to a Figma plugin.

Architecture

┌─────────────┐     MCP      ┌──────────────┐    WebSocket    ┌──────────────┐
│   Cursor    │ ───────────► │  MCP Server  │ ◄─────────────► │ Figma Plugin │
│   /Claude   │   (stdio)    │  (Node.js)   │   (Port 3055)   │ (Plugin API) │
└─────────────┘              └──────────────┘                 └──────────────┘
                                    │                                │
                              Exposes 70+                    Has write access
                              design tools                   to design files

Quick Start

1. Install Dependencies

cd figma-mcp-bridge
npm install
npm run build

2. Start the Bridge Server

npm run bridge
# Output: WebSocket bridge listening on ws://localhost:3055

3. Install the Figma Plugin

• Open Figma
• Go to Plugins → Development → Import plugin from manifest
• Select figma-plugin/manifest.json
• Run the plugin and note the channel name

4. Configure Cursor MCP

Add to ~/.cursor/mcp.json:

{
  "mcpServers": {
    "FigmaBridge": {
      "command": "node",
      "args": ["/path/to/figma-mcp-bridge/dist/mcp-server/index.js"],
      "env": {
        "BRIDGE_URL": "ws://localhost:3055"
      }
    }
  }
}

5. Connect and Use

1. Restart Cursor to load the MCP server
2. In Cursor, use join_channel with the channel name from the Figma plugin
3. Start using tools like get_document_info, clone_node, set_fill_color, etc.

Available Tools (70+)

Connection

• join_channel - Connect to Figma plugin channel
• leave_channel - Disconnect from channel
• get_status - Get connection status

Document & Pages

• get_document_info - Get full document structure
• get_pages - List all pages
• clone_page - Duplicate entire page
• rename_page - Rename a page
• delete_page - Remove a page

Selection & Query

• get_selection - Get currently selected nodes
• set_selection - Set selection to specific nodes
• get_node_info - Get detailed node properties
• get_children - Get child nodes
• find_nodes_by_type - Find all nodes of specific type

Cloning

• clone_node - Duplicate a node
• deep_clone - Clone with all nested children
• clone_to_page - Clone node to different page

Transforms

• move_node - Set absolute position
• resize_node - Set width and height
• scale_node - Scale proportionally
• rotate_node - Set rotation angle
• set_opacity - Set node opacity
• set_visible - Show/hide node

Styling

• set_fill_color - Set solid fill color
• set_fill_gradient - Set gradient fill
• set_stroke_color - Set stroke color
• set_stroke_weight - Set stroke thickness
• set_corner_radius - Set corner radius

Text

• get_text_content - Get text string
• set_text_content - Set text string
• set_font_family - Change font family
• set_font_size - Set font size
• set_text_align - Set alignment

Auto Layout

• set_auto_layout - Enable/configure auto layout
• set_layout_mode - Set horizontal/vertical
• set_layout_gap - Set spacing
• set_layout_padding - Set padding

Effects

• add_drop_shadow - Add drop shadow
• add_blur - Add blur effect
• remove_effects - Clear all effects

Components

• get_overrides - Get instance overrides
• set_override - Set override property
• detach_instance - Detach from component
• swap_instance - Swap to different component

Export

• export_node_png - Export as PNG
• export_node_svg - Export as SVG

Creation

• create_rectangle - Create rectangle
• create_frame - Create frame
• create_text - Create text node

Development

# Watch mode for both servers
npm run dev

# Run tests
npm test

# Type check
npm run typecheck

Azure Deployment

See infrastructure/azure/ for deployment scripts to host the bridge server on Azure App Service.

License

MIT