Figma AI 重磅升级！带你抢先看全新4大功能

最近 Figma 在 Schema 2025 大会上以 “AI 时代的设计系统优化” 为主题，发布多项新功能，覆盖设计一致性管理、代码集成、团队协作及变量体验升级等方面，本文会带你抢先看看这些新功能 ——

往期新功能：

一、设计系统的灵活性升级

1. Extended Collections｜扩展集合

Extended Collections 这个功能的主要应用场景是对于设计变量的管理。Figma 发现，在设计系统中管理复杂变量集合很困难，有些团队创建的变量的数量已经达到了上限（包含 40 种样式），如下图：

这导致设计变量在使用和选择上很麻烦，另外如果你想要更新这些变量中的基准值时，也很容易出错。对此 Figma 给出的解决方案是：将变量合集进行样式更替和扩展。

「样式更替」是指：将整个变量合集作为样式集，在 Appearance 外表样式的设置面板中进行一键选择和使用，无需对页面单个组件或元素进行逐一调整。比如下图，用户可以在控制面板中通过对于整个变量合集的更换，一键实现整个页面的主题色切换或者亮暗模式切换：

「扩展」是指：在基础变量合集之上创建与之相关联的分支变量合集，相当于对变量进行分组，确保变量之间的关联性，便于统一的管理和使用：

举个例子：基础变量 A 的某一个颜色的 token 值发生变化和更新后，与之相关的分支变量合集 a1、a2 也会产生更新，但这种更新不会影响到其他的变量合集 B、C、D：

2. Slots｜插槽

Slots 插槽功能主要解决的是组件在使用时，想要添加子元素或者想要和另一个组件拼合的问题。现在我们遇到这类场景，通常需要将已经做好的完整的组件进行解绑，才能再往组件里面添加其他元素。

现在 Slots 插槽功能可以让设计师无需解绑组件 A，就可以直接将组件 B 添加到组件 A 中：比如下图中的对话框本身就是个完整的组件（组件A），对话框中的对话内容又是个完整的组件（组件 B），对话框（组件 A）不再需要解绑，就能直接添加对话内容（组件 B）：

3. Check Design｜设计检查

Check Design 设计检查功能是利用 AI 智能检测并正确应用变量和样式，可以帮助设计师检验在设计新增元素或者是将组件解绑后，是否忘记绑定 tokens，造成设计稿局部元素样式不统一的问题。

Check Design 会检查出你设计稿中跟组件系统中已有样式不一致的地方，比如文本样式、颜色变量、圆角、内边距等；还会从无障碍的角度检查填充色对比度不足的问题，给出设计优化建议，并支持进行一键修改，极大提升设计师产出设计稿的质量和水准，确保设计一致性和开发就绪性：

二、AI 支持代码开发

1. MCP Server｜MCP 服务器

Figma 认为设计系统应该是为整个团队打造的，一个项目的产品经理、用户研究、运营等所有参与产品打造的相关成员，都需要有相同的信息输入才能正确地开展工作。

Figma 可以通过现有功能，如 Design Files、Figma Make、FigJam 等工具帮助设计师探索和绘制设计方案，这些内容全部都可以作为素材集，融入 AI 智能开发的流程，为 AI 提供所需的上下文语境和语意，使 AI 能更加正确地生成相关的设计产出。

Figma 新推出的模型上下文协议（Model Context Protocol，MCP）就能够使 AI 基于所有设计文件的上下文智能生成代码片段：

Figma MCP 还支持接入主流的 AI 编程工具，如 Cursor、VS Code 等，直接 “读取” 和 “理解” Figma 设计文件中的图层、组件、样式、布局等信息，从而实现将设计稿一键转化为前端代码。通过 Figma MCP，设计师和开发者能更加紧密地展开协作，让设计稿和代码真正做到无缝衔接。

2. Code Connect｜代码连接

Code Connect 功能支持将你在 Figma 所做的设计系统中的组件代码与 Github 中通用组件的代码相结合，也即能将外部的代码与你团队做出的设计组件的代码及变量建立关联，并进行智能合并，尽可能的减少开发手动调整代码的操作。

通过 Code Connect 和 MCP 功能相结合，开发者可以在 Figma 的开发模式中直接查看设计系统组件的真实代码片段，并能够直接进行产品开发：

三、设计原型能力升级

1. Make Kits｜Make 工具包在

Config 大会推出 Figma Make 时，有很多 Figma 用户的需求就是在 Figma Make 中导入设计系统的功能，让生成的内容在视觉上更加贴合自己的设计系统。

现在，Make Kits 功能能够将你在 Figma Design 中使用的设计组件库导出，并转换为 Figma Make 在制作设计稿 demo 时使用的 React 代码组件和 CSS 文件，同时会尽力保持整个页面视觉效果的一致性。Demo 的效果还可以通过输入自然语言指令来实现：

举个例子：你想对你现在的设计系统中的 Button 的交互效果做修改和调整，想要实现一个 “Button 在鼠标悬停时，光标变成手指的动画效果”，那就可以打开 Make Kits 界面，做如下操作：

1. 导入设计系统的相关组件；
2. 选中想要修改的组件，在自然语言对话框中输入指令：“鼠标悬停在组件上时变为手指”；
3. Make Kits 会自动为你生成这个交互动画效果，你可以预览和继续优化；
4. 这个交互效果的视觉样式和代码也是直接生成的，因此如果你对生成的组件交互效果感到满意，还可以直接更新组件样式并发布到团队，让所有人都能直接使用。

Make Kits 也支持将生产环境的代码以 npm 包的形式直接接入 Figma Make，相当于直接将设计稿、开发代码统一集合到 demo 制作的过程中，让 demo 的制作更加真实，并与实际生产完全打通。

四、底层性能优化

Figma 还对整个产品的底层性能和响应速度进行了优化，重点包括：

1. 重构 Figma 设计系统架构，使变量更新与状态切换的响应速度提升了 30% - 60%；
2. 扩展变量模式的数量，用于创建多套设计主题；
3. 支持在 Figma Design 中直接将变量以 JSON 文件格式 “导入 / 导出”，确保设计端与代码端的变量数据实时同步，减少手动录入错误。

以上所有更新和功能，将在 11 月陆续上线。

欢迎关注作者微信公众号：「长弓小子」