Figma Code Layers加入连接上下文，前端原型评审要核对哪些状态

Figma Code Layers 的新变化，落在前端原型最容易遗漏的一层信息：页面之间如何发生交互。2026 年 11 月 3 日，Figma 宣布 Agent 从设计画框创建代码图层时，会读取画框间的原型连接和交互关系。已有设计流程因此可以直接提供更多上下文；Code Layers 目前仍是开放测试功能。

把画面、连接和运行结果分开看

对参与设计协作的前端开发者，可以把检查对象分成三层。画框描述页面外观，原型连接表达设计中的交互意图，而 Code Layer 则让代码在 Figma Design 画布里运行，呈现可操作的原型。本次更新增强的是生成阶段对连接与交互上下文的读取。

Figma 希望借此减少用户反复提示复杂流程的时间，把精力留给原型细化和边界情况检查。读取设计意图与实现结果正确是两件事，不能把这项更新理解为自动通过前端测试，或认定所有业务分支都已经生成完整。

评审原型时，除了跳转还要看状态

• 路径是否合理：从入口一路操作，核对下一步与返回行为是否符合设计。这里的核对属于团队验收建议，并非新增自动测试功能。

• 状态是否完整：Code Layers 支持在画布中预览空内容、加载和错误等状态。评审时应明确这些状态各自表达什么，避免只确认正常路径的视觉效果。

• 方案是否更好：复制代码图层，并向 Agent 提出另一种方向，可以在同一画布并排比较多个运行版本。这比只对照静态页面更便于讨论交互取舍。

从设计进入代码图层的入口

若要用现有设计尝试此次变化，官方文档的操作入口是选中画框，点击工具栏 Code 或按 B，然后选择右侧的 Build selection。多个画框也可以一起选择，再提示 Agent 转成代码图层。工具栏上的 Code 图标同时是判断账号是否已获得入口的直接线索。

生成后，选择对应代码图层并点击其右上角的 Play，再执行前面的交互与状态评审。将设计和运行原型放在同一文件，有助于设计师与开发者围绕同一份结果讨论，但仍需要团队决定哪些行为符合实际需求。

使用边界：开放测试不等于免额度限制

帮助中心列明，Starter、Professional、Education（不包括 K-12）、Organization 和 Enterprise 计划可使用此功能，同时需要文件编辑权限。账号已开放却找不到 Code 时，可先刷新当前标签页，或重启桌面版 Figma。

Code Layers 在开放测试阶段依然使用 Figma AI credits，消耗会因任务复杂程度等因素变化。对前端团队而言，这次更新更适合被视为复用设计上下文的能力提升；是否达到项目验收标准，应以实际交互、状态和边界情况的检查结果为准。