Figma 代码层和 Specs：它们是什么、它们如何工作以及它们在哪里停止2 min read

Figma 代码层将运行代码放在画布上，Figma Specs 也将 Markdown 放在那里。两者均于 2026 年 10 月 15 日在 Config India 进入公开测试版，因此设计文件现在可以包含框架、工作原型和代理构建的书面计划。

本指南适用于设计师、PM 和前端工程师决定是否将原型和规格工作移至 Figma。它涵盖了每个功能的用途、如何开始、AI 积分的成本以及工作必须在哪里将 Figma 留给 Claude、ChatGPT 或 Cursor 中的队友。

在人工智能时代，设计就是代码。要使用 AI 直接在代码中进行设计，或将 Figma 设计转换为代码，请使用 Anima Playground：描述一个屏幕或从 Figma 设计开始，然后不断迭代您可以预览和发布的可编辑应用程序。

使用 AI 直接在代码中进行设计

使用 AI 进行设计：描述屏幕或将 Figma 设计转化为代码。

Figma在Config India 2026上推出了什么？

代码层和 Specs 是标题，但它们附带了一组代理功能。以下是 Figma 帮助中心的当前状态：

这两个测试版都会在几周内推出，因此您可能会在团队其他成员之前或之后看到它们。

什么是 Figma 代码层？

代码层是保存真实的、运行的代码的层。您不会得到一个伪造与框架链接交互的原型，而是在画布上您的设计旁边得到一个可用的、有代码支持的原型。队友可以点击它，对其进行评论，并复制它以并排尝试不同的方向。

Figma 为您提供四种启动方法：

• 来自设计。 选择框架并要求 Figma 代理将它们转换为代码层。
• 来自实时网站。 使用 Figma Chrome 扩展捕获页面并将其粘贴到画布上。
• 来自回购协议。 从 GitHub 或本地文件夹导入受支持的轻量级原型代码库。 GitHub 导入保持与该存储库的连接。
• 从头开始。 添加一个空代码层并提示代理构建。

您还可以通过 Figma MCP 服务器将在编码工具中构建的原型带到画布上。

编辑通过三种方式进行。您提示代理，注释框架以显示更改所属的位置，或者打开代码编辑器并自行更改代码。当视觉细节比代码更重要时， Extract designs 将屏幕从代码层恢复为可编辑的 Figma 框架。当代码准备好供工程师使用时，您可以将其推送到分支并打开拉取请求。

Figma Specs是什么？

Figma 将 Specs 称为“上下文的原生家园”。实际上，它是一个协作 Markdown 文档，可以存在于 Figma Design 文件或 FigJam 板的画布上，也可以作为其自己的 Spec 文件。

上手很快：

1. 从文件浏览器创建独立的 Spec，或转到 figma.com/spec/new。
2. 在设计文件或 FigJam 板内，单击工具栏中的 Spec 或按 D。
3. 已经有一个 .md 文件？将其拖到画布上，它就成为一个规格。
4. 用你已经知道的 Markdown 来写： # 对于标题， - 对于子弹来说， [] 对于待办事项， > 对于引号，三个反引号用于代码。类型 / 对于图像，Figma 嵌入和分隔符。

规范比 Markdown 文件更重要的是文本周围的内容。您可以嵌入框架、FigJam 板或画布中的任何节点，因此其描述的需求和设计彼此相邻。队友对其发表评论，Figma 代理可以阅读并回复这些评论。

Specs 也可以在 Figma 之外工作。连接到 Figma MCP 服务器的编码代理可以使用以下命令读取、创建和更新规范： figma-spec 技能。首先，您将规范链接复制到编码代理的提示中，链接的框架、图表、代码层和 Code Connect 片段都会随之而来。

为什么 Markdown 成为交接格式

Figma 自己的发布帖子明确表示：Markdown 现在是与代理共享上下文的事实上的格式。每个编码代理都会阅读它。大多数产品团队已经将计划、PRD 和代理指令保存在 .md 文件。

我的读到的是，Specs 是 Figma 接受向代理的移交是文本，然后使该文本多人游戏。本地人 AGENTS.md 或 PRD 从未因格式而失败。它失败了，因为只有一个人编辑它，它偏离了设计，没有人能看到代理使用的是哪个版本。

在 Figma 内部，Specs 解决了这个问题。悬而未决的问题是它之外会发生什么。嵌入、评论和实时设计参考是 Figma 的功能，代理可以通过 Figma MCP 目录中列出的客户来访问它们。如果您的工程师、PM 的 ChatGPT 和营销团队的 Claude 都需要相同的计划，您仍然需要决定共享副本的位置。

一个实用的工作流程：从PRD到代码层到pull request

以下是这两个功能如何在实际功能上组合在一起，仅使用今天的 Figma 文档。

1. 将 PRD 拖到画布上。 您现有的 .md 文件成为规范。没有任何内容被重写，并且手动编辑它不使用人工智能积分。
2. 嵌入它谈论的框架。 使用 / 添加 PRD 描述的流程。审阅者现在可以同时看到需求和屏幕。
3. 将关键帧变成代码层。 选择它们并提示代理。如果您已经有原型存储库，请从 GitHub 导入它。
4. 审查在一处。 收集有关规范和代码层的评论。要求 Figma 代理回复每个公开评论并提供建议的修复方案，同时人们也在同一主题上发表意见。
5. 交出规格。 将规格链接粘贴到连接到 Figma MCP 服务器的 Codex、Claude Code 或 Cursor 中。代理获取 Markdown 以及链接的设计上下文。
6. 发送原型代码。 将代码层的更改推送到分支并打开拉取请求，以便工程师在合并之前进行审查。

输出是您的编码代理可以读取的规范以及您的团队实际点击过的工作原型。像任何其他代码一样测试生成的代码。运行的原型与生产就绪的代码不同。

如果下一步是将 Figma 设计转换为可以运行的代码，或者根据提示进行代码设计，那就是 Anima Playground 的工作。

代码层和 Specs 的成本是多少？

• 代码层使用人工智能积分。 在付费计划中，到 2026 年 11 月 4 日，代码层内的生成和编辑都是免费的。同一提示中的其他代理工作仍然使用积分，11 月 4 日之后，所有代码层任务都使用积分。
• Specs可以自由编写。 自己输入和编辑规范不使用积分。使用具有规范的代理即可。将鼠标悬停在每个提示后的收据上即可查看费用。
• Payload 和指南增加了成本。 Figma 指出，两者都为代理提供了更多上下文和更多工作，因此相同的提示可以使用更多积分。

在制定计划之前要检查的限制

• 推出。 这两项功能都是公开测试版，将在几周内推出。在 Figma Design 工具栏中查找“代码”图标，在文件浏览器中查找“Spec”选项。
• 计划。 Specs 需要付费计划。初学者用户可以获得代码层，但不能获得 Specs。两者都需要编辑权限才能创建。
• 选择退出。 只有企业管理员可以关闭代码层，并且只能通过关闭所有 Figma AI 功能来关闭。
• 回购规模。 GitHub 导入适用于轻量级原型代码库，而不是完整的生产应用程序。
• 设计系统代码。 通过代码源连接真实的组件代码仍处于封闭测试阶段，因此代码层可能还无法使用您的生产组件。

Figma 停止的位置以及 Anima 和 AgentGrid.io 适合的位置

如果您的整个团队在 Figma 中工作，则代码层和 Specs 是强大的默认设置。原型、计划和评论位于同一个文件中，Figma 的代理和 MCP 客户可以对其进行处理。

有两种常见情况仍然不属于该文件范围。

这个想法是从其他地方开始的。 Claude Design 原型、ChatGPT 生成的 HTML 页面或您想要学习的实时站点。 Figma 的 MCP 服务器现在有一个 html_to_figma 代理生成的 HTML 工具。 Anima 的 Buddy，我们 Figma 内部的 AI 设计代理，也变成了 HTML，Claude 工件、图像和 URL 到可编辑的 Figma 图层中，当您想使用设计系统继续在这些层上进行设计时，这非常有用。

结果需要留下Figma。 您的规格或原型必须由 Figma 团队之外的人员审核、由多个供应商的代理编辑或作为实时链接发布。这就是由 Anima 构建的 AgentGrid.io 所做的工作。 AgentGrid.io 上的 Markdown 工件是一个实时自动保存文档，人们和连接的代理（例如 Claude、ChatGPT、Cursor 和 Grok Bot）可以编辑该文档，每次更改都按版本历史记录中的名称进行归因。 HTML 工件是一个运行页面，您可以在其获得批准后发表评论并发布到公共 URL。您还可以将一个 Figma 框架作为应用程序工件导入到 AgentGrid.io 中。该导入是单向的，因此以后的 Figma 编辑不会同步。

两人并不是在争夺同一个台阶。 Figma 拥有设计画布。 AgentGrid.io 是 Markdown 当工作跨工具和团队时，HTML 工件就会消失。

尝试AgentGrid.io 保留团队中的每个代理都可以编辑和发布的规范或原型。

使用每个工具时

• 使用 Figma 代码层 当利益相关者需要单击设计旁边的工作原型并并排比较方向时。
• 使用Figma Specs 当计划应位于框架旁边并由编码代理通过 Figma MCP 服务器读取时。
• 使用 Anima Playground 当您想使用 AI 直接在代码中进行设计，或将 Figma 设计转换为可编辑的应用程序时，您可以预览和发布。
• 使用 Buddy 当起点位于 Figma 之外并且您想要在画布上编辑图层时。有关在 Figma 中构建与浏览器构建器的更全面比较，请参阅 Figma Make 与 Anima Playground。
• 使用AgentGrid.io 当规范或原型必须由人员和代理跨工具进行编辑、通过评论进行审查并作为实时链接发布时。

常见问题

Figma 中的代码层是什么？

代码层是 Figma 画布上保存真实运行代码的层。您可以从选定的框架、使用 Figma Chrome 扩展捕获的实时网站、GitHub 原型存储库或空白提示中创建一个框架，然后单击它、对其进行评论并复制它以比较方向。

Figma Specs 就是 Markdown 吗？

Specs 使用 Markdown 作为其文本，您可以将任何 .md 文件拖到画布上来创建一个。它围绕该文本添加了 Figma 功能：嵌入式框架和 FigJam 板、评论以及可以读取和回复这些评论的代理。

Figma 代码层会消耗 AI 学分吗？

是的。在付费计划中，到 2026 年 11 月 4 日，代码层内的生成和编辑都是免费的。同一提示中的其他代理工作仍然使用积分，11 月 4 日之后，所有代码层任务都使用 AI 积分。

Claude Code、Codex 或 Cursor 可以读取 Figma Spec 吗？

是的，如果它们连接到 Figma MCP 服务器。编码代理可以使用 figma-spec 技能读取、创建和更新规范，并且您可以将规范链接粘贴到提示中以传递其链接的设计上下文。

哪些Figma计划包括Specs？

Specs 处于付费计划的公开测试版：根据 Figma 的 Config India 文章，专业、组织、企业和教育以及政府。它不在免费的入门计划中。代码层正在推广到所有计划，包括 Starter。