figma-mcp-bridge: Instructions file for Claude Code

Figma MCP Bridge - Developer Guide

MCP server enabling Claude to read and manipulate Figma design files AND FigJam files via WebSocket bridge to a Figma plugin. Supports flowcharts, diagrams, sticky notes, tables, code blocks, and link previews in FigJam alongside the full Figma design toolset — plus prototype interactions (reactions, flow starting points) in Figma Design files.

Tech Stack

• Node.js (ES modules)
• @modelcontextprotocol/sdk for MCP protocol
• ws for WebSocket
• Zod for schema validation

Architecture

Claude Code ←──stdio──→ MCP Server ←──WebSocket──→ Figma Plugin ←──→ Figma API
                        (Node.js)     ws://localhost:3055    (runs in Figma)

File Structure

src/
├── index.js           # Entry point - starts WebSocket + MCP servers
├── server.js          # MCP server setup (McpServer configuration)
├── websocket.js       # FigmaBridge class - WebSocket connection management
└── tools/
    ├── index.js       # Tool registration with Zod schemas (93 tools — 68 Figma + 21 FigJam + 4 Prototype)
    ├── context.js     # figma_get_context handler
    ├── pages.js       # figma_list_pages handler
    ├── nodes.js       # figma_get_nodes handler
    └── mutations.js   # All mutation handlers (Figma + FigJam + Prototype)

plugin/
├── manifest.json      # Figma plugin configuration
├── code.js            # Main plugin - Figma API command handlers
└── ui.html            # WebSocket UI (runs in iframe)

Adding New Commands

1. Add handler in src/tools/mutations.js

export async function handleNewCommand(bridge, args) {
  if (!bridge.isConnected()) {
    return { error: { code: 'NOT_CONNECTED', message: '...' }, isError: true };
  }

  try {
    const result = await bridge.sendCommand('new_command', args);
    return { content: [{ type: 'text', text: JSON.stringify(result, null, 2) }] };
  } catch (error) {
    return { error: { code: error.code || 'ERROR', message: error.message }, isError: true };
  }
}