你将做出什么
做一个“按钮组件（Button）”，包含图标与文字，支持自动撑开宽度，并具备四种常用状态：默认 / 悬停 / 按下 / 禁用。最后用 Variables（变量）统一管理颜色与圆角，方便全局换肤与批量维护。
准备：创建基础按钮（Auto Layout 结构）
- 新建一个 Frame，命名为 Button/ 。
- 选中 Frame，按 Shift + A（Auto layout）。方向选 Horizontal。
- 设置 Padding：左右 16、上下 10；Item spacing（元素间距）设为 8。
- 放入两个元素：左侧 Icon（可用 16x16 占位）与 Text（按钮文案）。
- 对齐方式：垂直居中；宽度建议使用 Hug contents，让按钮随文字自动伸缩。
视觉：圆角、描边与文字样式
- 给按钮容器设置圆角（例如 10）。
- 设置填充色（默认态），文字颜色设置为可读的对比色。
- 如果需要描边：添加 1px Stroke，并设置颜色为稍浅/稍深的同色系。
- 文字建议：12–14px，Medium/Semibold；行高用 Auto 或 140%。
把它做成组件（Component）
- 选中 Button/ ，按 Ctrl + Alt + K（Create component）。
- 组件命名建议：Button / Primary。
- 对 Icon 做可选：把 Icon 图层命名为 Icon，后续可通过属性决定显示/隐藏。
做四种状态（Variant）
- 选中组件，右侧点击 Add variant，创建 Variant 组件集。
- 新增属性：State，并创建 4 个值：Default、Hover、Pressed、Disabled。
- 在不同 State 下调整：
- Hover：填充略亮/略暗（同色系 +5%～10%）。
- Pressed：再深一点；也可把内容整体下移 1px 制造按压感。
- Disabled：降低对比度与饱和度，文字与图标改为灰；可降低不透明度到 40%～60%。
用 Variables 管理颜色与圆角（推荐）
- 打开 Assets → Variables（或右侧 Variables 面板）。
- 创建变量：
- color/button/primary/default
- color/button/primary/hover
- color/button/primary/pressed
- color/button/primary/disabled
- radius/button（数值变量，如 10）
- 把每个 Variant 的填充色绑定到对应变量；圆角绑定 radius/button。
- 好处：以后只改变量就能全局更新；不同主题也能用不同变量集合切换。
可选增强：Icon 开关 + 尺寸（Size）属性
- 新增属性 Icon：On/Off。Off 时隐藏 Icon 图层，并把间距仍保持整齐。
- 新增属性 Size：S/M/L。分别映射不同的 padding 与字体大小（例如 S: 12px，M: 14px，L: 16px）。
快速自检清单
- 按钮宽度是否 Hug contents，文字变长时能自动撑开？
- Hover/Pressed/Disabled 是否有明确差异且可读性足够？
- 颜色/圆角是否已绑定 Variables，方便维护？
- Icon 关闭时是否仍然居中且间距正确？
