用途:在 AI 助手与 Figma Desktop 之间建立双向 MCP 桥接,让 AI 通过 JavaScript 直接在 Figma 画布上创建、修改 UI,也能把已有设计读回为结构化数据、截图或代码就绪的 token。仅通过 localhost 通信,官方资料称不需要 Figma API Key,且必须使用 Figma Desktop(网页版无法访问 localhost)。
主要能力:核心工具包括 figma_status(检查连接与列出会话)、figma_docs(加载 API 参考)、figma_rules(生成设计系统规则表,含颜色 token、字体样式、变量、组件目录)、figma_write(在画布上执行创建、修改、实例化、应用变量与文本样式、设置设计 token、原型交互、组件变体等操作)、figma_read(读取页面节点、选区、节点详情、设计上下文、组件映射、未映射组件、CSS、截图、变量与样式)。支持批量操作,并用 result[0]、result[1] 引用前一步结果;支持多实例会话,多个 Figma 文件同时打开时可用 sessionId 指定目标。
使用方式:先在 AI 客户端添加 MCP Server。以 Claude Code 为例:claude mcp add figma-ui-mcp -- npx figma-ui-mcp(全局加 --scope user);其他客户端在各自配置文件中添加 mcpServers,command 为 npx,args 为 ["-y", "figma-ui-mcp"]。添加后必须重启 IDE/AI 客户端。然后从 https://github.com/TranHoaiHung/figma-ui-mcp/raw/main/plugin.zip 下载插件,解压后在 Figma Desktop 中通过 Plugins → Development → Import plugin from manifest 选择 manifest.json 导入,并运行 Figma UI MCP Bridge。绿点表示已连接,橙点表示服务器不可达。可用 figma_status() 验证连接。
适用场景:用 AI 生成或编辑 Figma UI、设计系统 bootstrap(生成规则表并设置颜色与排版 token)、设计转代码工作流(get_design_context、get_component_map、get_css)、组件变体与原型交互设置、截图核对生成结果。
限制:必须使用 Figma Desktop,网页版不可用;MCP Server 运行在 localhost:38451,插件采用长轮询;添加 MCP 后需重启客户端;字体缺失会导致字体错误,建议使用 Figma 自带的 Inter 或本地安装字体;变量绑定失败多因变量不存在或类型不符;插件不会自动更新,npm 更新后需重新链接插件。其他未在资料中说明的收费、价格、平台或效果暂未提供。