目标：在 Figma 里做一个可复用的按钮组件（Button），包含 3 个尺寸（S/M/L）和 3 个状态（Default/Hover/Disabled）。最后能像“搭积木”一样在页面里直接调用，并且后期改样式只改组件一次即可全局同步。
1）新建一个 Frame，命名为 Button/ 。
2）在 Frame 里放入文字（例如“确定”）。
3）给 Frame 设置填充色（如 #1A73E8）、圆角（如 8）、描边（可选）。
4）文字建议用 14-16px，颜色 #FFFFFF，行高设为 Auto 或 20/24，保证不同语言也不容易挤压。
1）选中按钮 Frame → 点击 Auto layout（Shift + A）。
2）设置方向为水平（Horizontal）。
3）设置 Padding：左右 16，上下 10（先用这一组作为 M 尺寸）。
4）设置 Item spacing：如果按钮里只有文字可为 0；若后面要加图标，可设 8。
5）对齐方式：垂直居中（Align center）。
此时按钮文字变长（例如“立即提交申请”），按钮会自动变宽，不需要你手动拉伸。
1）复制 Button/ 三份，分别命名：Button/S、Button/M、Button/L。
2）分别调整 Auto Layout 的 Padding（示例，可按你的设计规范微调）：
- S：左右 12，上下 8；字体 14
- M：左右 16，上下 10；字体 14/16
- L：左右 20，上下 12；字体 16
3）保持圆角一致（如 8），除非你的规范对不同尺寸有不同圆角。
1）先以 M 尺寸为例，复制出 3 个版本：
- Default：填充 #1A73E8，文字白色
- Hover：填充加深（例如 #1558B0），或加一层轻微阴影（不要同时叠太多效果）
- Disabled：填充变浅（例如 #C9D6F2），文字改为 #FFFFFF 或 #EAF0FF，保证可读但明显“不可点”
2）同样的方法为 S、L 尺寸也准备状态（你可以先做一套，再用组件属性批量管理）。
1）选中 9 个按钮（S/M/L × Default/Hover/Disabled）→ 右键 Create component set（或点击顶部组件按钮）。
2）Figma 会自动生成 Variants。把属性命名为：
- Size：S / M / L
- State：Default / Hover / Disabled
3）命名组件集为：Button（不要加多余系列前后缀）。
4）检查每个 Variant 的层级：文字层放在最上，Auto Layout 生效，避免出现某些 Variant 文字溢出或被裁切。
1）在 Auto Layout 内加入一个 Icon（16x16），放在文字左侧。
2）保持 Item spacing=8；图标颜色与文字一致。
3）如果要做 Loading，可用一个旋转小圆（或图标）替换左侧 Icon，并新增 State=Loading（注意别把状态炸成太多，够用就好）。
1）从 Assets 拖出 Button 组件到页面。
2）在右侧属性面板选择 Size 与 State。
3）只改按钮文案，不要在实例上手动改 Padding/颜色；样式统一在组件里维护。
Q1：按钮宽度不跟文字走？ 检查是否启用了 Auto Layout，以及文字层是否在 Auto Layout 里。
Q2：某个 Variant 字体/圆角不一致？ 选中该 Variant，检查是否被单独覆盖了样式；必要时用“Reset instance”还原。
Q3：Disabled 还像能点击？ 降低对比度，但别让文字不可读；同时可移除阴影与高光。
按钮组件是 UI 体系里投入产出比最高的组件之一。先把“尺寸 + 状态”这两条主线做好，再逐步添加图标、Loading、Danger 等扩展，避免一开始就做成难维护的巨型组件。
