目标：用一套按钮（Primary / Secondary / Ghost）做一个可复用的 Figma 组件系统，包含尺寸（S/M/L）、状态（Default / Hover / Pressed / Disabled）以及图标开关。最终你会得到：
1）一个按钮主组件（Button）+ 变体（Variants）；2）清晰的属性命名；3）可扩展的样式结构；4）交付时不容易“乱套”的使用方式。
在开始做变体前，先把按钮的内部结构固定下来。推荐层级：
Button（Auto Layout） → Icon（可选） + Label（文本）
关键点：
- Button 容器必须是 Auto Layout，方向水平（Horizontal），垂直居中；
- 统一使用 Padding 控制内边距，不用手动拖宽；
- Label 用文本样式（Text Style），不要每个按钮单独改字号；
- Icon 建议使用 16/20/24 的规范网格，避免图标大小漂移。
创建组件后，新增 Variants，并把第一个属性命名为：
Type：Primary / Secondary / Ghost
建议命名规则：用英文、首字母大写、无空格（或用短横线），避免团队里出现多个近义词（比如 Style、Theme、Kind 混用）。
然后分别设置三种按钮的填充、描边与文字颜色。提醒：Ghost 通常只有描边或透明底，Primary 通常有实心底。
新增第二个属性：
Size：S / M / L
尺寸控制建议只动这三件事：
- Padding（上下/左右）；
- 字号（或 Text Style）；
- 圆角（可选：跟随高度比例）。
尽量不要让同一 Size 的高度在不同 Type 里不一致，否则产品界面会出现“按钮对不齐”的常见问题。
新增第三个属性：
State：Default / Hover / Pressed / Disabled
状态设计的简单公式：
- Hover：背景/描边轻微加深或提升对比；
- Pressed：再加深一点，并可降低阴影；
- Disabled：整体降低对比（透明度、灰阶），同时保证文字仍可读。
注意：不要用“整体 40% 透明度”粗暴处理 Disabled，会让文字可读性和对比度不可控；更稳的做法是分别设定背景/描边/文字的禁用色。
图标是按钮组件里最常见的扩展需求。如果你为“带图标”和“不带图标”分别做变体，很快会爆炸（Type×Size×State×IconOn/Off）。
更推荐：
- 保留一个 Icon 图层，但默认隐藏；
- 将 Icon 的可见性绑定为布尔属性：Icon（True/False）；
- 或者直接把 Icon 作为可替换实例（Instance Swap），命名为 Leading icon。
这样你不会新增任何变体数量，但使用者仍能一键开关或替换图标。
最终属性建议：
Type / Size / State / Icon
示例：
Type=Primary, Size=M, State=Default, Icon=False
如果团队还有“危险操作”按钮，可以再加一维 Tone（Normal/Danger），但不要在早期就过度抽象。
发布给团队/客户前，快速自检：
1）把按钮拖到不同背景（白/浅灰/深色图）上，是否仍清晰可读；
2）把文本改成更长的文案（比如“立即提交申请”），Auto Layout 是否自动撑开；
3）把字号切换为英文或数字（如“PAY NOW”“100%”），是否会偏移；
4）确认 Disabled 仍有足够对比，不会“看不见”。
如果你需要更标准化的交付：
- 把颜色抽成 Color Styles（Primary/Primary-Pressed 等）；
- 在组件描述里写清楚按钮高度与 padding；
- 为每个 Type 定义对应的 CSS Token 名称（例如 btn.primary.bg）。
