Figma Desktop Bidirectional MCP

Figma MCP插件

A. 配备72个工具的模型上下文协议（MCP）服务器 它将AI助手连接到Figma，以编程方式创建和修改设计。

使用 克劳德代码，光标，风帆，助手 以及任何与MCP兼容的工具。还提供了 HTTP REST API 用于非MCP工具，如Python脚本、curl或自定义集成。

学分

从零开始构建，灵感来自并感激：

他们的开源工作使这个项目成为可能。非常感谢。

建筑

AI Assistant → MCP Server (stdio) ──→ WebSocket Broker (port 3055) ──→ Figma Plugin → Figma API
                                           ↑
              HTTP Bridge (port 3056) ─────┘  (for non-MCP tools)

通道系统

该插件使用基于通道的连接系统来提供可靠的多会话支持：

1. 插件连接到代理并生成唯一的通道ID（例如。， figma-a3f7k)
2. 用户从插件UI复制频道ID
3. AI工具通过以下方式加入频道 join_channel
4. 所有消息都在通道内路由-多个会话可以同时运行

快速开始

# 1. Install & Build
npm install
npm run build

# 2. Start the broker
npm run start:broker

# 3. Load plugin in Figma Desktop
#    Plugins → Development → Import plugin from manifest → select manifest.json

# 4. Click "Connect" in plugin UI → Copy the channel ID

# 5. Tell your AI tool to join the channel
#    "Join Figma channel figma-xxxxx"

使用HTTP网桥（适用于非MCP工具）

# Start both broker + HTTP bridge
# Windows: double-click start-http-bridge.bat
# Or manually:
npm run start:broker    # terminal 1
npm run start:http      # terminal 2

# Join a channel
curl -X POST http://localhost:3056/join-channel \
  -H "Content-Type: application/json" \
  -d '{"channel":"figma-xxxxx"}'

# Send commands
curl -X POST http://localhost:3056/command \
  -H "Content-Type: application/json" \
  -d '{"command":"get_document_info"}'

curl -X POST http://localhost:3056/command \
  -H "Content-Type: application/json" \
  -d '{"command":"create_rectangle","params":{"x":100,"y":100,"width":200,"height":100,"fillColor":{"r":0.2,"g":0.4,"b":0.9,"a":1}}}'

可用工具（72）

MCP配置

克劳德代码/光标（项目级）

已在中配置 .claude/mcp.json构建完成后，只需重新加载编辑器即可。

对于Claude Code，您还需要 用户级权限 -看 权限指南.

Claude Desktop（需要绝对路径）

编辑 claude_desktop_config.json:

• 视窗: %APPDATA%\Claude\claude_desktop_config.json
• 苹果电脑: ~/Library/Application Support/Claude/claude_desktop_config.json

{
  "mcpServers": {
    "figma": {
      "command": "node",
      "args": ["/full/path/to/figma-mcp-plugin/dist/server/index.js"]
    }
  }
}

通过在项目目录中运行来获取绝对路径：

• 视窗: echo %cd%\dist\server\index.js
• Mac/Linux: echo $(pwd)/dist/server/index.js

其他工具

看 MCP连接指南 适用于光标、助手、风帆等。

项目结构

server/
  index.ts          - MCP server with 72 tool definitions
  broker.ts         - Channel-aware WebSocket message broker
  websocket.ts      - WebSocket client with channel support
  http-bridge.ts    - HTTP REST API (port 3056)
  types.ts          - Shared TypeScript types
plugin/
  code.ts           - Figma plugin with 71 command handlers
  ui.html           - Plugin UI (Connect, channel ID, Copy button)
docs/               - Setup guides and documentation

构建命令

交叉平台的

所有配置文件都使用 相对路径 -无需修改即可在Windows、macOS和Linux上运行。

故障排除

插件无法连接

• 确保代理首先运行： npm run start:broker
• 点击插件UI中的“连接”

AI助手中未显示工具

• 重建： npm run build
• 对于克劳德代码：添加 mcp__figma-custom 到 ~/.claude/settings.json 权限
• 重新加载编辑器

端口3055已在使用中

# Windows
netstat -ano | findstr :3055
taskkill /PID  /F

# Mac/Linux
lsof -ti:3055 | xargs kill -9

文档

• 快速开始 -5分钟设置
• 权限指南 -Claude Code的用户级权限
• MCP连接指南 -配置任何AI工具
• 其他AI工具 -AI助手集成指南

许可证

国际学生委员会