目标：做一套可复用的按钮组件（Primary），支持：文字自适应、左右图标、S/M/L 三种尺寸、四种交互状态（Default/Hover/Pressed/Disabled）。
1）新建一个页面命名为 UI Kit。
2）创建颜色样式：Primary/Primary Hover/Primary Pressed/Disabled；文本颜色 White 与 Disabled Text。
3）创建文字样式：Button/S、Button/M、Button/L（同字体不同字号与行高）。
1）按 F 画一个 Frame，命名为 Button/ 。
2）在 Frame 内放一个文本层，输入“按钮”。
3）选中 Frame，按 Shift + A 开启 Auto Layout。
推荐设置：方向 Horizontal；Padding 左右 16，上下 10；Item spacing 8；Alignment 选择 Center。
按钮圆角 10（或按你的规范）。
1）选中文本层，把宽度设为 Hug contents。
2）选中按钮 Frame，把宽度设为 Hug contents，高度也设为 Hug。
3）如果你希望按钮在容器内撑满：把按钮 Frame 的宽度切为 Fill container，并在外层容器开启 Auto Layout。
1）在文本左侧放一个 16x16 的图标（可用任意矢量）。
2）把图标与文本一起放在同一个 Auto Layout 中。
3）将图标设为可隐藏：后面会用组件属性控制显示/隐藏。
实践建议：图标与文本都设为 Hug；图标不拉伸。若图标对齐不齐，检查文本基线与 Auto Layout 对齐方式。
复制按钮三份，分别命名 Size/S、Size/M、Size/L。
建议参数：
• S：padding 上下 8、左右 12，字号 12
• M：padding 上下 10、左右 16，字号 14
• L：padding 上下 12、左右 20，字号 16
关键：只改 padding 与文字样式，结构保持一致，这样变体切换不会乱跳。
在每个尺寸上，再做四个状态（或反过来先做状态再做尺寸）。
建议规则：
• Default：Primary 背景，文字白色
• Hover：Primary Hover 背景
• Pressed：Primary Pressed 背景
• Disabled：Disabled 背景，文字 Disabled Text，图标也同步降低不透明度
1）选中任意一个按钮，按 Ctrl/⌘ + Alt + K 创建组件。
2）选中所有按钮（不同尺寸/状态），点击右侧 Combine as variants。
属性命名建议：
• Type：Primary（后续可扩展 Secondary/Tertiary）
• Size：S / M / L
• State：Default / Hover / Pressed / Disabled
• Icon Left：None / On
• Icon Right：None / On
把左图标、右图标设置为组件内的可切换层：
1）进入组件编辑。
2）选中图标层，右侧创建 Boolean property（例如 Icon Left）。
3）把图标的可见性绑定到该属性。
如果你的版本不支持布尔属性，也可以用变体法：Icon=On/Off。
1）文字不居中：检查 Auto Layout 的 Alignment 是否 Center。
2）按钮宽度乱变：确保文本与按钮都用 Hug；只有需要撑满时才用 Fill。
3）切换变体位置跳动：所有变体的结构层级保持一致（同名同层级）。
4）禁用态太“虚”：只降低 30%~50% 不透明度，避免不可读。
把按钮组件放进 Buttons 组件集，并在页面顶部写一段使用说明（尺寸/状态/图标规则）。团队拿到文件后，只需要在实例上切换属性即可完成按钮配置。
