Camille Rose Shortridge，Figma客户营销经理
现在代码层已进入公开测试，你可以将代码带到画布上。以下是六个团队如何利用它进行试验、让利益相关者达成一致并加快进度的方式。
分享团队试验代码层的6种方式
当我们把 代码带到画布上 今天，代码层进入公开测试。现在团队可以在画布上探索和构建由代码支撑的原型。在画布上使用代码层一起设计
Superside：从静态设计构建复杂交互
Superside是全球品牌的创意合作伙伴，其动效设计负责人Leonardo Rica希望利用代码层探索交互式动效的新可能性。作为一个测试项目，Leonardo构建了一个交互式信用卡钱包的概念，让用户可以滚动浏览一叠卡片，点击其中一张将其置于前面，再翻转查看其详情。Leonardo在Figma中设计了静态画框，让 Figma agent 以下是Uber、Granola和Atlassian的团队如何借助现已全面开放的Figma agent支持高质量、快节奏的工作。 动效现在就在画布上——与你的组件、变量和团队位于同一文件中——让你的设计从第一天起就能栩栩如生。
产品设计师使用Figma agent提升工艺、速度和创意表达的3种方式
隆重推出Figma Motion：你的画布现在有了时间轴
Leonardo没有一次性生成所有内容，而是分阶段构建。“我先做好滚动，然后在不破坏已有功能的基础上添加点击和翻转，”他说。有一次，一张滑回卡堆的卡片短暂显示在了本应位于其上方的卡片前面。Leonardo用一条精确的提示词描述了原因，Figma agent“像变魔术一样”修复了它。接下来，他设想代码层为品牌驱动交互式动画系统，从滚动和点击行为到产品UI时刻，让客户在任何内容进入开发之前就能体验。
Leonardo的提示词技巧→ 给代码层硬性数值：精确的位置、大小和弹簧参数
→ 附上参考截图
→ 分阶段构建。先做好滚动，再叠加点击和翻转。
→ 当出现问题时，用一条精确的提示词描述原因。
Dell：并排对比可用的备选方案
Miguel Wermuth是Dell的产品设计师，负责面向企业客户和dell.com购物者的客户账户体验，覆盖移动端、平板和桌面端。由于Dell的 设计系统团队 Figma的agent可以承担设计系统中的重复性工作，从维护组件库到自动化设计遵循组件库的方式。在此，我们分享几种让Figma agent发挥作用的方法。如何用Figma agent减轻设计系统维护工作
一旦其他设计师批准了某个流程，Miguel就会在代码层中将其构建出来，以获得跨职能合作伙伴的签字确认，因为他们发现可运行的原型比一系列静态屏幕更容易理解。在编辑时，他会复制代码层以并排保留版本，这比切换版本历史更容易在备选方案之间做选择。“就像你看着一面墙，看看A，再看看B，”Miguel说。可运行的原型在评审周期中也令人印象深刻：“当我向产品经理和业务利益相关者展示时，我们获得了那种惊艳效果。它功能非常完整。”
借助代码层，我可以在画布上设计的同时处理代码。设计与代码之间能有更多来回互动，这真的很强大。“借助代码层，我可以在画布上设计的同时处理代码。设计与代码之间能有更多来回互动，这真的很强大。”
Cox Automotive：以10倍速度制作原型
Cox Automotive 隶属于 Cox Enterprises，其产品 VinSolutions 是一款帮助汽车经销商管理客户关系的 CRM。高级产品经理 Lindsay Brechler 将 AI 引入这些工作流程，其中包括团队构建的 Virtual Contact Assistant——一个可以代表经销商向客户发送电子邮件和短信的智能体。为了让利益相关者就面向经销商的新功能的四个拟议层级达成一致，Lindsay 将一个大型 HTML 原型引入代码层，并用 Figma agent 对其进行了完善。“我不是设计师，我是产品经理，”她说。“智能体完成了编辑工作，因此我可以专注于每个层级背后的概念。”
由于每个版本都保留在画布上，Lindsay 可以从其中任何一个版本继续迭代，而无需从头开始。“我只花了大约一小时的实际操作时间就完成了 19 个版本，因为大部分处理工作都由智能体完成，”她说。“与作为一名非设计师在 Figma 中自行构建相比，这至少高效 10 倍，约节省 90% 的时间。”原型制作完成后，Lindsay 下载了一个复杂的单一 HTML 文件，在 Cox Automotive 的内部网站上分享。“在一次次迭代中，代码层将每个屏幕和交互都很好地整合在一起，”她说。可点击的原型展示了冗长的产品需求文档无法呈现的内容，并在设计、工程和产品团队共同塑造该功能时让他们保持一致。
Rocket Money：尽早敲定细节
Rocket Money 是 Rocket, LLP 的运营子公司，帮助人们掌控个人财务。设计系统首席产品设计师 Derek Onay 使用代码层以可运行原型的形式与团队分享早期想法。 设计系统 你的设计系统可以帮助 Figma agent 理解定义你产品的原则和准则。以下是如何让这些上下文对智能体有用。如何让你的设计系统与 Figma agent 协同工作
Derek 提示 Figma agent 使用团队确切的设计系统组件名称，在代码中重建一个现有设计。几分钟和两次清理提示之后，他将结果分享给利益相关者，以决定这个概念是否值得继续推进。“代码层对对齐和原型制作是一大加分项，”Derek 说。“与其试图描述一种交互模式，我可以直接分享一个代码层链接，并与团队讨论。”
借助代码层，真正的价值在于能够更好地传达想法并让利益相关者达成一致。我可以分享一个可运行的原型，并在团队已经所在的地方——Figma 中——与他们沟通。“借助代码层，真正的价值在于能够更好地传达想法并让利益相关者达成一致。我可以分享一个可运行的原型，并在团队已经所在的地方——Figma 中——与他们沟通。”
Merkle：减少设计与开发之间的交接
代码层对 Merkle 的影响：30% 更快的迭代和功能开发
最多 50% 更少的时间用于创建文档，例如工单上的交互规格
Merkle 是一家全球咨询公司，在其整个设计和构建流程中使用代码层，从空白画布上的构思到对已在代码中构建的功能进行迭代。因此，由于交接更少、等待设计师或开发者可用性的时间更短，迭代和功能开发速度提升了 30%。团队创建文档（例如工单上的交互规格）的时间也最多减少了 50%。“代码层极大地提升了以最佳方式传达想法的能力，”体验设计全球负责人副总裁 Dave Calleja 说。“它为团队提供了更多而非更少的选择，以以前没有大量额外开销就无法实现的方式去探索、演进和协作。”
最重要的是，代码层代表着从交接转向携手协作的转变，因此 Merkle 及其客户可以更快地工作，同时将工作推进得更远。“Figma 代码层的力量在于消除了代码工具与画布工具之间看似必须做出的选择，同时提供两者的全部能力，”Dave 说。
将代码和画布并排放置，意味着我们的团队可以基于共享材料探索和交付独特、富有创意的体验。“将代码和画布并排放置，意味着我们的团队可以基于共享材料探索和交付独特、富有创意的体验。”
Checkout.com：通过设计编辑打磨可运行代码
Checkout.com 是一个全球支付平台，高级产品设计师 Kris Murphy 负责设计支付功能。当一位潜在客户希望看到该技术的实际运行情况时，Kris 在代码层中构建了一个演示，并分享了客户应用的截图，以便 Figma agent 能够匹配其颜色、字体和设计模式。“代码层帮助我快速构思和交付，”他说。
在把演示交给客户之前，Kris 希望确保每个屏幕都经过打磨。他没有逐屏点击原型，而是把每个屏幕从代码层提取到 Figma 画布上。这样一来，就可以轻松地并排查看它们，并发现和修复任何需要返工的地方。随后，Kris 将这些修改发回代码层，Checkout.com 团队也可以查看画布上所做修订的完整流程。
代码层感觉像是设计与开发之间的一座真正的桥梁。它帮助我快速构思和交付。“代码层感觉像是设计与开发之间的一座真正的桥梁。它帮助我快速构思和交付。”
代码层正在 公开测试中逐步推出 ，并将使用 AI credits。在付费计划中，在代码层内创建和编辑在 2026 年 11 月 4 日之前免费。
Camille 是 Figma 的客户营销经理，负责领导庆祝团队如何使用 Figma 进行创作的各类项目。她的策展作品曾登上 Juxtapoz、Art Ltd. 和 VICE。
LinkedIn