SuperAPI AI 工具集

figma-bridge

设计与创作

查看项目

更新于 10-16 05:47

技能介绍

用途:通过 figma-bridge MCP(Figma 插件加本地服务器)读取和编辑实时 Figma 文件,不依赖 Figma REST API,因此没有 API 速率限制。适用于能在 Figma 中打开插件的文件;无法在 Figma 打开的文件才回退到基于 REST API 的 Framelink。

主要能力与用法:

  1. 握手:先调用 list_files,它返回已打开插件文件的 [{fileKey, fileName}];无结果则请用户在目标文件运行插件(Figma → Plugins → Development → Figma MCP Bridge),不要循环重试。多文件连接时每次调用都要传 fileKey。
  2. 分层读取:先 get_design_context({depth: 2, fileKey}) 定位选中项或当前页面;用 find_nodes 或 get_node_by_path 按名称或路径定位节点;再用 get_node({nodeId, depth, fields, fileKey}) 逐层下钻,配合 fields 只取所需字段(如文本样式、布局 bounds、fills 等)。大帧可用 save_children_json 写磁盘后再 grep 或 jq。
  3. 视觉核对:get_screenshot 输出 PNG,用 Read 查看;多节点用 save_screenshots;image_fill_export 可将 IMAGE 填充哈希转为 PNG。
  4. 设计到代码流程:定位选中帧并截图,读取所需子节点字段,实现后截图对比再汇报。
  5. 编辑与指向:set_、create_、reparent_nodes、group_nodes、duplicate_nodes 仅在插件处于设计编辑器时可写,Dev Mode 只读;delete_nodes 需 confirm: true;create_image 建议传绝对路径;set_selection 与 scroll_and_zoom_into_view 在 Dev Mode 也可用。

限制与常见错误:读取结果超出上下文会被保存到文件并报错,应改用分层读取或 fields,不要加大 depth;outputPath 必须位于桥接服务器工作目录内,可用 FIGMA_BRIDGE_OUTPUT_ROOT 设置;连接 10 秒超时通常因插件未打开;fileKey 失效需重新 list_files;节点未找到说明 id 来自旧版本或其它文件;regex 为 JavaScript RegExp;导出格式与扩展名需一致,WEBP 需要 PATH 中有 cwebp。分页与文档根节点不可导出。具体命令与更多细节以原始技能文档为准。