Figma MCP Bridge

Figma MCP电桥

一个模型上下文协议（MCP）服务器，使Claude能够读取和操作 Figma设计文件和FigJam文件 通过WebSocket桥实时连接到Figma插件。

特性

• 88次操作 -63个Figma设计工具+21个FigJam工具（便签、流程图形状、连接器、表格、代码块、链接预览）+4个原型工具（反应、流程起点）
• 在两个编辑器中工作 -自动检测您是在Figma设计文件还是FigJam中，并相应地门控编辑器特定的命令（FigJam仅限粘性/连接器/表格工具；Figma design仅限原型工具）
• 实时双向通信 -更改立即出现在Figma/FigJam中
• 令牌优化查询 -AI交互的高效变量搜索和节点遍历
• 完整的Figma API访问 -样式、变量、自动布局、布尔运算，以及FigJam图表和文档

建筑

Claude Code ←──stdio──→ MCP Server ←──WebSocket──→ Figma Plugin ←──→ Figma API
                        (Node.js)    localhost:3055    (runs in Figma)

快速开始

先决条件

• Node.js 18+
• Figma桌面应用程序
• 克劳德代码CLI或克劳德桌面

安装

选项A：从npm安装（推荐）

对于Claude Code CLI：

claude mcp add figma-mcp-bridge -- npx @magic-spells/figma-mcp-bridge

对于Claude Desktop：

编辑您的配置文件：

• macOS： ~/Library/Application Support/Claude/claude_desktop_config.json
• 窗户： %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "figma-mcp-bridge": {
      "command": "npx",
      "args": ["-y", "@magic-spells/figma-mcp-bridge"]
    }
  }
}

然后重新启动Claude Desktop。

安装Figma插件：

• 下载 plugin 此仓库中的文件夹
• 在Figma中： 插件→ 发展→ 从清单导入插件
• 选择 plugin/manifest.json

连接：

• 打开Figma文件
• 运行插件： 插件→ 发展→ 克劳德·菲格马大桥
• 状态应显示“已连接”

选项B：从源代码安装

1. 克隆存储库

   git clone https://github.com/magic-spells/figma-mcp-bridge.git
   cd figma-mcp-bridge
   npm install

1. 添加到克劳德代码

   claude mcp add figma-mcp-bridge node /path/to/figma-mcp-bridge/src/index.js

1. 安装Figma插件

- 在Figma中： 插件→ 发展→ 从清单导入插件 - 选择 plugin/manifest.json 来自克隆仓库

1. 连接

- 打开Figma文件 - 运行插件： 插件→ 发展→ 克劳德·菲格马大桥 - 状态应显示“已连接”

配置

环境变量

自动批准Figma工具

添加 .claude/settings.local.json:

{
  "permissions": {
    "allow": ["mcp__figma-mcp-bridge__*"]
  }
}

______________________________________________________________________

命令参考

查询命令

figma_server_info

获取有关MCP服务器的信息：包版本、WebSocket端口、连接状态和连接的文档信息。有助于确认代码更改或升级后正在运行哪个版本的服务器。

退货： { version, port, connected, documentInfo }

figma_get_context

获取当前Figma文档上下文，包括文件信息、当前页面和所选内容。

figma_list_pages

列出当前Figma文档中的所有页面。

figma_get_nodes

通过特定节点的ID获取其详细信息。

figma_get_local_styles

列出文档中定义的所有本地样式。

figma_get_local_variables

获取所有局部变量和变量集合。

备注：可以返回25k+代币。更喜欢 figma_search_variables 为了提高效率。

figma_get_children

获取节点的直接子节点。一次浏览一个层次结构的效率很高。

figma_search_nodes

在范围内按名称搜索节点。 首选用于查找特定的框架、部分或元素。

返回~50个令牌/节点，而完整节点数据返回~500个。

figma_search_components

按名称搜索本地组件。在查找“按钮”、“标题”等特定组件时使用。

figma_search_styles

按名称搜索本地样式。比 figma_get_local_styles 在寻找特定风格时。

______________________________________________________________________

创建命令

figma_create_rectangle

创建一个新的矩形。

figma_create_ellipse

创建椭圆、圆、弧或环。

figma_create_line

创建一条线。

figma_create_frame

创建框架容器（支持自动布局）。

figma_create_text

创建文本节点。

figma_clone_nodes

克隆（重复）节点。

figma_create_component

创建可重用组件。

figma_create_instance

创建组件的实例。

______________________________________________________________________

样式命令

figma_set_fills

在节点上设置填充颜色。

颜色格式：

• 十六进制： { color: "#FF0000" } 或 { color: "#FF0000AA" } （带alpha）
• RGB： { r: 1, g: 0, b: 0, a: 0.5 }
• 完整阵列： [{ type: "SOLID", color: { r, g, b }, opacity: 1 }]

figma_set_strokes

在节点上设置笔划颜色。

figma_set_text

在文本节点上设置文本内容。

figma_set_opacity

设置节点透明度。

figma_set_corner_radius

设置拐角半径。

figma_set_effects

设置效果（阴影、模糊）。

阴影效果：

{
  "type": "DROP_SHADOW",
  "color": { "color": "#000000" },
  "offset": { "x": 0, "y": 4 },
  "radius": 8,
  "spread": 0,
  "visible": true
}

模糊效果：

{
  "type": "LAYER_BLUR",
  "radius": 10,
  "visible": true
}

figma_apply_style

将局部样式应用于节点。

figma_set_variable

设置变量值或绑定到节点属性。

figma_set_text_style

在现有文本节点上设置文本字体属性。

figma_create_paint_style

创建本地绘画（颜色）样式。

figma_create_text_style

创建本地文本样式。

______________________________________________________________________

布局命令

figma_set_auto_layout

在框架上配置自动布局。

figma_set_layout_align

在自动布局中设置子对齐方式。

______________________________________________________________________

变换命令

figma_move_nodes

将节点移动到新位置。

figma_resize_nodes

调整节点大小。

figma_delete_nodes

删除节点。

figma_group_nodes

将多个节点分组。

figma_ungroup_nodes

取消组节点的分组。

figma_rename_node

重命名节点。

figma_reorder_node

更改z顺序（图层顺序）。

figma_set_constraints

设置调整大小约束（仅限非自动布局框架）。

______________________________________________________________________

导航命令

figma_set_selection

设置当前选择。

figma_set_current_page

切换到其他页面。

______________________________________________________________________

导出命令

figma_export_node

将节点导出为图像。

返回base64编码的数据。

______________________________________________________________________

组件命令

figma_detach_instance

从组件中分离实例（转换为框架）。

figma_swap_instance

交换组件实例以使用其他组件。

figma_combine_as_variants

将多个组件组合到具有变体的组件集中。

______________________________________________________________________

变量管理命令

figma_create_variable_collection

创建一个新的变量集合来组织变量。

figma_create_variable

在集合中创建一个新变量。

figma_rename_variable

重命名现有变量。

figma_delete_variables

删除一个或多个变量。

figma_rename_variable_collection

重命名变量集合。

figma_delete_variable_collection

删除变量集合及其所有变量。

figma_add_mode

向变量集合添加新模式。

figma_rename_mode

重命名变量集合中的模式。

figma_delete_mode

从变量集合中删除模式。

figma_unbind_variable

从节点属性中删除变量绑定。

______________________________________________________________________

页面管理命令

FigJam限制： figma_create_page 和 figma_duplicate_page 是 仅适用于Figma设计FigJam插件运行时不公开 figma.createPage() 或 PageNode.clone().FigJam文件可以有多个页面，但它们必须通过FigJam UI创建——插件不能以编程方式创建它们。在FigJam中调用这些工具会返回 FIGMA_DESIGN_ONLY。其他页面操作（重命名、删除、列出、切换当前页面）在两个编辑器中都有效。

figma_create_page

在文档中创建新页面。 仅适用于Figma设计。

figma_rename_page

重命名现有页面。

figma_delete_page

从文档中删除一页。

备注：无法删除最后一个剩余页面。

figma_duplicate_page

克隆整个页面，包括其所有内容。 仅适用于Figma设计。

______________________________________________________________________

FigJam命令

这些工具仅针对FigJam节点类型（便签、流程图形状、连接器、表格、代码块、链接预览）。他们回来了 WRONG_EDITOR 如果针对Figma设计文件调用。 章节(figma_create_section / figma_set_section)是例外，他们在两个编辑器中都工作。

figma_create_sticky

制作一张便签。默认大小是固定的（240×240）；宽度/高度不可配置。文本通过嵌入式子层设置（字体自动加载）。

作者信息在运行时是只读的。 Figma的插件文档列表 authorName 和 authorVisible 随着R/W的开启 StickyNode，但FigJam运行时拒绝使用“属性没有设置器”的写入。Figma会根据活动用户的身份自动填充两者，因此标签无需程序控制即可正常工作。

figma_set_sticky

在方形和宽矩形变体之间切换粘性。使用 figma_set_text 更改正文。

figma_create_shape_with_text

创建带有嵌入文本的流程图形状。使用 ROUNDED_RECTANGLE 对于过程， DIAMOND 对于决策， ENG_DATABASE 用于数据存储。 cornerRadius 由以下方式固定 shapeType 并且不能设置。

形状类型（30个值）： SQUARE, ELLIPSE, ROUNDED_RECTANGLE, DIAMOND, TRIANGLE_UP, TRIANGLE_DOWN, PARALLELOGRAM_RIGHT, PARALLELOGRAM_LEFT, ENG_DATABASE, ENG_QUEUE, ENG_FILE, ENG_FOLDER, TRAPEZOID, PREDEFINED_PROCESS, SHIELD, DOCUMENT_SINGLE, DOCUMENT_MULTIPLE, MANUAL_INPUT, HEXAGON, CHEVRON, PENTAGON, OCTAGON, STAR, PLUS, ARROW_LEFT, ARROW_RIGHT, SUMMING_JUNCTION, OR, SPEECH_BUBBLE, INTERNAL_STORAGE.

figma_set_shape_type

使用文本节点更改现有形状的形状变体。

figma_create_connector

在节点之间创建箭头/连接器。默认 endCap 是 ARROW_EQUILATERAL 因此，连接器在没有配置的情况下看起来像箭头。端点可以通过磁铁、节点上的固定位置或画布上的自由浮动来连接。

端点形状 （其中之一）：

• { nodeId, magnet } --用磁铁连接到节点(AUTO, TOP, LEFT, BOTTOM, RIGHT, CENTER, NONE)
• { nodeId, position: { x, y } } --在相对于节点的固定位置附着到节点
• { position: { x, y } } --在画布上以绝对坐标自由浮动

行程上限： NONE, ARROW_EQUILATERAL, ARROW_LINES, TRIANGLE_FILLED, CIRCLE_FILLED, DIAMOND_FILLED.

磁铁规则： STRAIGHT 仅支持连接器 CENTER 或 NONE 磁铁。 ELBOWED 和 CURVED 接受全部六个。验证在服务器端运行。

figma_set_connector

修改现有连接器的端点、线型、端盖或标签。

figma_create_section

创建一个带标签的部分。 适用于Figma设计文件和FigJam。 支持开发模式切换状态。

figma_set_section

更新节的名称、开发状态或内容可见性。通过 devStatus: null 以清除它。

figma_create_table

为文档或结构化数据创建表。可选择种子初始细胞含量。

figma_set_table_cell

设置单个表格单元格的文本和/或填充颜色。

figma_insert_table_row / figma_insert_table_column

在给定索引处插入行/列（索引移位处和之后的现有行/列）。

figma_remove_table_row / figma_remove_table_column

删除行/列。

figma_resize_table_row / figma_resize_table_column

设置行高/列宽。

figma_move_table_row / figma_move_table_column

重新排序行/列。

figma_create_code_block

为文档创建一个语法突出显示的代码块。

语言（17个值）： TYPESCRIPT, CPP, RUBY, CSS, JAVASCRIPT, HTML, JSON, GRAPHQL, PYTHON, GO, SQL, SWIFT, KOTLIN, RUST, BASH, PLAINTEXT, DART.

figma_set_code_block

更新现有代码块的代码文本或语言。

figma_create_link_preview

从URL创建富链接预览。返回 EMBED （iframe；适用于YouTube/Spotify等OEmbed提供商）或 LINK_UNFURL （来自OpenGraph/Twitter card元数据的富卡）——响应包括 nodeType 所以来电者知道是哪一个。

构建端到端的流程图

// 1. Section to wrap the diagram
figma_create_section({ x: 0, y: 0, width: 1000, height: 600, name: "User signup flow" })
// → returns { node: { id: 'XX:1', ... } }

// 2. Process steps as shapes-with-text
figma_create_shape_with_text({
  x: 40, y: 80, width: 200, height: 80,
  shapeType: 'ROUNDED_RECTANGLE',
  text: 'Start',
  parentId: 'XX:1'
})
figma_create_shape_with_text({
  x: 320, y: 80, width: 200, height: 120,
  shapeType: 'DIAMOND',
  text: 'Email valid?',
  parentId: 'XX:1'
})
// ...etc.

// 3. Connectors between them
figma_create_connector({
  start: { nodeId: 'XX:2', magnet: 'AUTO' },
  end:   { nodeId: 'XX:3', magnet: 'AUTO' },
  lineType: 'ELBOWED',
  parentId: 'XX:1'
})
// endCap defaults to ARROW_EQUILATERAL — you get an arrow without specifying

// 4. Add a sticky for context
figma_create_sticky({
  x: 600, y: 80,
  text: 'TODO: rate-limit this endpoint',
  parentId: 'XX:1'
})

FigJam节点类型无法通过此MCP创建

STAMP, HIGHLIGHT, WASHI_TAPE, WIDGET，以及 MEDIA 无法从非小部件插件创建（Figma的API不公开工厂方法，或者需要预先上传的图像哈希）。它们仍然可以通过现有的工具进行克隆、移动、删除和序列化，只是不能从头开始创建。

______________________________________________________________________

原型命令

这些工具在上建立了原型交互 Figma 设计 节点。他们在 reactions 数组（通过读/写 setReactionsAsync)以及页面级别 flowStartingPoints 列表。它们不适用于FigJam文件。

figma_get_reactions

读取节点上当前设置的所有反应。

返回完整 reactions 数组，包括每个反应的触发和动作细节。

figma_add_reaction

向节点添加原型交互。现有的反应被保留下来——每次调用都会附加一个新的反应。

触发器类型：

device 值为 ON_KEY_DOWN: KEYBOARD （默认）， XBOX_ONE, PS4, SWITCH_PRO, UNKNOWN_CONTROLLER.

动作类型：

对于 NODE 行动 navigation 字段控制行为：

过渡对象 （可选，用于 NODE 操作）：

示例--单击以使用幻灯片过渡进行导航：

figma_add_reaction({
  nodeId: '10:5',
  trigger: { type: 'ON_CLICK' },
  action: {
    type: 'NODE',
    destinationId: '10:20',
    navigation: 'NAVIGATE',
    transition: {
      type: 'SLIDE_IN',
      direction: 'LEFT',
      duration: 0.3,
      easing: { type: 'EASE_OUT' }
    }
  }
})

示例——3秒后自动前进：

figma_add_reaction({
  nodeId: '10:5',
  trigger: { type: 'AFTER_TIMEOUT', timeout: 3000 },
  action: {
    type: 'NODE',
    destinationId: '10:30',
    navigation: 'NAVIGATE',
    transition: { type: 'DISSOLVE', duration: 0.5, easing: { type: 'EASE_IN_AND_OUT' } }
  }
})

figma_remove_reaction

通过从零开始的索引从节点中删除反应。使用 figma_get_reactions 首先要确定索引。

figma_set_flow_starting_point

设置或清除原型流起点。流起点是页面级的——Figma将它们存储在父节点上 PageNode 作为列表 { nodeId, name } 条目。在未选择任何内容的情况下进入演示视图时，第一个条目是默认值。

顶层框架（页面的直接子级）是典型的起点。Figma打字标记 PageNode.flowStartingPoints 作为 ReadonlyArray，但运行时接受直接赋值——这是该工具内部使用的有记录的（如果古怪的话）模式。

______________________________________________________________________

结构命令

figma_reparent_nodes

将节点移动到其他父容器。

figma_move_to_page

将节点从其当前页面移动到其他页面。

figma_set_rotation

设置一个或多个节点的旋转。

______________________________________________________________________

令牌优化

变量查询

使用 figma_search_variables 而不是 figma_get_local_variables:

// Inefficient (~25k+ tokens)
figma_get_local_variables({ type: 'ALL' })

// Efficient (~500 tokens)
figma_search_variables({
  namePattern: 'tailwind/orange/*',
  type: 'COLOR',
  compact: true,
  limit: 50
})

figma_search_variables 参数：

节点遍历

使用 depth 参数在 figma_get_nodes:

查找节点

使用搜索工具，而不是遍历整个树：

// Find nodes by name within a page/frame
figma_search_nodes({
  parentId: '1:2',           // Required scope
  nameContains: 'button',    // Case-insensitive
  types: ['FRAME', 'COMPONENT'],
  compact: true
})

// Browse hierarchy one level at a time
figma_get_children({ parentId: '1:2' })

// Find components by name
figma_search_components({ nameContains: 'Header' })

// Find styles by name
figma_search_styles({ nameContains: 'primary', type: 'PAINT' })

______________________________________________________________________

已知限制

• 无ES6扩频算子 在插件代码中
• 布尔运算 需要具有相同父节点的节点
• 约束 不要在自动布局子对象上工作（使用 layoutAlign)
• 线条 高度=0，使用 length 参数
• 矢量 仅支持M、L、Q、C、Z命令（无圆弧）
• detachInstance() 还分离祖先实例
• 30秒超时 在所有命令上

______________________________________________________________________

故障排除

插件未连接

1. 确保MCP服务器正在运行。
2. 问克劳德桥在哪个港口 -MCP服务器通过 instructions 会话初始化中的字段，Claude将在以下情况下主动显示它 figma_get_context 报告 connected: false。您也可以致电 figma_server_info 直接看到港口。
3. 在Figma插件UI的端口输入中匹配该端口。
4. 在Figma中重新运行插件(Cmd+Option+P).

端口已在使用中

服务器会自动按顺序尝试端口3055-3070。如果有多个会话正在运行，实际绑定端口可能与默认端口不同。要强制使用特定端口，请执行以下操作：

FIGMA_BRIDGE_PORT=3057 node src/index.js

多个Claude代码实例

每个Claude Code实例都会生成自己的MCP服务器，并绑定到3055-3070范围内的下一个可用端口。网桥会自动处理此问题：

1. 根据需要启动尽可能多的Claude Code会话——每个会话都选择一个开放端口。
2. 在每个会话中询问克劳德它在哪个端口 （或致电 figma_server_info).MCP服务器的指令告诉Claude在未连接时显示此信息。
3. 在每个Figma文件的插件实例中： 键入匹配的端口号，然后单击“连接”。

您可以确认给定会话使用的是哪个版本+端口 figma_server_info --它回来了 { version, port, connected, documentInfo }.

命令超时

• 命令有30秒的超时时间
• 大型出口可能会超时；尝试更小的规模
• 检查插件是否仍连接（绿色状态）

字体错误

文本操作需要加载字体。插件会自动处理此问题，但如果未安装字体，它将失败。使用系统上可用的字体。

______________________________________________________________________

许可证

麻省理工学院

______________________________________________________________________

Made by Cory Schulz