ACORG docs

主题

Figma MCP ​

Figma MCP 用于把设计文件、组件、变量和 Dev Mode 上下文接入 AI 客户端,让 Agent 在实现 UI 时读取真实设计信息。

官方文档:

适用场景 ​

  • 根据 Figma 设计稿实现页面或组件。
  • 读取布局、颜色、字体、间距、变量和组件层级。
  • 对照设计稿检查 UI 偏差。
  • 将设计上下文提供给 Cursor、Claude Code、Codex、VS Code 等 AI 客户端。

两种服务方式 ​

类型地址适合场景
Remote MCPhttps://mcp.figma.com/mcp使用 OAuth 授权,适合多数支持 remote MCP 的客户端
Desktop MCPhttp://127.0.0.1:3845/mcp依赖 Figma 桌面端和 Dev Mode,适合本机设计稿联动

Remote MCP ​

Remote MCP 由 Figma 托管,客户端通过 OAuth 授权访问 Figma 上下文。配置时通常只需要添加 remote server URL:

text
https://mcp.figma.com/mcp

适合:

  • 不想在本地维护 MCP 进程。
  • 客户端支持 remote MCP 和 OAuth。
  • 需要在不同机器或团队环境中保持一致接入方式。

Desktop MCP ​

Desktop MCP 通过 Figma 桌面应用在本机暴露服务:

text
http://127.0.0.1:3845/mcp

适合:

  • 本机打开 Figma 桌面应用并结合 Dev Mode 使用。
  • 需要读取当前设计上下文。
  • 客户端暂不支持 remote MCP,但支持本地 MCP server。

配置建议 ​

  1. 优先确认团队是否允许 AI 客户端读取设计文件。
  2. 如果客户端支持 remote MCP,优先评估 https://mcp.figma.com/mcp。
  3. 如果使用桌面 MCP,保持 Figma 桌面应用打开并确认 Dev Mode 可用。
  4. 给 Agent 明确设计文件、页面、Frame 或组件名称。
  5. 实现前补充响应式、空状态、错误状态、加载状态和交互规则。

提示词示例 ​

text
请读取当前 Figma 设计上下文,实现这个设置页。
重点检查间距、颜色、字体层级、表单状态和移动端布局。
不要新增设计稿中没有的营销式说明文案。

注意事项 ​

  • Figma 设计稿不是业务逻辑的最终来源,复杂交互仍需产品说明。
  • 不要把未授权的客户设计稿暴露给 AI 客户端。
  • 设计实现后仍要通过浏览器截图或人工验收对照。
  • 如果设计稿使用团队变量或私有组件库,确保当前账号有访问权限。

相关文档 ​