TOPIC COLLECTION
Figma code layers是什么？公测怎么用：设计稿变可运行原型、连GitHub提PR、11月4日前免AI积分
Figma于2026-10-15把code layers转为公开测试：在画布上放可运行的代码原型，可从零生成、把设计帧转代码、导入GitHub仓库或本地文件夹、用Chrome扩展抓网页；付费方案在2026-11-04前在code layer内生成与编辑不扣AI积分，之后按AI积分计费。
资料更新：2026-10-16
依据Figma官方博客与帮助中心（2026-10-15）整理；客户效率数字为Figma引用的客户自述，本站未实测。核查2026-10-16（新加坡时间）。
主题标签：Figma code layers、Figma代码图层、Figma公测、设计转代码、Figma AI积分
Figma code layers是什么？简单说，就是Figma画布上的一块「会跑的代码」。它是真正运行着的前端原型，跟普通图层摆在一起，能点、能滚、能看加载态和报错态，团队成员可以在旁边评论、复制一份改出另一个方向。Figma在2026-10-15把它从早先的限量测试转成公开测试（open beta），未来几周陆续推给各方案。获取方式有五种：从空白开始让Figma agent写、把选中的设计帧转成代码、克隆GitHub仓库、上传本地文件夹、用Chrome扩展把线上网页「抓」到画布上。计费上，code layers用AI积分，不过付费方案在2026-11-04之前，在code layer里生成和编辑代码不扣积分。
它跟Figma Make、Specs、普通原型有什么不同
| 东西 | 本质 | 适合干什么 |
|---|---|---|
| 普通Figma原型 | 静态帧之间连线跳转 | 讲流程、做可用性测试 |
| code layers | 画布上运行的真实前端代码，可连GitHub | 验证交互细节、多个方案并排比、拿着能用的原型找业务方签字 |
| Figma Make | 用提示词生成应用，现以Payload为原生后端 | 做带数据、能上线的小站或内部工具 |
| Figma Specs | 画布上的Markdown上下文容器 | 给人和编程Agent写需求说明，见Figma Specs怎么用 |
以前设计师想在代码里试效果，得开IDE、在自己电脑上跑，做完截图发群里，别人想动一下还得拉代码。code layers把这件事搬回了团队都在的画布上。它不是要取代Cursor或Claude Code——写正式业务代码还是那边；它解决的是「探索阶段大家各玩各的」这个问题。
谁能用、要什么条件
- 方案：帮助中心写的是Education、Starter、Professional、Organization、Enterprise。教育版的范围两篇帮助文档说法有出入（一篇写K-12，另一篇写不含K-12），以账号里是否出现入口为准。
- 权限：需要文件编辑权限；帮助中心在MCP导入一节写明，创建code layer需要Full seat。
- 入口：功能推到你账号后，Figma Design工具栏会出现Code图标，快捷键B。没看到就是还没轮到，同一团队里不同人拿到的时间也可能不同。
- 能不能关：只有Enterprise能关，而且是通过关闭全部AI功能来实现，会连带关掉Figma里其他AI功能。
上手：五种起步方式怎么选
- 从零开始：按B，在画布上拖一块区域，打开Figma agent写提示词。适合纯探索的新点子。
- 设计稿转代码：选中一个或多个帧，按B，右侧点Build selection。适合已经有定稿、想看真实交互的情况。
- 连GitHub仓库：先把Figma连到你的GitHub组织或账号，再选仓库克隆。Figma会保存这份克隆，你可以开多个分支试，改完推到分支、开Pull Request给工程师审。Organization和Enterprise还能在一个Figma账号下连多个GitHub账号。
- 上传本地文件夹：官方说支持的是「轻量的原型代码库」，大型单体项目别指望直接塞进来就能跑。
- 抓线上网页：装Figma的Chrome扩展，在你的网页上点Capture code，回Figma粘贴，就成了一个code layer。改版前先把现网页面抓过来对着改，很顺手。
还有一条路：如果你本来就在编程Agent里做原型，可以通过Figma MCP server让Agent把项目打包导入成code layer。帮助中心提醒导入可能要10分钟以上，有的项目要改一改才能跑；导入本身不扣积分，之后让agent改动才扣。
改代码、出设计稿、再推回去
- Play：选中code layer点右上角Play就能交互；同一页可以同时播放多个，横向比较。手机上的Figma App也能预览，真机点一点比在电脑上模拟靠谱。
- 改：跟agent说要改什么；或者打开代码编辑器，用Point and edit——在预览里点中元素，右边弹出类似Figma属性面板的东西调颜色、间距、字号，点Apply由agent写回代码。改完可能要点Reload code layer才刷新。
- Extract designs：把code layer的当前画面、某个元素，甚至你录下来的一段操作流程，抽成可编辑的Figma图层。改完再推回code layer。
- 合并方案：官方博客举了个用法——A版布局好、B版交互好，让agent把两者合成新版本。
Figma博客引用了几家客户的说法，比如Merkle称迭代和功能开发快了约30%、交互说明类文档少了约50%，Checkout.com一位设计师说做演示快了约一半。这些是客户自述，团队规模和项目类型不同，别直接套到自己的排期上。
积分怎么算，11-04之后要留意什么
免费期只覆盖「在code layer里生成和编辑代码」这部分任务。一句提示词里agent往往要干好几件事，其中跟code layer无关的部分照样扣积分。11-04以后，所有code layer任务都按AI积分计，消耗多少看任务复杂度，每条提示词后面可以看消耗回执。想控成本，趁免费期把常用改法跑几遍，记下大致消耗，再决定团队里谁来用。AI积分的基本规则见Figma Agent与AI积分。
同期上线的Payload in Figma也会影响账单：帮助中心说加了Payload后agent要加载更多指引、写更多代码，积分用得更多。Make原来接Supabase的应用照常能用，Supabase仍作为第三方连接保留。
想对比其他「设计到代码」工具，可以看Lovable、v0，以及站内MagicOS与Magic Patterns；分类入口UI与网页设计、UI设计、AI生成应用、AI编程与建站。
常见问题
code layers要额外付费吗？
不单独收费，但用AI积分。付费方案在2026-11-04前，code layer内生成与编辑免积分；之后按积分计。免费方案能否使用，以账号内入口为准。
导入的GitHub代码会被改坏吗？
Figma保存的是仓库的克隆，你在分支上改，改完开PR由团队审了再合并，不会直接覆盖主分支。仍建议用专门的原型仓库，而不是直接连生产仓库。
和Figma Make是一个东西吗？
不是。Make偏「生成一个能上线的应用」，code layers偏「在设计画布上放可运行原型、多方案并排比较」。两者都能用Payload做后端。
工程师还需要重写代码吗？
多数情况要。code layer适合探索和对齐，正式代码有架构、测试、性能要求，PR进来也要按团队规范评审。
为什么我看不到Code图标？
公测分批推送，未来几周陆续开放；还要有编辑权限和对应席位。Enterprise管理员如果关了AI功能，也会看不到。
来源与核查日期
- Figma Blog：Design together with code layers on the canvas（2026-10-15）
- Figma Help：Code layers in Figma Design
- Figma Help：What’s new from Config India 2026（含code layers免费期与FAQ）
- Figma Blog：Build by design（2026-10-15发布汇总）
核查日期：2026-10-16（新加坡时间）。功能处于公开测试，适用方案、积分规则与免费期以Figma帮助中心当日内容为准；客户效率数据为Figma引用的客户自述，本站未实测。
