Figma + Claude 代码

Source: Dev.to

概览

Figma 正式与 Anthropic 合作，将 Claude AI 能力集成到其设计平台中。此集成实现了 代码转画布 工作流，将 AI 生成的代码转换为可在 Figma 中完全编辑的设计。

核心功能：“代码转画布”

• 目的： 弥合 AI 编码工作流与协作式设计细化之间的鸿沟。

• 流程：

  1. 在基于浏览器的环境中使用 Claude Code 构建 UI。
  2. 通过集成捕获屏幕；实时浏览器状态被转换为兼容 Figma 的帧。
  3. 将该帧粘贴到 Figma 中，作为可编辑的设计产物（而非已展平的图像）。

• 协作： 团队可以在画布上直接对 AI 生成的选项进行注释、复制、重新排列和比较。

• 技术： 运行于 Figma 的 MCP（模型上下文协议）服务器，这是一套用于将 AI 工具连接到外部应用的开放标准。

要求

• Figma 桌面应用（不支持浏览器版本）
• Figma Dev 或 Full seat 订阅
• 通过 npm 安装的 Claude Code

设置步骤

1. 在 Figma 偏好设置中启用 MCP 服务器。

2. 使用终端命令将 MCP 服务器连接到 Claude Code，例如：

   # 示例命令 – 请替换为实际参数
   npx claude-code --connect-mcp

好处

逆向工作流

实现 代码 → 设计 流程，颠倒传统的设计 → 代码管线。

团队协作

非技术利益相关者可以审阅并对实际构建的 UI 提供反馈，而不是静态模型。

设计系统对齐

让设计师能够验证 AI 生成的 UI 是否符合现有组件和设计令牌。

循环工作流

1. 在 Figma 中设计 → 使用 Claude 生成代码。
2. 将生成的 UI 捕获回 Figma → 进一步完善。

注意事项

• 需要终端/CLI 设置。
• 仅限桌面应用；不支持浏览器。
• 多屏幕流程需要单独捕获。
• Claude Code 直接在你的代码库中运行，修改会影响生产文件。
• 对于复杂项目，令牌费用可能会累计。

展望

此合作体现了 Figma 的信念：AI 不会取代设计画布，而是会以更多选项、更快的速度丰富它。