Figma 直播造设计系统：为什么“组件化”比你想的更残酷也更高效

很多人以为设计系统是“最后再整理的文档工程”，但在这场 Figma Config 的直播里，事实正好相反：系统不是总结出来的，而是被一边做、一边逼出来的。更反直觉的是，最重要的不是按钮，而是看起来最无聊的“间距组件”。这正是高手和普通团队的分水岭。

反直觉的第一课：设计系统不是规划出来的，是直播“磨”出来的

视频一开始，作者就抛出一个几乎所有团队都会踩的坑：别等“设计都差不多了”再做设计系统。他们直接在直播中，从一个几乎空白的画布开始，一边设计、一边暴露问题。

这里的反直觉点在于——没有宏大蓝图，没有完美结构，甚至不断推翻刚做好的东西。作者多次提到“this is what our design system looks like”，而这个“looks like”是动态的、暂时的。

这对 AI 从业者尤其刺耳。我们习惯先定义 schema、接口、规范，再让系统落地；但在真实复杂环境里，系统往往不是设计出来的，而是被约束、被错误、被时间压力一点点逼出来的。设计系统和模型系统一样，真正的敌人不是混乱，而是过早的确定性。

真正的地基不是按钮，而是网格和间距

在进入任何“好看的组件”之前，视频花了相当多时间在 grids 和 spacing 上。八像素网格、统一的间距规则，看起来枯燥，却是整个系统最硬的骨架。

作者明确点出一个当下流行却常被低估的概念：把“空间”也当成组件。不是随手拉个 16px，而是有明确命名、可复用、可被约束的 spacer component。

这件事对工程和 AI 团队的启发非常直接：真正影响系统可扩展性的，往往不是核心能力，而是那些你以为可以“临时处理”的中间层。就像特征工程里的中间表示、prompt 里的格式约定，一旦没有被组件化，系统规模一上来，维护成本会指数级爆炸。

“Baby component”哲学：从最小可复用单元开始

视频中有一个非常有意思的说法——“let's start our first baby baby component”。不是按钮库，不是复杂卡片，而是一个最小、最笨、但可复用的组件。

这里的核心不是“做什么组件”，而是“组件从多小开始”。作者甚至会当场删掉已经画好的东西，只为了让结构更干净。

这和构建 AI 系统时的最佳实践高度一致：不要一上来就做“全功能智能体”，而是从一个可以被复用、被组合、被替换的最小单元开始。真正的系统能力，来自组件之间的关系，而不是单个组件的聪明程度。

在混乱中前进：资产面板、命名和“随时会翻车”的现实

直播里有大量“很不完美”的瞬间：命名打错、组件一堆、资产面板看起来乱糟糟的。作者没有掩饰，反而直接展示“我现在是怎么把自己救出来的”。

这点极其重要。成熟系统不是没有混乱，而是有能力从混乱中恢复。清晰的命名规则、可追溯的组件来源、随时可以调整的结构，让系统具备“自我修复”的可能。

对 AI 团队来说，这意味着：别追求一次性完美的 pipeline，而要设计“允许犯错”的结构。能快速回滚、快速替换、快速定位问题，比任何炫技都重要。

时间压力下的系统观：为什么10分钟也要坚持结构

临近结尾，作者提到只剩下大约 10 分钟，但依然选择继续在系统结构上“推边界”。这不是强迫症，而是一种系统观：哪怕时间不够，也要让结构正确。

这背后隐含的判断是——视觉可以晚点打磨，结构不行。只要结构对了，后续所有迭代都会更快；结构错了，越做越慢。

这对 AI 产品和研究同样适用：模型效果可以逐步提升，但接口、数据流、组件边界一旦定错，后面付出的代价会成倍增加。

总结

这场 Figma 的直播，表面是在“教你做设计系统”，实际上是在展示一种更底层的系统构建哲学：从最小单元开始，把无聊的基础设施做到极致，在混乱中持续重构。对 AI 从业者来说，最大的 takeaway 不是某个具体技巧，而是那种对结构的执念——组件化不是为了好看，而是为了让复杂系统还能继续生长。下次你想直接堆功能、堆模型之前，不妨先问自己一句：我的“间距组件”，真的存在吗？

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

事实核查备注： 视频发布时间（2020-08-04）；视频为 Figma Config 官方内容；提到的八像素网格和 spacer component 是否在完整视频中明确展示；视频整体时长需确认以匹配文章结构。