你将做出什么
目标：做一套可复用的按钮组件（Primary / Secondary / Ghost），包含 3 种尺寸（S/M/L）、4 种状态（Default/Hover/Pressed/Disabled），并且用 Variables 控制颜色与圆角，让后期换主题/改规范不需要逐个改图层。
准备：建立按钮的基础结构
- 新建一个 Frame，命名为 Button/ 。
- 对 Frame 打开 Auto layout：方向 Horizontal；Padding 建议（M 尺寸）左右 16、上下 10；Item spacing 8；对齐 Center。
- 在内部放两个元素：可选图标（Icon）+ 文本（Label）。没有图标时也要保留占位逻辑：后面用组件属性控制显示/隐藏。
- 给 Label 设定文本样式（如 14/20，Medium）。建议把文本样式命名为 Text/Button/14，避免混用正文样式。
建立 Variables：颜色、圆角与透明度
在右侧面板打开 Variables（或通过 Assets → Local variables）。建议创建 3 组变量：Color、Radius、Opacity。
- Color：至少建立 btn/primary/bg、btn/primary/fg、btn/secondary/bg、btn/secondary/fg、btn/ghost/fg、btn/border。
- Radius：建立 btn/radius（如 10）。后续如果规范改为 12，只改变量即可。
- Opacity：建立 btn/disabled（如 40%）。禁用态不要手改每层透明度。
把 的填充、边框、文字颜色、圆角都绑定到对应 Variables（右侧属性旁的小方块 → 选择变量）。
做三种尺寸：S / M / L
建议把尺寸差异限定在 Padding、字体大小、图标尺寸三处，避免“看起来差不多但数值不同”的灾难。
- 复制 得到 Button/Size=S、Button/Size=M、Button/Size=L。
- S：Padding 12x8，文字 12/16；M：16x10，文字 14/20；L：20x12，文字 16/24。
- 图标尺寸与文字联动：12/14/16 三档即可。
做三种层级：Primary / Secondary / Ghost
- Primary：有填充；文字用浅色（fg）。
- Secondary：浅底 + 边框（1px）；文字用深色。
- Ghost：无填充；保留文字/图标颜色；Hover 时可以加一层轻微背景（也用变量控制）。
关键点：不要把颜色写死在图层上，全部绑定变量；这样切换品牌色、暗色主题或节日皮肤时成本最低。
做四种状态：Default / Hover / Pressed / Disabled
推荐用 Component variants 来做状态。创建组件后，使用属性：Type（Primary/Secondary/Ghost）、Size（S/M/L）、State（Default/Hover/Pressed/Disabled）、Icon（On/Off）。
- Default：基础变量。
- Hover：背景变量轻微提亮/加深；边框/文字可微调。
- Pressed：背景再加深；可增加 1px 内阴影或下移 1px（谨慎，保持一致）。
- Disabled：把整体不透明度绑定到 btn/disabled；同时禁用交互提示（在原型里不触发）。
可直接照做的命名与约束规范
- 组件命名：Button；属性命名用英文且首字母大写：Type/Size/State/Icon。
- 文本层叫 Label，图标层叫 Icon；图标外再套一层 Frame 叫 IconWrap，便于对齐与隐藏。
- 按钮宽度建议默认 Hug contents；需要固定宽度时，用组件实例外层约束（不要在组件内部硬写固定宽）。
原型交互：把 Hover/Pressed 自动连起来
- 进入 Prototype：Default → On hover 切到 Hover；Hover → While hovering 保持；Hover → On mouse down 切到 Pressed；Pressed → On mouse up 切回 Hover；Hover → On mouse leave 回 Default。
- Disabled 不需要交互连接，避免误导。
- 动效建议用 Smart animate，时长 100–150ms，ease out。
常见坑与排查清单
- Hover 颜色“看起来不对”：优先检查是不是某一层没绑定变量，或有覆盖的局部样式。
- 图标不居中：检查 IconWrap 是否是固定尺寸并居中对齐；不要直接对 Icon 做约束。
- 同一套按钮在不同页面高度不一致：统一 Line-height（如 20/24），并确保 Auto layout 的 Vertical padding 数值固定。
- 禁用态太灰：不要同时改颜色+透明度；推荐只用透明度变量统一处理。
你可以怎么扩展
下一步建议：增加 Loading 状态（Spinner 组件）、Icon-only 按钮、分裂按钮（Split Button）。这些都可以沿用同一套变量与属性，不需要推翻重做。
