Figma Code Layers开放测试怎么用?账号条件、生成入口与试用要点
Figma 是面向产品团队的界面与原型设计平台,Mac 客户端支持 Intel 和 Apple 芯片,可直接调用本机字体。它将矢量绘制、自动布局、组件库、交互原型、评论及多人实时编辑集中在统一工作区。
Figma Code Layers开放测试可从设计画框生成交互原型,并读取画框间的连接与交互。使用需文件编辑权限且消耗AI credits;可从Code或B进入Build selection,再点击Play检查生成后的流程和状态。
Figma Code Layers 现在能在把设计画框转成代码图层时,参考画框之间的原型连接和交互。Figma 于 2026 年 11 月 3 日公布了这一更新,目的是减少复杂流程的重复提示,让已有原型关系参与生成。目前 Code Layers 仍处于开放测试,准备尝试的用户应先确认账号入口、编辑权限和 AI 额度。

哪些账号可以用,会不会消耗额度
根据官方帮助中心,适用计划包括 Starter、Professional、Education(不含 K-12)、Organization 和 Enterprise。使用者还需要拥有当前文件的编辑权限。开放测试阶段同样会使用 Figma AI credits,用量会随任务复杂度等因素变化,并不是打开测试功能后就可以不限量生成。
账号开通后,Figma Design 工具栏中应能找到 Code 图标。若没有看到,可以先刷新网页,或重新启动 Figma 桌面应用。功能是否出现在当前账号中,应以实际入口为准。
已有设计可以怎样开始
不必先另建一份独立项目。Code Layer 是放在 Figma Design 画布里的可运行交互原型,设计和代码可以在同一文件中查看。从已有画框开始,可选中画框,点击工具栏里的 Code,也可以按 B,然后选择右侧的 Build selection。

如果有多个相关画框,也能同时选中,再让 Agent 将设计转换为代码图层。本次更新的关键就在这个转换环节:原型连接与交互已经在设计里表达过的部分,可以成为 Agent 的上下文,用户因而能少写一些对复杂流程的解释。
生成后,先试用再决定是否继续
选中代码图层,点击其右上角的 Play,就可以尝试其中的交互。Code Layers 也支持查看空内容、加载和错误状态;把这些情况与正常路径一起检查,更容易发现仍需补充的细节。路径与状态是否符合自己的需求,需要使用者实际确认。
想比较两个思路时,可以复制代码图层,再提示 Agent 调整方向。多个运行版本能在同一画布上并排查看,便于设计师和开发者一起讨论,而不用仅凭文字猜测改动后的体验。
这次变化让原有设计信息更容易被复用,但“读取了连接”并不等于所有交互都已正确实现。建议先用一段熟悉的流程试跑,确认结果和额度消耗符合预期后,再扩大原型范围;保留对边界情况的人工检查,才更接近这项更新希望改善的工作方式。
火山引擎是字节跳动旗下企业级云与AI服务平台。聚焦大模型核心能力,依托字节自研豆包多模态大模型,凭借火山方舟一站式平台,提供模型精调、推理部署、智能应用搭建等全链路服务,结合高性能AI算力,助力各行业快速落地大模型数字化与智能化应用。
















