Figma将GitHub引入设计画布——Code Layers能否打通设计与开发的边界

Figma的新功能Code Layers实现了两年前看来不可能的事：允许将GitHub仓库直接克隆到设计画布上。仓库出现在画布后，可以从现有代码中提取可编辑的设计框架，进行视觉修改，再将变更同步回仓库——一切都在单个Figma文件内完成，实时协作功能完好保留。设计与开发在同一个窗口中共存。

对于多年来一直在撰写交接说明、将规格复制到Jira工单或向工程团队发送Zeplin链接的设计师来说，Code Layers改变了设计与代码对话发生的地方。Figma中的修改会更新底层代码；代码中的修改会更新设计图层。两个领域之间的桥梁始终需要切换上下文，现在这种切换的代价变小了。

Figma Motion将动画转化为可直接交付的代码

Figma还发布了Motion——一个直接内置于画布的基于关键帧的动画时间轴。设计师可以使用时间轴和预设库创建过渡效果、悬停状态和滚动动画，然后以七种格式导出：CSS、JSON、React、MP4、WebM、动画SVG和GIF。在Figma中设计的加载动画不再是开发人员需要解读的参考文档——它本身就是动画。

第三项重要发布是着色器效果（Shader Effects）——由WebGPU（浏览器最新图形标准）驱动的GPU加速填充，使设计师能够将复杂的、以数学方式生成的视觉纹理直接应用于Figma图层。Figma的AI助手可以根据文本描述或上传的图像生成这些自定义着色器填充。输入“带有柔和蓝色干涉图案的磨砂玻璃”等短语，画布就会生成实时渲染、可交互调整的内容。

AI助手新增技能、工具与外部连接

AI助手本身也得到了显著扩展。它现在可以从自然语言提示中构建可复用的“技能”——无需API知识即可自动化重复设计任务的自定义工具——并直接连接到包括Notion、GitHub和Microsoft Excel在内的外部服务。2026年晚些时候的更新将加入Weavy——Figma去年收购的一款工作流构建器，支持在设计文件内进行基于节点的自动化。

并非所有功能今天就能使用。Code Layers目前处于早期访问阶段，申请将于2026年7月开放；需要付费Figma计划中的Full席位。着色器效果和增强版AI助手已在付费计划中上线。Figma Motion现已面向Full席位用户开放，Code Layers的全面发布预计在2026年晚些时候进行。

Figma吸收代码编辑器工作流的雄心面临一个切实的问题：编写代码与设计界面是不同的认知活动，而上周被SpaceX以600亿美元收购的AI代码编辑器Cursor，其用户群建立在工程师而非设计师之中。这两个社群是否会围绕共享画布走向融合，目前仍是一个悬而未决的问题。

标签: GitHub, Code Layers, Config 2026, Cursor, Figma, 设计工具