Figma 代码层功能开放测试：支持在画布上通过智能体协作开发原型

欢迎来到 Workflow Lab，在这里我们将展示 一个工作流示例

Workflow lab：利用 Figma 的智能体保持工作流顺畅

知道哪些工作该交给智能体处理本身就是一项技能。本工作流展示了一位设计师如何塑造一项新的临时访问功能，同时由 Figma 智能体处理库更新、评审反馈以及设计系统规范的初稿。

使用 Figma 的产品和工具。

在独立的“氛围编码”（vibe coding）工具中工作可能会让探索过程感觉像是一项单人练习，我们从设计师那里了解到，他们希望有空间进行可视化构建、比较替代方案，并与团队共同推敲想法。

代码图层

在画布上通过代码图层进行协同设计

今天，代码图层进入公开测试阶段。现在，团队可以在画布上探索并构建由代码支持的原型。

促进了这种多人协作工作流，允许团队直接在 Figma 画布上对基于代码的交互式原型进行即兴创作。在这里，我们探索了代码图层和 Figma 智能体

产品设计师使用 Figma 智能体实现工艺、速度和创意表达的 3 种方式

以下是 Uber、Granola 和 Atlassian 的团队如何利用现已全面推出的 Figma 智能体来支持高质量、快节奏的工作。

support that shared process, from comparing and editing prototypes to combining teammates’ ideas.

问题所在

在这个示例中，我们将跟随一位设计师，为一款名为 Pickup 的虚构市场应用添加一个新按钮。该按钮允许用户在 Pickup 的地图视图中选择送货地址，该视图已存在于应用中。设计师本可以在独立的编码工具中探索不同版本，并向团队发送链接进行试用。但在不同地方探索不同选项意味着比较细节和基于队友的想法进行构建需要更多的来回沟通。为了更好地与团队协作，他们将应用的代码带到了 Figma 画布上，在那里他们可以并排尝试替代方案、优化设计，并将不同队友探索的元素组合成一个可运行的原型。

在画布上探索方向

设计师首先将地图视图的代码作为代码图层带到 Figma 画布上。这使他们能够在应用的现有地图屏幕上添加并测试送货功能。

创建代码图层有几种方法：

• 使用 Figma Chrome 扩展程序从网页捕获代码并将其粘贴到画布上。
• 选择一个现有的设计框架，并提示 Figma 智能体将其转换为交互式代码图层。
• 创建一个空的代码图层，并提示智能体从零开始构建内容。
• 克隆一个已连接的 GitHub 存储库。
• 从您的计算机上传一个代码文件夹。
• 要求外部编码智能体通过 MCP 将项目导入到 Figma 画布上。
• 创建一个空的代码图层，并以描述或 PRD 为起点，提示智能体从零开始构建内容。

从 PRD 开始？

如果您的 PRD 存放在 Notion 中，请使用 Notion 连接器将其与 Figma 智能体共享，然后要求智能体根据这些需求构建代码图层。

对于本项目，设计师在智能体面板中选择 Clone repository，从其已连接的 GitHub 账户中选择 Pickup，保持选中主分支，然后点击 Clone 将应用的现有代码加载到代码图层中。

在画布上放置代码层后，设计师使用 Figma 智能体开始同时探索多个方向。他们首先选中代码层并输入提示词：

Make three variations of this and add a new delivery button to the map page. When clicked, the user can choose their address. The first one should be an omnisearch address field, but surprise me with the other two.

Figma 智能体在画布上生成了三个图层，每个图层都有略微不同的方向：

• 选项 1：地址搜索，一个全能搜索栏，允许用户搜索他们的配送地址
• 选项 2：基于地图的选择，允许用户通过移动地图来选择配送位置
• 选项 3：地址快捷方式，提示用户选择已保存的地址或使用当前位置

设计师选中每个代码层，并排点击查看它们的交互版本。他们可以看到每个选项如何处理相同的任务，且都在同一个共享空间内，无需在不同工具中的原型之间来回切换。团队成员也可以加入并尝试这些选项，并在画布上留下评论。若要探索自己的变体，他们可以选中一个代码层，并要求 Figma 智能体根据他们的想法创建一个新版本。

在代码和设计中同时编辑

经过一番探索，设计师决定采用全能搜索选项，并希望继续推敲细节。因此，他们通过按下 Option 并拖动代码层在画布上复制该图层，从而在原件旁边创建一个副本（在 PC 上为 Alt-拖动）。这创建了一个新的代码层，设计师可以在保留第一个选项完整的情况下对其进行修改。而且，由于它紧邻原始代码层，他们可以轻松对比所做的任何更改。

设计师希望在全屏格式下优化细节，因此他们点击代码层上的 Open code editor 按钮。此视图在左侧提供智能体聊天面板，屏幕中央显示代码层预览，并可通过点击 Files 查看底层代码。

在处理细节时，设计师注意到横幅图片上的标题可以再优化一下。他们可以提示智能体进行更改，也可以手动编辑单个元素。由于他们已经清楚地知道想要进行的调整，因此选择了后者。在全屏视图中，设计师点击 Edit，在预览中选中标题，并使用属性面板增大其字号。然后，他们点击智能体聊天中的 Apply，这会更新重复代码层背后的代码，同时保持原始代码层不变。为了将更改与原件进行比较，设计师可以返回画布并并排预览这两个代码层。

接下来，设计师可以使用熟悉的 Figma 工具继续编辑原型的各个元素。他们回到画布，选中代码图层，然后点击 Extract designs。他们可以提取当前状态（即当前显示的整个页面），也可以选择特定元素，例如产品卡片或配送按钮。Extract designs 会将这些元素转换为可编辑的 Figma 设计图层，这样他们就能利用自己熟悉的工具进行布局和样式调整。

有了画布上提取出的设计图层，设计师可以进行更细致的编辑。他们增加了 Delivery options 标签周围的间距，让按钮看起来不再那么局促。

在 Extract designs 下，设计师可以选择 Record flow，在点击操作运行中的应用时捕获屏幕。当他们点击 Stop 时，Figma 会将这些屏幕按顺序作为独立的可编辑设计框架放置在画布上。将这些屏幕排列在一起后，他们可以检查整个流程并进行修改。

在画布上拥有完全可编辑的设计图层后，设计师可以使用 Figma 的设计工具尝试不同的想法、移动组件、调整排版或微调流程中的其他细节。现在，由于可以看到完整的流程布局，设计师注意到 Delivery options 按钮会直接打开地址输入面板。他们将按钮标签更改为“选择配送地址”，以便用户在点击前了解预期结果。

一旦对更改感到满意，设计师点击 Update code layer，将提取出的设计图层中的编辑内容发送回运行中的原型。应用这些更改并进行更多画布上的探索后，设计师就可以与团队分享成果，以便大家共同完善流程。

合并创意

接下来，设计师希望将自己的想法与团队的想法结合起来。在画布的其他地方，另一位设计师一直在使用代码图层，以便在多个项目靠得很近时更轻松地浏览地图。他们探索了几个选项，例如在地图上放置一个数字来显示某个区域内的项目数量，或者将这些项目以网格形式显示。他们还在一些探索方案旁边留下了注释，以解释他们的思路。

设计师很喜欢同事的网格视图（该视图将附近的项目在地图上排列成行和列），并希望将其引入到自己正在处理的配送流程中。他们选中了网格视图代码图层和配送探索方案，然后通过提示词要求智能助手将它们合并：Create a new code layer combining the grid clustering from the grid layer and the delivery feature from the delivery code layer。

智能助手创建了一个新的代码图层，将这两个探索方案合并为一个可运行的体验。在将更新后的代码发送回存储库之前，设计师要求智能助手将其与原始版本进行比较，并在 技术规范 中记录更改。

介绍 Specs：以 Markdown 为媒介

我们推出了 Specs，这是一个位于 Figma 画布上的上下文容器。

——这是一个画布上的协作文档，概述了实施过程涉及的内容。设计师写道：

Describe the changes in the combined code layer and how they differ from the original code layer. Flag upfront any changes that have technical implementation implications that should be reviewed with a developer, such as backend work or API calls.

通往生产环境之路

团队现在拥有了一个可运行的原型，它将交付功能与更清晰的地图浏览方式相结合，并附带了一份描述这些变更的技术规范。开发人员可以审查该原型和规范，以确定在功能交付给用户之前还需要构建和测试的内容。

更新后的代码随后可以回到团队的分支中，或者进入拉取请求（pull request）以在发布前进行审查和测试。探索过程、评论和规范都保留在画布上，为审查者提供了一个回顾选项并了解团队如何确定这一方向的地方。

设计师的地址选择流程和其队友的地图探索最初是分开进行的。代码层（Code layers）为他们提供了一个共享空间，以便在提交实现之前尝试两者、优化细节并将他们的工作整合在一起。

代码层（Code layers）现已面向 100% 的用户开启公开测试。了解更多关于使用 代码层 和 Figma agent 的信息。