Figma 的一个小技巧，正在悄悄改变设计系统的规模上限

如果你还在为「一个弹窗十几个变体」头疼，这个 Figma Config 的小技巧值得你立刻停下手里的活。它不是新功能，却用一种反直觉的方式，把组件数量直接砍掉一半以上——而且越复杂的系统，收益越大。

真正的浪费，不是重复画 UI，而是重复维护决策

视频一开始抛出的问题，其实每个做过中大型设计系统的人都遇到过：一个看起来很简单的 modal，对应注册、订阅、邀请、活动报名等十几种内容形态。传统做法只有两条路——要么一个 modal 一个主组件，要么做一堆变体。结果是：组件库越来越臃肿，任何视觉调整都要全局返工。

Figma Config 给出的判断很直接：问题不在「内容太多」，而在「内容和容器被绑死了」。我们一直在维护的，其实是大量视觉几乎一样、只是中间内容不同的组件。这不是设计复杂，而是结构出了问题。

这个视角本身就很反直觉——我们习惯把「完整 UI」当成最小复用单元，但在系统规模上来之后，真正该被标准化的，其实只有“外壳”。

普通 Slot 解决不了的问题，Scoped Slot 一次打穿

视频第二、三段演示了常规 slot component 的做法：把内容当成可替换插槽，通过 instance swap 来切换不同表单。它确实比多组件好，但很快就撞墙了——你仍然需要维护多个「长得一样的对话框」，只是中间塞了不同 slot。

Scoped slot 的关键变化只有一句话：把 slot 的作用域，从“组件内部”提升到“组件外部”。

具体做法是，把 modal 的视觉结构（scrim、居中、宽度、对齐规则）做成一个完全稳定的组件，slot 只负责承载内容，而且这些内容组件——表单、变体——可以存在于本地文件，甚至不进设计系统。

结果是一个非常工程化的好处：设计系统只需要维护“一种 modal”，而不是“十几种 modal”。内容的变化，被限制在 slot 作用域内，不会污染外层结构。这和前端里的 scoped slot、container / content 分离，本质是同一套思想。

为什么这对 AI 产品团队尤其重要

这套方法最被低估的价值，在于它对「不确定性」的容忍度。

AI 产品有一个典型特征：需求变化极快，表单、引导、反馈 UI 经常要试不同版本。今天是 newsletter，明天是 referral，后天可能是一个完全不同的 prompt flow。如果你的 modal 是按「功能」拆的，组件数量会指数级膨胀。

Scoped slot 的好处在这里被放大：系统组件稳定，实验组件解耦。设计系统负责人可以保证所有弹窗视觉一致；而具体的 AI flow 表单，设计师可以在本地自由创建、替换、试错。

视频里提到的 auto layout 问题（需要用 hug contents、检查 slot 位置），反而提醒了一点现实：这不是“零成本”的魔法，而是一种更接近工程思维的设计方式。你用结构换取长期维护成本的下降。

总结

这条 Figma tip 看起来只是组件技巧，实质上是在教你如何控制系统复杂度。它给设计师一个重要启发：当你开始为“支持更多情况”而不断加组件时，很可能方向已经错了。

对你来说，最实际的行动建议是：回头看你们当前最复杂的一个 UI 容器（modal、drawer、card），问自己一句——哪些部分真的需要进设计系统，哪些其实只是内容？

当你把这条线划清，设计系统会第一次感觉「越用越轻」。这正是 AI 时代最稀缺的能力之一。

关键词： Figma， 设计系统， Scoped Slot， 组件架构， AI 产品设计

事实核查备注： 视频来源：Figma Config；发布时间：2023-11-13；核心概念为 scoped slot components（视频作者自定义命名）；内容基于视频演示的 Figma 组件与 auto layout 操作，无涉及公司或人物观点。