组件与设计系统 —— 从按钮到 Design Token

本课导读

前三课立了三套刻度：字阶、间距、色板。但刻度写在笔记里没有强制力——真正让它们"每次都被遵守"的机制，是把刻度变成资产：变量（Design Token）、组件、模式，合起来叫设计系统。本课讲清这套金字塔怎么搭、token 为什么要两层命名，以及一个反直觉的结论：设计系统的本质不是一份文件，是设计与开发之间的契约。这也是进 Figma 实操前的最后一节理论课。预计 40 分钟。

从复制粘贴到组件：改 1 处还是改 47 处

没有组件的世界：设计稿里 47 个按钮是 47 次复制粘贴的产物。某天圆角从 8 改成 4——祝你好运，一定会漏。组件的世界：画一个主组件（component），其余 47 处放的都是实例（instance），改主组件，47 处齐步走。

写过代码的话，这就是你早就懂的道理：组件是界面的函数。定义一次、到处调用、参数控制差异——设计工具只是把 DRY 原则搬进了画布。没写过代码也一样能懂：组件是"模具"，实例是"铸件"，改模具不改铸件。

一个按钮的完整人生：五个状态

新手画按钮只画一张"完好"的：蓝底白字圆角矩形。但真实按钮活在流转里，至少五个状态：

状态	什么时候	常见做法
default	平时	基准样式
hover	鼠标悬停	加深/提亮一档
focus	键盘 Tab 选中	外圈 focus ring——键盘用户的光标，不许删
active	按下瞬间	再深一档或轻微下沉
disabled	不可用	降对比、禁指针（disabled 是唯一允许低对比度的文字）

再加常客 loading（转圈时按钮文字怎么办？宽度会不会跳？）。设计一个按钮 = 设计一张状态表；只交一张"完好照"的设计稿，剩下五个状态就是在让开发替你即兴设计。这个道理适用于一切组件：输入框有 error 态、列表有空态（Onboarding 单元的空状态课在这里接上了）、页面有加载态。状态齐全，是"设计稿能开工"的及格线——和 PRD 单元"写到无歧义"是同一条纪律。

金字塔：Token → 组件 → 模式

设计系统是座三层金字塔，每层踩着下层搭：

1. Token（原子）：颜色、字号、间距、圆角、阴影——前三课的全部刻度，一个刻度一个具名变量
2. 组件（分子）：按钮、输入框、卡片、导航——用 token 搭出来的可复用零件，各带状态表
3. 模式（组织）：登录流程、空状态设计、欢迎消息、产品导览——组件的惯用组合拳，解决重复出现的场景问题

看出来了吗：Onboarding 单元学的那一柜子模式，全住在第三层。三个单元在金字塔上会师。

Design Token：两层命名的玄机

Token 的命名分两层，这是本课最值得带走的一个设计：

• 原始层（primitive）：描述值本身——gray-900、blue-500、space-4、font-size-20
• 语义层（semantic）：描述用途——text-primary、bg-panel、border-line、accent

组件只许引用语义层，语义层再映射到原始层。为什么绕一道？因为换肤时只改映射：text-primary 从指向 gray-900 改成指向 ink-800，全站文字色一次到位，组件一个不用动。

这不是纸上谈兵——学径的百科风换肤就是这么干的：CSS 变量就是 token 的代码形态，改版改的是 wiki-theme 作用域里那一层变量映射，而不是挨个页面改色值。你在第三课练习里挑的语义色，命名成 success/warning/danger/info 的那一刻就已经在语义层了——语义色天生是 semantic token。

别从零造：站在设计系统的肩膀上

成熟的公开设计系统——Google 的 Material Design、蚂蚁的 Ant Design、开发者圈大热的 shadcn/ui——都带着完整的 token、组件库和文档。实用主义的姿势：

• 学习期：读它们的文档比读教程更有营养。Material 对"海拔"（elevation）的定义、Ant 对表单校验时机的规定，都是踩坑踩出来的结论
• 干活期：中后台、内部工具直接用现成的，把设计资源省给用户可感知的差异化部分
• 自建期：只有品牌本身是卖点的产品（消费级 App、内容产品）才值得从 token 层开始自建——学径这种"百科气质即产品个性"的场景就属于此列

设计系统的本质：一份契约

最后校正一个常见误解：设计系统不是"设计师的规范文档"，而是设计与开发共享的一套词汇表。设计稿里的 space-6 就是代码里的 --space-6（CSS 变量）或 p-6（Tailwind），Figma 里的语义变量对应代码里的语义变量——两边引用同一套名字时，"标注 13px 实现 12px"这类扯皮在语言层面就消失了。

下一课进 Figma，你会看到本课每个概念都有一个对应的按钮：组件对 Component、变体对 Variants、token 对 Variables。理论课到此收官。

✍️ 练习

练习 1：给学径的按钮写状态表

观察学径界面里的主要按钮（课程页的"开始学习"、笔记的保存等），给它写一张五状态表（default/hover/focus/active/disabled + loading）：每个状态描述外观差异，标注哪些状态现在可能缺失。用语义 token 名（如 accent、text-on-accent）而不是具体色值来写。

✅ 参考答案

合格样例（描述方式不唯一）：default：bg-accent + text-on-accent；hover：bg-accent-strong（深一档）；focus：外圈 2px ring-accent（不许省——键盘用户的光标）；active：bg-accent-strong + 轻微下沉；disabled：bg-muted + text-disabled、指针禁用；loading：保持宽度不跳（用固定宽或占位 spinner），文字换转圈。自查两点：① 是否全程没出现一个色值（出现 #xxx 就还在原始层思考）；② 是否发现了实际产品里缺失的状态——缺失本身就是有效的审计产出。

练习 2：把三课刻度装进两层命名

把第二课的字阶间距、第三课你挑的色板，写成一份两层 token 表：左列原始 token（gray-900、space-4、text-20），右列语义 token（text-primary、gap-group、title-md），并回答：假如学径哪天真出深色主题，你这份表里哪一层要动、哪一层一个字都不用改？

✅ 参考答案

要动的是语义层到原始层的映射（text-primary 从指向 gray-900 改指向 gray-50，bg-page 从米白改近黑——甚至需要为深色补几个新原始值），组件引用的语义名一个不改。若你的答案是"改原始层的值"（把 gray-900 的色值改掉）也能跑，但等于让浅色主题失去这个灰——正确姿势是原始层只增不改，映射层按主题切换。这正是深色主题"技术上一层映射就能切"而"设计上是第二套系统"的分界线。

📝 随堂测验

随堂测验0 / 5 题正确

1. '组件是界面的函数'这个类比，对应关系是？

A组件对应注释，实例对应代码B主组件是函数定义、实例是调用、变体是参数——定义一次到处调用，改定义处处生效C组件对应数据库，实例对应查询D组件对应类，实例对应接口

2. 为什么说'只画 default 态的设计稿'不及格？

A因为文件尺寸不够大Bhover 态是法律要求C组件活在流转里——缺的 hover/focus/disabled/loading 态等于让开发即兴设计；状态齐全是'能开工'的及格线，与 PRD 写到无歧义是同一条纪律D因为 Figma 不支持单状态组件

3. token 两层命名（primitive → semantic）的核心收益是？

A名字更长，可读性更强B两层可以由两个团队分别维护C原始层能自动生成D组件只引用语义层，换肤时只改'语义→原始'的映射——学径百科风换肤只动一层 CSS 变量，正是此机制

4. Onboarding 单元学的'欢迎消息、产品导览、空状态'，在设计系统金字塔里位于？

A模式层——组件的惯用组合拳，解决重复出现的场景问题；金字塔是 token → 组件 → 模式Btoken 层，因为它们都有配色C组件层，因为它们是可复用的D金字塔之外，属于产品经理的领域

5. '设计系统的本质是契约'指的是？

A需要法务审核设计规范B设计与开发共享同一套词汇——Figma 的语义变量对应代码的 CSS 变量，两边引用同一套名字，'标注 13 实现 12'的扯皮在语言层面消失C设计系统一旦发布就不可修改D使用开源设计系统需要签署许可协议

本课小结

• 组件 = 界面的函数：主组件定义、实例调用、变体传参——改 1 处不改 47 处
• 组件要交状态表：按钮五状态 + loading；状态齐全是设计稿的及格线
• 金字塔：Token → 组件 → 模式；Onboarding 的模式柜住在第三层
• Token 两层命名：原始层记值、语义层记用途，组件只引用语义层——换肤只改映射（学径换肤实证）
• 别从零造：学习期读 Material/Ant 文档，干活期用现成，品牌即产品时才自建
• 设计系统是设计与开发的契约：同一套名字，消灭标注扯皮

理论四课齐了：原则（1）→ 刻度（2、3）→ 资产（4）。下一课打开 Figma，把这一切落到画布上——Auto Layout、Components、Variables，每个概念都有个按钮等着你。