小团队怎么搭设计系统？不用一步到位，从一套按钮开始

很多人一听「设计系统」就头大，觉得那是大厂才玩得起的东西。但我的看法正好相反：小团队更需要设计系统，因为它治的是「今天改个颜色要翻几十个页面」的病。我见过一个三人工作室，做个内部后台，每个页面按钮的圆角都不一样，改版时设计师逐个改到崩溃。

设计系统说白了就是一套「约定好的积木」：颜色、字体、间距、组件，都定义清楚，大家照着用。它的价值不在听起来高级，而在省时间、少出错。但你不用一步到位，小团队从最小可用开始就够了。

第一步定基础。先把颜色抽成几个变量：主色、辅色、成功、警告、错误，别整二十种灰。字体就定义两三个字号档位加一个行高。间距用4或8的倍数，比如4、8、12、16、24。这层东西现在叫 Design Token，本质就是把「这个颜色值」起个名字，写进规范里。

第二步做组件。先从最常用的开始：按钮、输入框、卡片、弹窗。每种组件定清几种状态，比如按钮要有默认、悬停、点击、禁用四态。一套按钮做扎实了，其他组件照葫芦画瓢就行。我通常建议从按钮入手，因为它最常用、状态最全、也最好验收。

落地工具上，Figma 的 Variables 和 Styles 很好用，颜色和间距定义一次，全项目复用，改一处全变。开发那边用 CSS 变量或者 Sass 变量对应起来，两边叫同一个名字，对接就不打架。怕开发不配合？那就把组件做成代码片段直接交付，别只丢设计稿。

有个坑要提醒：设计系统不是一次做完就完事，它得跟着产品长。每加一个新页面，发现需要新组件或新状态，就往里补；发现某条规范没人用，就删掉。我见过有的团队花三个月搭了个豪华系统，结果产品变了几轮，系统成了摆设。

所以我的建议是：这周先花半天把颜色、字体、间距定下来，再花一天做一套按钮组件，用一个正在做的页面当试点跑起来。先让一个页面长得整整齐齐，再谈推广全站。小步快跑，比憋大招实际得多。

标签： 设计系统 UI规范 Design Token