FigJam MCP服务器
MCP服务器，使AI代理能够通过配套的Figma插件实时操纵实时FigJam画布。
建筑
AI Agent ↔ MCP Server (stdio) ↔ Bridge (Express + WS) ↔ FigJam Plugin (in Figma)该系统有两个组成部分：
- MCP服务器+网桥 --一个通过stdio传输MCP并运行嵌入式WebSocket网桥服务器的Node.js进程。桥接器将命令中继到FigJam插件并返回结果。
- FigJam插件 -Figma插件运行在FigJam编辑器中，通过WebSocket连接到桥接器，并执行Figma plugin API调用来创建/更新/删除板上的元素。
先决条件
- Node.js>=18
- Figma桌面应用程序 （运行开发插件所需）
- 在Figma中打开FigJam板（或使用
connect_figjam自动创建一个）
快速开始
1.建设项目
npm ci
npm run build2.导入FigJam插件
- 打开Figma桌面
- 打开FigJam板
- 首选 Menu → 插件→ 发展→ 从清单导入插件。..
- 选择
figma-plugin/manifest.json从这个项目 - 该插件将出现在 插件→ 发展→ FigJam MCP
3.运行插件
在您的FigJam板中，从以下位置启动插件 插件→ 发展→ FigJam MCP。它将自动连接到网桥服务器。
4.配置您的MCP客户端
看 MCP客户端配置 在......下面
MCP工具
| 工具 | 说明 |
|---|---|
connect_figjam | 打开一个新的FigJam板，等待插件连接 |
create_sticky | 创建便签（文本、位置、颜色） |
create_shape | 使用文本（类型、位置、大小、颜色）创建形状 |
create_text | 创建文本节点（文本、位置、字体大小） |
create_connector | 使用可选标签连接两个元素 |
create_section | 创建一个用于对元素进行分组的部分 |
update_element | 更新元素属性（位置、大小、文本、颜色） |
delete_element | 按ID删除元素 |
query_elements | 列出元素，可选择按类型筛选 |
validate_layout | 检查连接器是否截断、重叠、漏气和紧固 |
batch_create | 通过交叉引用在一次调用中创建多个元素 |
align_elements | 对齐元素（左/中/右/上/中/下） |
distribute_elements | 以均匀的间距分布元素 |
clear_board | 从电路板上移除所有元件 |
get_board_info | 获取板元数据（页面名称、元素计数） |
export_board | 将电路板导出为PNG或SVG图像 |
MCP资源和提示
| 类型 | 名称 | 描述 |
|---|---|---|
| 资源 | figjam://schema | 元素参考——形状类型、调色板、尺寸、布局规则 |
| 提示 | draw_diagram | 创建结构良好的图表的分步工作流程 |
环境变量
| 变量 | 描述 | 默认值 |
|---|---|---|
BRIDGE_PORT | WebSocket网桥服务器的端口 | 3000 |
MCP客户端配置
GitHub Copilot命令行界面
配置位置： ~/.copilot/mcp-config.json
{
"mcpServers": {
"figjam": {
"command": "node",
"args": ["/absolute/path/to/figjam-mcp/dist/index.js"],
"env": {
"BRIDGE_PORT": "3000"
}
}
}
}克劳德代码
# Claude Code
claude mcp add figjam --scope user \
-e BRIDGE_PORT=3000 \
-- node /absolute/path/to/figjam-mcp/dist/index.js克劳德桌面版
配置位置：
- macOS：
~/Library/Application Support/Claude/claude_desktop_config.json - 窗户：
%APPDATA%\Claude\claude_desktop_config.json
{
"mcpServers": {
"figjam": {
"command": "node",
"args": ["/absolute/path/to/figjam-mcp/dist/index.js"],
"env": {
"BRIDGE_PORT": "3000"
}
}
}
}光标
添加 .cursor/mcp.json 在项目根目录中：
{
"mcpServers": {
"figjam": {
"command": "node",
"args": ["/absolute/path/to/figjam-mcp/dist/index.js"],
"env": {
"BRIDGE_PORT": "3000"
}
}
}
}运作原理
- MCP服务器启动并启动一个嵌入式Express+WebSocket网桥
BRIDGE_PORT - 当你在Figma中运行FigJam插件时，它通过WebSocket连接到网桥
- AI代理调用MCP工具（例如。，
create_sticky) - MCP服务器通过WebSocket向插件发送命令
- 插件执行Figma插件API调用并返回结果
- MCP服务器将结果返回给代理
故障排除
- “FigJam插件未连接” --确保FigJam MCP插件正在Figma编辑器中运行。从插件打开它→ 发展→ FigJam MCP。
- 插件无法连接 --验证网桥服务器是否正在运行（检查运行状况终结点：
curl http://localhost:3000/health).确保端口匹配。 - 命令超时 --命令在15秒后超时。如果插件繁忙或字体加载缓慢（首次创建文本/形状），则可能会出现这种情况。
- 插件未出现在Figma中 --您需要使用Figma Desktop应用程序。通过开发导入插件→ 从清单导入插件，指向
figma-plugin/manifest.json.
发展
npm run type-check # Type-check without emitting
npm run dev # Watch mode for server code
npm run build # Build everything (server + plugin)
npm run build:server # Build server only
npm run build:plugin # Build plugin only测试
node test/integration.mjs # Run integration tests许可证
麻省理工学院