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
├── version.js         # The package version, read once from package.json
└── tools/
    ├── index.js       # Tool registration with Zod schemas (98 tools — 73 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)
    ├── svg.js         # figma_create_svg validation + currentColor substitution (pure)
    └── components.js  # library import / instance-property argument checks (pure)

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

skills/
└── figma-bridge/
    └── SKILL.md       # Operating guide, served as the MCP resource skill://figma-bridge/SKILL.md

test/                  # node:test suites (npm test)
├── svg.test.js        # SVG validation, currentColor substitution, handleCreateSvg
├── library.test.js    # components.js checks, library/instance handlers, Zod schemas, tool count
└── plugin.test.js     # plugin/code.js in a node:vm sandbox with a fake figma global