Figma Canvas (AI agent canvas)

什么是 Figma Canvas？

Figma Canvas 如 Figma 博客文章中所述，是 Figma 将画布工作流向 AI 代理开放，以便它们直接在 Figma 文件中进行设计。其核心目的是让代理在利用团队在 Figma 中维护的设计上下文（如设计系统、组件、变量和团队规范）的同时，创建和更新设计资产。

该文章还介绍了 beta 版 Figma MCP 服务器，用于将 Figma 连接到开发者工作流，从而使 LLM 驱动的工具能够生成和修改设计工作，并保持与现有设计结构的链接。

AI 代理可直接写入 Figma 文件画布，从而使生成的工作在团队迭代设计的位置创建或修改。
Beta 版 Figma MCP 服务器，将 Figma 引入开发者/LLM 工作流，支持基于设计的代码生成和设计资产操作。
use_figma 工具用于画布操作，使 MCP 客户端（包括文章中提到的 Claude Code 和 Codex）能够生成和修改与设计系统绑定的设计资产。
代码与画布间的共享上下文，让代理能在更新代码派生的 UI 和在 Figma 中优化设计之间流畅切换。
使用 Markdown 指令指导代理行为的技能，技能定义代理在 Figma 中应遵循的工作流步骤、顺序和规范。

使用支持 Figma MCP 服务器的 MCP 客户端（文章提到如 Claude Code 和 Codex 等工具），通过 MCP 访问 Figma 功能。
使用 use_figma 工具，指导代理在 Figma 内使用你的设计系统上下文创建或更新组件和其他设计资产。
通过技能添加指导，提供 Markdown 格式的指令，让代理了解在 Figma 中执行任务的方式（包括文章中引用的基础 /figma-use 技能）。
可选：从实时 UI 使用 generate_figma_design 同步，从 HTML/代码开始，然后切换到 use_figma 使用现有组件和变量编辑这些设计。

将代码库转为初始 Figma 组件：使用如 /figma-generate-library 的技能从代码库在 Figma 中创建新组件。
使用现有组件和变量生成新屏幕：使用 /figma-generate-design，让代理在 Figma 中构建设计，同时依赖组件/变量而非自由布局。
从 UI 描述应用无障碍规范：使用 create-voice 从 UI 规范生成屏幕阅读器规范（VoiceOver、TalkBack、ARIA）。
通过系统感知规则强制间距规范：使用 rad-spacing 在 Figma 中应用分层间距模式。
连接或重新映射现有设计到系统组件：使用 apply-design-system 将设计对齐到系统组件，而非作为孤立图层。

博客文章指出，Figma 画布上 AI 代理支持最终将成为基于用量的付费功能，但beta 期间免费可用。

文章描述了 use_figma 工具，供代理使用设计系统上下文操作画布。它还提到了现有的 generate_figma_design 工具，用于将实时应用/网站的 HTML 转换为可编辑的 Figma 图层。

文章中，技能是作为 Markdown 文件编写的指令集，塑造代理在 Figma 中的操作方式——涵盖工作流步骤、顺序、规范以及生成持久、品牌一致设计所需的领域知识。

不需要。文章指出任何人都可以编写技能，且无需构建插件或编写代码。

文章将 Claude Code 和 Codex 列为可使用 use_figma 的 MCP 客户端，并描述了“其他 MCP 客户端”。它未列出完整的兼容性矩阵。

设计转代码工作流（无直接画布代理编辑）： 您可以在 Figma 外部生成设计，或将 Figma 视为只读目标，然后手动在 Figma 中重建资产。这与直接在画布内绑定设计系统的代理编辑不同。
使用现有的 Figma 专用自动化或插件： 如果您需要无 AI 代理的一致组件和变量，可以依赖 Figma 插件或模板驱动方法。这以更确定性行为换取代理自主性。
在 Figma 外部生成设计产出的代理工作流： 某些 LLM 工具链可能输出设计文件或规范供设计师实现。与此处描述的方法相比，代理无法通过 use_figma 直接修改相同的 Figma 组件/变量。
仅 HTML 转 Figma 转换： 如果您的重点是将现有 UI 导入 Figma（通过 generate_figma_design 类型能力），而无代理画布编辑循环，这可降低复杂性，但可能需要更多手动跟进以对齐设计系统。