目标是做一套“真能复用”的按钮组件：同一套组件覆盖主按钮/次按钮/文字按钮，支持尺寸（S/M/L）、状态（默认/悬停/按下/禁用/加载）、是否带图标，并且命名清晰，方便开发还原。
在开始画之前，先把按钮规范写清楚。建议按这 4 件事定标准：
1）尺寸：高度 32/40/48（S/M/L）；左右内边距 12/16/20；图标间距 8。
2）圆角：8（或与你的设计系统一致）。
3）文字：14/16；字重 500；行高 20/24（保持垂直居中好看）。
4）状态颜色：默认、hover、pressed、disabled；文本/背景/描边三套都要定义。
小技巧：如果你还没定品牌色，先用灰阶 + 一个强调色也能跑通整个组件系统。
把“会复用的东西”先做成样式，后面改规范就不用逐个组件改：
- Color Styles：Primary/PrimaryHover/PrimaryPressed/DisabledBg；TextOnPrimary；BorderDefault 等。
- Text Styles：Button/14/Medium（或 Button/16/Medium）。
- Effects：如按钮投影（如果用的话），也做成 Effect Style。
这样做的好处是：当品牌色或灰阶调整时，你只改样式，组件会自动更新。
1）新建一个 Frame 作为按钮容器，按 Shift + A 开启 Auto Layout。
2）在容器里放两层：左图标（可选） + 文案（必选） + 右图标（可选）。
3）设置 Auto Layout：
- Padding：左右 16，上下 10（对应高度 40 左右；按你的规范调整）。
- Item spacing：8（图标与文字的间距）。
- Alignment：垂直居中。
4）容器宽度设置为 Hug contents，后续就能根据文案自动伸缩。
把按钮骨架做成组件（Create component）。然后用 Combine as variants 建立变体，建议用以下维度：
- Type：Primary / Secondary / Ghost（或 Text）
- Size：S / M / L
- State：Default / Hover / Pressed / Disabled / Loading
- Icon：None / Left / Right / Both
命名示例：Button / Type=Primary, Size=M, State=Default, Icon=Left
注意：维度不要太多，否则变体数量会爆炸。你可以先做 Type + Size + State，Icon 用布尔属性（可选图标层）来控制。
如果你用的是新版本 Figma，推荐用组件属性（Component properties）来减少变体：
- IconVisible（Boolean）：控制图标层显示/隐藏。
- IconSwap（Instance swap）：允许把“左图标”替换成任意图标组件。
- Label（Text）：允许直接改按钮文案，但保持文本样式一致。
把“可变化内容”交给属性，把“视觉状态”交给 State 变体，组合最清爽。
禁用态（Disabled）常见问题是对比度不够或看不出是否可点击。建议：
- 背景/描边降低对比度；
- 文案颜色同步降低，但保证可读；
- 光标与交互在原型里标注清楚（disabled 不触发 click）。
加载态（Loading）建议用：
- 文案保持或替换为“加载中”；
- 加一个 16x16 的 spinner（放在文案左侧），并固定按钮宽度，避免加载时按钮跳宽。
为了让团队都用同一套按钮，建议在组件旁边放一页说明：
- 何时用 Primary/Secondary/Ghost；
- 不同 Size 的使用场景；
- 文案长度上限建议（如 2-6 个字更稳）；
- 图标使用规则（仅在需要强化含义时使用，避免装饰性图标）。
交付建议包含三部分：
1）Token：颜色、圆角、间距、字体（尽量来自样式）。
2）状态说明：hover/pressed/disabled/loading 的触发条件与视觉变化。
3）图标资源：提供统一的图标组件库，避免每个人随意贴图。
如果你团队用 Dev Mode，把组件命名规范好（Button/Primary/M 等），开发查找会非常快。
- Auto Layout 没设置 Hug contents，导致按钮宽度固定、文案溢出。
- 变体命名不一致（Default/Normal 混用），后期维护痛苦。
- Icon 图层没有做可隐藏属性，导致“无图标”也占位。
- 加载态按钮宽度变化，页面抖动。
- 禁用态对比度过低，用户看不清。
你可以先做 Primary + Secondary 两类按钮、一个尺寸（M）和 3 个状态（Default/Hover/Disabled），团队开始用起来后，再补齐其它尺寸与加载态。组件系统越早进入真实项目，越容易发现需要补的细节。
