做设计系统最先踩的坑，往往不是“不会做组件”，而是按钮这种高频基础件没有从一开始就规范好：尺寸不统一、文案一变就爆版、不同页面出现 5 种圆角与阴影、交付时又很难讲清楚“哪个才是标准”。
这篇教程用一个可直接照做的“按钮组件库”作为例子，带你用 Component + Variants + Auto Layout 把按钮体系一次搭好：以后只需要替换文字/图标、切换状态，就能稳定产出一致的按钮。
开始画之前，先把“按钮会出现的情况”列成清单（越具体越省返工）：
1）尺寸：S / M / L（三档足够）
2）层级：Primary / Secondary / Tertiary（或实心/描边/文字）
3）状态：Default / Hover / Pressed / Disabled（可选：Loading）
4）可选结构：左图标 / 右图标 / 仅图标
5）文案长度：1-8 个字的中文、以及更长的英文（必须测试）
这份清单将直接变成你的 Variants 维度（Properties）。
新建一个 Frame 作为按钮容器，设置 Auto Layout：
1）方向：Horizontal
2）Padding：左右 16，上下 10（先以 M 尺寸为例）
3）Item spacing：8（文字与图标间距）
4）对齐：垂直居中
5）高度策略：固定高度（例如 40），宽度 Hug contents（让文字驱动宽度）
6）圆角：8（按你的品牌规范）
然后放入 2 个子层：Icon（可空）与 Label 文本。Label 建议用统一的文本样式（Text Style），例如：14/20、Semibold。
选中基础按钮 Frame，创建组件（Create component）。接着开始做变体（Combine as variants）。建议属性命名用英文，后续更利于交付与检索：
1）Type：Primary / Secondary / Tertiary
2）Size：S / M / L
3）State：Default / Hover / Pressed / Disabled / Loading
4）Icon：None / Left / Right（如果你要支持）
提示：属性数量不要上来就爆炸。实操里最常见的错误是把“颜色、圆角、阴影”都做成属性，结果维护困难。优先覆盖真实业务的 Type/Size/State。
复制出 S/M/L 三个尺寸变体时，尽量遵循“结构不动，只调数值”的原则：
1）S：高度 32，padding 12/8，字体 12/16
2）M：高度 40，padding 16/10，字体 14/20
3）L：高度 48，padding 20/12，字体 16/24
如果你使用固定高度，记得让容器的 Vertical padding 合理，否则文字会不居中。最稳的方式是：高度固定 + 子项垂直居中。
不同 Type 主要差在：背景、文字颜色、描边、阴影。建议用 Color Styles 管理：
1）Primary：背景品牌主色，文字白色
2）Secondary：背景浅色或白色，描边 1px，文字主色
3）Tertiary：无背景无描边，文字主色（可加 hover 背景）
这样做的好处是：品牌色更新时，只改样式，不必逐个改变体。
状态设计的关键是“可感知但不过度”。一套通用规则如下：
1）Hover：背景亮度 +5% 或加轻微阴影；Secondary/Tertiary 可用浅底色提示悬停
2）Pressed：背景亮度 -5% 或阴影减弱；可加 1px 内阴影模拟按下
3）Disabled：整体不透明度 40%-60%，同时禁用光标与交互（文档说明即可）
4）Loading（可选）：按钮宽度保持不变，Label 透明或替换为“加载中”，居中放置 Spinner
注意：Loading 状态如果让内容宽度变化，会导致布局抖动。做法是给 Label 预留宽度或使用固定最小宽度。
如果你要支持图标按钮，建议不要把“图标内容”做成变体的一部分，而是：
1）保留 Icon 图层（默认隐藏）
2）通过 Icon 属性（None/Left/Right）来控制图标是否显示、以及图标层的位置
3）图标尺寸随 Size 自动切换：S=16，M=18，L=20（根据你的规范）
在 Figma 里可以通过对不同变体里 Icon 的 visible 状态来实现“None/Left/Right”。
最后一步是把组件真正变成可用资产：
1）在组件描述（De ion）里写清：Type/Size/State 的含义与使用场景
2）为 Primary/Secondary 的使用边界给一句规则（例如：Primary 每屏最多一个）
3）把按钮组件放入清晰的库结构：Components / Button / Button
4）给常用按钮做几个示例（Examples），让新人一眼能抄
1）文字变长就爆版：确认容器是 Hug contents，Label 不是固定宽
2）按钮高度不一致：确认所有 Size 都使用同一套高度与 padding 逻辑
3）Disabled 看起来像“灰色但还能点”：在说明里写清交互禁用；视觉上降低对比与饱和
4）Loading 导致布局抖动：保证按钮最小宽度或为 Label 预留宽度
5）组件太难找：命名统一（Button / Button Icon / Icon Button），并放在同一个页面/分组下
按以上步骤做完，你会得到一套“结构稳定、状态齐全、可复用”的按钮组件库。后续再扩展（如 Danger、Success、Icon only）也会非常顺手。
