一个产品经理，不是设计师，在Figma里做出了可点击的高保真原型，前后迭代19个版本，真正动手敲键盘的时间只有大约一小时。这是Cox Automotive高级产品经理Lindsay Brechler在代码层（code layers）开放测试阶段的实际用法。
代码层现在进入开放测试。它把代码带到画布上，团队可以在画布上探索和搭建由代码支撑的原型。Figma同步放出了六家团队的实验用法，从创意机构到支付平台，场景各不相同。
Superside：从静态稿搭出复杂交互
Superside为全球品牌提供创意服务，动态设计负责人Leonardo Rica想用代码层探索交互式动效的新可能。他做的是一个交互式信用卡钱包概念：用户可以滚动浏览一叠卡片，点一张把它提到前面，再翻面查看详情。
他没有一次性生成全部效果，而是分阶段搭建。“我先把滚动做对，再把点击和翻面作为增量加上去，不破坏已经跑通的部分。”中途出现过一次问题：一张卡片滑回卡堆时，短暂显示在了本该盖住它的卡片前面。他用一句精确的提示词描述成因，Figma agent把它修好了，“像魔法一样”。
他给出的提示词经验是：给代码层硬数字，精确的位置、尺寸和弹簧参数；附上参考截图；分阶段搭建；出问题时用一句精确的提示词描述原因。
Dell：把备选方案并排比较
Dell产品设计师Miguel Wermuth负责企业客户和dell.com购物者在手机、平板、桌面端的账户体验。流程经其他设计师认可后，他会用代码层把它搭出来，交给跨职能伙伴签字确认——一个能跑的原型比一串静态页面更容易看懂。
需要改动时，他复制代码层，让不同版本并排摆着。“就像你面对一面墙，看看A，再看看B。”这比在版本历史里来回切换更直观。评审环节里，这个能跑的原型也带来了效果：“我拿给产品经理和业务方看的时候，会有那种惊艳感，功能非常完整。”
Cox Automotive：19个版本，约九成时间省下来
Cox Automotive旗下有帮车商管理客户关系的CRM产品VinSolutions。Lindsay Brechler要把AI引入这些工作流，其中包括团队自建的Virtual Contact Assistant，这个agent能代表车商给客户发邮件和短信。
为了让相关方对某个新功能的四档方案达成一致，她把一个大型HTML原型带进代码层，用Figma agent打磨。“我不是设计师，我是产品经理。编辑由agent完成，我可以专注在每一档方案背后的概念上。”
因为每个版本都留在画布上，她可以从任意一版接着改，不必从头再来。“我走完19个版本，真正动手敲键盘大约只有一小时，大部分处理是agent做的。对一个非设计师来说，比我自己在Figma里搭，效率至少高10倍，大约省了90%的时间。”
原型完成后，她下载了一个单独的复杂HTML文件，发到Cox Automotive内网。她的评价是：从一个版本到下一个版本，代码层把每个屏幕和交互都很好地串在一起。可点击原型能展示长文档展示不了的东西，也让设计、工程和产品在共同打磨功能时保持对齐。
Rocket Money：把细节提前定下来
Rocket Money的设计系统负责人Derek Onay用代码层把早期想法做成能跑的原型给团队看。他让Figma agent用团队设计系统里完全一致的组件命名，把一份现有设计用代码重建。几分钟、两次清理提示之后，他就把它分享给相关方，用来判断这个概念值不值得继续做。
“代码层对对齐和原型是很大的加分项。与其费力描述一个交互模式，我直接分享一个代码层链接，和团队边看边聊。”
Merkle：设计到开发的交接变少
全球咨询公司Merkle把代码层用在整个设计和构建流程里，从空白画布上的构思，到对已经用代码实现的功能做迭代。结果是：
- 迭代和功能开发快了30%，因为交接更少，等设计师或开发者有空的时间也更少
- 制作文档（比如工单上的交互说明）的时间最多减少50%
全球体验设计负责人Dave Calleja说：“代码层显著提升了用最好的方式沟通想法的能力。它给团队的是更多选项，而不是更少，让大家能以过去需要大量额外成本才能实现的方式去探索、演进和协作。”他的另一句总结是，代码层的力量在于消除了“用代码工具还是用画布工具”这个看似必须做的选择，同时给出两者的完整能力。
Checkout.com：用设计编辑打磨能跑的代码
全球支付平台Checkout.com的高级产品设计师Kris Murphy负责支付功能的设计。一位潜在客户想看到技术的实际效果，他用代码层搭了一个演示，并把客户App的截图交给Figma agent，让它匹配对方的配色、字体和设计模式。“代码层帮我快速构思和交付。”
在把演示发给客户之前，他想确认每个屏幕都打磨到位。他没有一屏一屏点过去，而是把每个屏幕从代码层拉到Figma画布上，并排检查，发现需要返工的地方就地修掉。改完再送回代码层，团队也能在画布上看到整条修改流程。
代码层正在开放测试中逐步推出，会消耗AI积分。付费方案上，在代码层内创建和编辑免费，截止到2026年11月4日。
热门跟贴