figma 于 2026 年 11 月 3 日更新 code layers：从设计画框（frame）创建代码图层时，agent 会读取画框之间已有的原型连接和交互关系。对于需要把多页面设计变成可运行原型的团队，这意味着页面如何衔接也能成为生成上下文，减少反复用提示词解释流程的工作。code layers 目前仍处于开放测试阶段。

这次更新补上的是页面之间的关系

静态画框表达了单个页面的布局，而原型连接补充了页面之间的跳转与交互意图。本次变化发生在“从设计生成 Code Layer”的环节：Agent 不只看到所选画框，也会参考这些画框之间已经配置的原型连接和交互。

官方给出的作用是减少复杂流程的提示词描述，让用户把更多时间放在细化原型和发现边界场景上。它并不意味着生成结果已经通过业务验收；分支是否正确、交互是否符合预期，仍需要在可运行原型中检查。

Code Layer 与普通设计画框有什么区别

Code Layer 是直接放在 Figma Design 画布上的、由运行代码支撑的交互原型。设计和代码可以留在同一个文件里，团队也可以复制代码图层，在画布上并排比较不同方案，或检查空内容、加载中和错误等状态。

从已有设计开始时，官方帮助文档提供的入口是：选中画框，点击工具栏中的 Code，或按 B，然后在右侧选择 Build selection。也可以同时选中多个画框，再通过 Agent 将设计转成代码图层。生成后选中代码图层，点击其右上角的 Play，即可尝试交互流程。

开放测试期间先确认权限与额度

官方帮助文档列出的适用计划包括 Starter、Professional、Education（不含 K-12）、Organization 和 Enterprise，使用者需要具有文件编辑权限。账号获得该功能后，Figma Design 工具栏会出现 Code 图标；若没有看到，可先刷新标签页或重启桌面应用。

开放测试中的 Code Layers 会消耗 Figma AI credits，消耗量随任务复杂度等因素变化。因此，团队可以先选择一段关键流程验证连接是否被正确理解，再逐步扩大原型范围，而不宜把开放测试理解为不限量使用。

对已有多画框原型的设计师和前端团队，这次更新的实际价值在于复用已经表达过的交互意图。评估时可重点核对常规路径、返回路径，以及空内容或错误状态；这些属于团队的验收工作，不能由“Agent 已读取连接”这一能力直接替代。