用途:Figma MCP Bridge 是一个「Figma 插件 + MCP 服务器」组合,把 Figma 文档的实时数据流式提供给 AI 工具,从而绕过 Figma API 对免费用户的速率限制。它支持同时连接多个 Figma 文件,供 AI 智能体查询设计数据、提取组件、获取样式和导出截图。
主要能力:提供 list_files(列出已连接文件)、get_document(完整页面节点树)、get_selection(当前选中节点)、get_node(按 ID 获取指定节点,ID 须用冒号格式,如 4029:12345)、get_styles(本地填充/文本/效果/网格样式)、get_metadata(文件名、页面列表与当前页)、get_design_context(深度受限的上下文树,可设 maxDepth)、get_variable_defs(变量集合、模式与设计令牌)、get_screenshot(导出 PNG/SVG/JPG/PDF,base64 编码,可设 scale)和 save_screenshots(直接导出到本地目录)。
使用方式:先在 AI 工具的 MCP 配置中加入服务,例如 {"mcpServers":{"figma-bridge":{"command":"npx","args":["-y","@gethopp/figma-mcp-bridge"]}}};再从最新 release 下载 Figma 插件,在 Figma 中通过 Plugins > Development > Import plugin from manifest 导入 plugin/ 目录下的 manifest.json。打开 Figma 文件后运行 "Figma MCP Bridge" 插件,显示 "Connected" 即表示 MCP 服务器已生效,然后即可向 AI 工具提问。多文件场景需在每个 Figma 文件中分别运行插件。架构上采用 leader-follower 模式:leader 在端口 1994 维护与插件的 WebSocket 连接(ws://localhost:1994/ws,健康检查 /ping,RPC /rpc),follower 经 HTTP 代理请求,支持自动选主。
适用场景:从 Figma 组件构建 UI、提取设计系统与设计令牌、多文件工作流、组件分析等。
限制:大文档序列化可能较慢,建议用 get_design_context 配合 maxDepth,并尽量缓存结果;截图导出失败时需确保节点在视口内或降低 scale,大批量导出改用 save_screenshots。同一时间仅一个 leader,其余自动成为 follower。官方未提供收费、价格等信息。