Figma code layers

Figma 代码图层可将可运行的代码直接置于 Figma 设计画布上，紧邻设计稿，让团队在同一处查看界面的呈现效果和交互行为。

问题：设计与代码通常分属两个世界。静态设计稿无法展示实际行为，而要检查已编码的版本，就需要在不同工具之间切换，这让设计师和开发者难以比较不同方案并就方向达成共识。

解决方案：代码图层是一种交互式、由代码驱动的原型，与其他图层一样置于画布上。你可以将设计框架转换为代码图层、导入 GitHub 仓库、通过 Figma Chrome 扩展抓取网站，或让 Figma 代理根据提示词或模板构建代码图层。

差异化功能：代码与设计始终保持双向关联。你可以像复制框架一样复制代码图层，并排比较不同方案；移动或调整元素大小时，代码也会同步更新。你还可以将代码图层当前的状态、单个屏幕或完整流程重新提取为可编辑的 Figma 图层，然后一键将编辑内容同步回代码。完成后，你可以将更改推送到仓库。团队成员可以在共享文件中对同一图层发表评论或向其发送提示词。

主要功能：

• 从框架、GitHub 仓库、网页或提示词创建代码图层

• 并排比较不同方案的代码实现

• 在保留原版的同时，让代理生成新版本

• 将代码转换回可编辑图层，并将编辑内容同步回代码

• 在代码编辑器中编辑，然后推送到你的仓库

• 借助 AI 工具，Figma MCP 可以创建代码图层

适用对象：希望共同探索和评审真实可运行的 UI，而不是来回传递静态文件的设计师、开发者和产品团队。

Figma 博客文章，以及Config India 回顾，了解详细发布信息。