Figma工具 · Figma Code Layers

在Figma中修改设计，点一下按钮就能更新实际代码

Figma于10月15日推出这一功能的公开测试版，并进行了演示。将Figma框架、GitHub代码仓库或网页放到画布上，就能得到一个可交互的界面。把界面提取为设计图层，像往常一样修改，再点击按钮就能将改动同步回代码。修改后的代码可以推送到GitHub分支，并创建拉取请求，交给团队审查。我们整理了官方演示和早期用户的实际使用画面。

2026年10月26日·2 个案例

Figma博客 — Design Together With Code Layers on the Canvas, 2026-10-15

Figma帮助中心 — Code layers in Figma Design（方案、席位、11月4日前免费、逐步开放）

Figma X — Code Layers公开测试版发布视频, 2026-10-15（10月26日观看量6,706,822次）

Figma于10月15日在Config India宣布Code Layers公开测试版时发布了一段35秒视频。截至10月26日，该视频在Figma官方X账号上的观看量已超过670万次。一周后，Figma又单独发布了一段10分钟视频，介绍Code Layers的四种用法。拥有20多年设计经验的Murat Bayral（YouTube频道02ui）用自家公司的博客试用后表示：“this thing is basically changing Figma entirely（这基本上正在彻底改变Figma）。”

可以放到画布上的内容包括Figma框架、GitHub代码仓库、电脑上的文件夹、通过Chrome扩展导入的网页，以及通过Figma MCP连接Figma的编码智能体发送的代码。放到画布上的界面可以直接交互，也可以复制后并排比较多个方案，还能在上面添加评论。修改后的代码可以推送到GitHub分支，并创建拉取请求供团队审查。

目前，拥有Full席位和Design文件编辑权限的人可以使用。根据Figma帮助中心的说明，付费方案用户在11月4日之前创建和编辑代码图层不消耗AI积分。该功能将在数周内逐步开放，因此同一团队中有些人可能会晚一些看到菜单。从GitHub导入需要将Figma连接到GitHub账号或组织，只支持轻量级原型代码，导入有时也会超过10分钟。代码由画布中的Figma智能体创建和修改。

Reference 01教程 · YouTube频道02ui，由两位拥有20多年设计经验的人运营

在Figma中调整博客的大小和布局，一键同步回代码图层

02ui的Murat Bayral将Figma连接到GitHub，把自己公司博客的代码仓库（zero to UI blog main）导入画布。在画布中，页面可以像真实网站一样滚动，深色主题也完整呈现。Murat说：“it is as same as my website（和我的网站一模一样）。”

接着，他创建了一个名为“new hero section”的新分支，用Extract designs将界面提取为Figma设计图层。看到提取结果后，他说：“This is exactly the auto layout structure that I initially built on Figma（这正是我最初在Figma中搭建的自动布局结构）。”随后，他用适应内容（hug）、固定（fixed）和填充（fill）调整元素的大小和布局，点击Update code layer，将修改应用到代码图层。

这些操作是在新分支上完成的。视频没有展示将其部署到实际网站的过程。

Reference 02官方案例 · Figma官方博客10月23日介绍的Cox Automotive使用场景

一位非设计师的产品经理，用约1小时动手制作了19个原型版本

Cox Automotive负责VinSolutions CRM的产品经理Lindsay Brechler，为了就面向经销商的新功能的四种等级方案与相关方达成共识，将一个大型HTML原型导入代码图层，并用Figma智能体加以完善。最终版本导出为一个HTML文件，上传到了公司内部网站。

根据她在Figma博客中的估计，她用约1小时的动手时间制作了19个版本，并表示“at least 10 times more efficient, or about 90% time saved（效率至少提高了10倍，节省了约90%的时间）”。这个数字是与她作为非设计师直接在Figma中制作相比得出的；博客没有说明此前花了多少时间。Brechler补充说：“I'm not a designer, I'm a product manager.（我不是设计师，我是产品经理。）”

Figma博客展示了画布截图，但没有提供成品链接。

大家怎么说

好评

“if you extract the design and do lots of iterations for hours, you don't spend any credits. That's the most powerful part of this code layers.”
如果把设计提取出来，花几个小时反复修改，也不会消耗积分。这是Code Layers最强大的地方。
Murat Bayral · YouTube 02uiyoutube.com
“molto molto utile”
非常非常有用。
他说的是将真实网站导入代码图层时，按钮的悬停和按下状态也一同被导入。
Matteo Salvati · YouTubeyoutube.com
“This is insane”
这太厉害了。
@LPesthectics · Figma官方YouTube评论youtube.com

不足之处

“si è inchiodato … ho notato che tende spesso a bloccarsi”
它卡住了……我发现它经常会卡住。
这是他通过Chrome扩展导入并粘贴网站后进行测试时说的话。
Matteo Salvati · YouTubeyoutube.com
“Non sembrava funzionare bene”
看起来运行得不太好。
这是他测试从界面中单独选择一个元素并将其提取为设计的功能时说的话。
Matteo Salvati · YouTubeyoutube.com
“right now it is in beta mode, so I spent 20 AI credits. I said maybe it would be free, but it was not anyhow.”
现在还是测试版，所以我用了20个AI积分。我说过可能会免费，但总之它并不是免费的。
在公开测试版发布次日，即10月16日发布的视频中，他用Update code layer将提取出的设计修改同步回代码图层一次后说了这番话。Figma帮助中心称，付费方案用户在11月4日之前创建和编辑不消耗积分，但视频没有说明这次为什么扣了积分。
Murat Bayral · YouTube 02uiyoutube.com
“it is clear that Figma AI credits are very expensive and runs out fast”
很明显，Figma的AI积分非常贵，而且消耗得很快。
这条评论来自一位表示自己用过Figma Make和Figma智能体的观众。
@basantrajmohan8716 · 02ui YouTube评论youtube.com
“The main problem with this feature is that I can only use Figma LLM”
这个功能的主要问题是，我只能使用Figma的大语言模型。
@TheKarsonE · Figma官方YouTube评论youtube.com
“Ehm 99.9% of real design systems need compilation at build-time.”
嗯，99.9%的实际设计系统都需要在构建时编译。
这是对Florian Gampert在LinkedIn介绍React代码可在画布中运行的帖子的评论。他指出，企业实际使用的设计系统很难直接放进代码图层运行。Figma帮助中心也说明，并非所有代码仓库都受支持，部分项目需要修改后才能运行。
Mattia Astorino · LinkedInlinkedin.com
“I dont think this is reliable for high scale applications, can be for demo purposes tho”
我认为它用于大规模应用并不可靠，不过或许可以用来做演示。
@yashanand2308 · Figma官方YouTube评论youtube.com

怎么开始

在Figma Design文件中选择一个框架，将下面的提示词粘贴给Code Layers中的Figma智能体。你需要拥有Full席位和编辑权限。任何拥有编辑权限的人都能读取代码，因此不要放入API密钥。

起步提示词
这篇文章介绍了使用Figma Code Layers完成的案例：https://www.working-ref.com/zh/reference/figma-code-layers-2026-10 请查看我当前选中的框架，结合我的工作，提出三个值得用Code Layers尝试的方案。如果方案从网页开始，请只使用我的网站或我拥有权利的页面。我选定一个后，请立即开始。如果没有可选方案，就把这个框架转换为可交互的代码图层，并为按钮添加悬停和按下状态。

分享此参考

每周一期 · 免费

这篇参考对你有帮助吗？

每周海量 AI 资讯里的 BEST
只挑 3 条，直接送到你的邮箱

Work Smarter with AI

订阅成功下一期起，我们在你的邮箱见。