SuperAPI AI 工具集

figma-mcp-bridge

设计与创作

查看项目

更新于 10-16 02:30

技能介绍

用途:Figma MCP Bridge 是「Figma 插件 + MCP 服务器」组合,用于设计到代码的工作流,将 Figma 文档的实时数据流式传输给 AI 工具,从而绕过 Figma 较严格的 API 速率限制。

主要能力:支持同时连接多个 Figma 文件;读取工具包括文档树、当前选择、按 ID 取节点、样式、变量与设计上下文元数据;导出截图支持 PNG/SVG/JPG/PDF,可返回 base64 或保存到本地文件系统;写入工具可创建与编辑画框、文本、形状、图片,设置填充、描边、效果与自动布局,并支持复制、移动父级、分组、删除节点;动画工具处于 beta,可应用/移除动画样式、关键帧轨道与时间线控制。

使用方式:在 AI 工具的 MCP 配置中加入服务器,例如 {"mcpServers":{"figma-bridge":{"command":"npx","args":["-y","@gethopp/figma-mcp-bridge"]}}};在 Figma 中通过 Plugins > Development > Import plugin from manifest 导入插件并运行,界面显示 Connected 即建立 WebSocket 连接。多文件需在每个文件中重复运行插件。

适用场景:设计令牌提取、从选中节点生成组件代码、批量导出组件、幻灯片模板生成、多文件设计令牌同步等设计到代码流程。

限制:写入工具仅在 Figma 设计编辑器中打开插件时可用,Dev Mode 为只读并会返回错误;删除节点需显式确认;故障排查提示需确认 MCP 服务器运行、WebSocket 端口 1994 未被防火墙阻断。其他平台或收费信息暂未提供。