AI导哈

FigJam实时画布操控工具

一个通过Figma插件使AI代理能够实时操作FigJam画布的MCP服务器。

  • by tiagonbotelho
  • JavaScript
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 tiagonbotelho/figjam_mcp

使用说明

FigJam MCP服务器

MCP服务器，使AI代理能够通过配套的Figma插件实时操纵实时FigJam画布。

建筑

AI Agent ↔ MCP Server (stdio) ↔ Bridge (Express + WS) ↔ FigJam Plugin (in Figma)

该系统有两个组成部分：

  1. MCP服务器+网桥 --一个通过stdio传输MCP并运行嵌入式WebSocket网桥服务器的Node.js进程。桥接器将命令中继到FigJam插件并返回结果。
  2. FigJam插件 -Figma插件运行在FigJam编辑器中，通过WebSocket连接到桥接器，并执行Figma plugin API调用来创建/更新/删除板上的元素。

先决条件

  • Node.js>=18
  • Figma桌面应用程序 （运行开发插件所需）
  • 在Figma中打开FigJam板（或使用 connect_figjam 自动创建一个）

快速开始

1.建设项目

npm ci
npm run build

2.导入FigJam插件

  1. 打开Figma桌面
  2. 打开FigJam板
  3. 首选 Menu → 插件→ 发展→ 从清单导入插件。..
  4. 选择 figma-plugin/manifest.json 从这个项目
  5. 该插件将出现在 插件→ 发展→ 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"
      }
    }
  }
}

运作原理

  1. MCP服务器启动并启动一个嵌入式Express+WebSocket网桥 BRIDGE_PORT
  2. 当你在Figma中运行FigJam插件时，它通过WebSocket连接到网桥
  3. AI代理调用MCP工具（例如。， create_sticky)
  4. MCP服务器通过WebSocket向插件发送命令
  5. 插件执行Figma插件API调用并返回结果
  6. 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

许可证

麻省理工学院

相关 MCP