我们用 Figma 做一个 Button 组件，支持：Primary/Secondary/Tertiary 三种类型；S/M/L 三种尺寸；默认/悬停/按下/禁用四种状态；可选左图标；可选加载态。最终你会得到一个可以直接塞进设计系统的按钮库。
1）新建一个 Frame，命名为 Button/ 。
2）对 Frame 打开 Auto Layout（Shift+A），方向选 Horizontal。
3）Padding 建议：左右 16，上下 10；Item spacing 8；对齐方式居中。
4）给按钮背景填充颜色（例如 #2563EB），圆角 10；文字使用 14/Medium。
5）把文字图层命名为 Label，避免后续找不到。
1）选中 Button/ → Create component。
2）把组件做成 Component set，创建 Variant：Type=Primary/Secondary/Tertiary。
3）再添加 Variant：Size=S/M/L；不同 Size 主要改 Padding 与字体大小（例如 S=12px 字体，L=16px 字体）。
4）再添加 Variant：State=Default/Hover/Pressed/Disabled；通过填充色/描边/透明度区分状态。
1）在按钮 Auto Layout 内，Label 左侧放一个 Icon 占位（16x16）。
2）把 Icon 图层命名为 Icon，并将其创建为 Boolean property：Has icon=true/false。
3）Has icon=false 时隐藏 Icon；同时保持 Item spacing 不变，让布局自动收缩。
1）新增一个 Spinner 图层（也可用简单圆形描边旋转），命名为 Loading。
2）设置 Boolean property：Loading=true/false。
3）Loading=true 时：显示 Spinner；可选隐藏 Label 或把 Label 文案改为“加载中…”。建议隐藏图标，避免按钮过挤。
1）把圆角、Padding、字体做成可复用的变量或样式：例如 radius/button=10，space/button-x=16。
2）以后你改一处，所有按钮都会同步。
1）在组件集里为 Default 变体添加交互：While hovering → Change to Hover；While pressing → Change to Pressed。
2）Disabled 不需要交互；保证对比度与可读性即可。
• 文案是否居中且不会被撑爆（建议 Label 设为 Hug contents）。
• 图标隐藏时，按钮宽度是否自动收缩。
• Loading=true 时，布局是否仍然居中且不跳动。
• 各状态颜色是否满足可读性（尤其是 Disabled）。
• 增加 Danger/Success 类型；
• 增加 Icon-only 按钮；
• 增加左右两侧图标；
• 用 Instance swap 切换不同图标库。
