AI导哈

Figma MCP插件

一个包含72种工具的模型上下文协议（MCP）服务器，用于连接AI助手与Figma，实现程序化创建和修改设计。

  • by uxmynd
  • TypeScript
  • 本地部署
  • 6 星标
  • 更新于
在 GitHub 查看 uxmynd/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）

类别 计数 工具
连接 1 join_channel
文档和页面 6 get_document_info, get_selection, get_pages, set_current_page, create_page, delete_page
创建节点 12 create_frame, create_rectangle, create_ellipse, create_line, create_polygon, create_star, create_text, create_component, create_component_set, create_instance, create_boolean_operation, create_section
读取节点 8 get_node_by_id, get_nodes_in_frame, get_local_components, get_local_styles, get_local_variables, get_variable_collections, scan_nodes, export_node
变换 8 move_node, resize_node, set_rotation, rename_node, clone_node, delete_node, set_visible, set_locked
填充和笔划 6 set_fill_color, set_gradient_fill, set_image_fill, set_stroke_color, set_stroke_weight, remove_fill
效果 6 set_opacity, set_corner_radius, set_blend_mode, add_drop_shadow, add_inner_shadow, add_blur
文本 8 set_font_family, set_font_size, set_font_weight, set_font_style, set_text_content, set_text_align, set_line_height, set_letter_spacing
自动布局 8 set_auto_layout, remove_auto_layout, set_layout_sizing, set_layout_padding, set_layout_spacing, set_layout_align, insert_in_auto_layout, set_layout_wrap
组织 5 group_nodes, ungroup_nodes, flatten_node, set_parent, set_constraints
变量 3 create_variable, set_variable_value, bind_variable
导航 1 zoom_to_node

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

构建命令

命令 描述
npm run build 构建一切
npm run build:server 仅构建MCP服务器
npm run build:plugin 仅构建Figma插件
npm run start:broker 启动WebSocket代理（端口3055）
npm run start:http 启动HTTP网桥（端口3056）
npm run watch:plugin 插件开发的监视模式
npm run watch:server 服务器开发的监视模式

交叉平台的

所有配置文件都使用 相对路径 -无需修改即可在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 <number> /F

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

文档

许可证

国际学生委员会

相关 MCP