一套可复用、可扩展、可交付给团队的按钮组件：支持尺寸（S/M/L）、层级（Primary/Secondary/Ghost）、状态（Default/Hover/Pressed/Disabled/Loading）等组合，并且能在面板里用属性快速切换。
新建一个 Frame，放入文字层（例如“Button”）。
选中 Frame，按 Shift + A 开启 Auto Layout，方向设为水平（Horizontal）。
设置 Padding：左右 16，上下 10；Spacing 8（后续支持图标时会用到）。
宽度建议先用 Hug contents，高度用 Fixed（更容易做统一尺寸）。
小技巧：把文字的 Line height 固定（例如 20），这样不同文本长度时按钮高度更稳定。
复制 3 份按钮骨架，分别调整：
S：高度 32，左右 padding 12，上下 8
M：高度 40，左右 padding 16，上下 10
L：高度 48，左右 padding 20，上下 12
保持文字样式一致（例如 14/20），尺寸差异主要来自高度与 padding。
Primary：实心背景（例如 #1F6FEB），文字白色；圆角 10（或与你的品牌一致）。
Secondary：浅色背景（例如 #F2F4F7），文字深色；可加 1px 内描边。
Ghost：无背景，文字深色；Hover 时给一个浅色背景或下划线提示。
建议把颜色都绑定到 Color Style（如 Button/Primary/BG），后面维护会非常省心。
每个层级都需要对应状态，常见做法：
Hover：背景加深 6%~10%，或描边更明显；不要只改阴影，容易看不出来。
Pressed：背景再加深一点，同时减少阴影或让按钮“下沉”。
Disabled：整体降对比（降低填充透明度、文字变浅），并且禁用光标提示。
Loading：用一个小圆形 spinner + 文案（或仅 spinner），并固定宽度避免布局跳动。
Loading 的关键：把按钮容器宽度设为 Fixed（基于最长文案），避免从“提交”切到 spinner 时尺寸抖动。
选中所有按钮实例（建议先只做 M 尺寸的 Primary），点击 Combine as variants。
在右侧为变体命名属性：Size、Type、State。
把每个变体按规则命名，例如：Size=M, Type=Primary, State=Default。
补齐其它组合：先按一个维度复制（例如 State），再逐层扩展（Type、Size）。
实操建议：先把 “最常用组合” 做完整（M + Primary/Secondary + Default/Hover/Disabled），再补齐剩余；这样即使中途停下也能交付。
在 Auto Layout 内加入 Icon 层（16x16），并设置可见/不可见。
用一个属性控制：Icon=None/Left/Right。
注意图标与文字的基线：一般让图标垂直居中，文字保持原 line-height。
组件命名：Button（主组件），属性名用英文且短（Size/Type/State/Icon）。
样式抽离：颜色、字号、圆角尽量用 Styles/Tokens，减少“散落在各处的硬编码”。
在组件页加一个用法说明（几行即可）：默认用 M、表单提交用 Loading、禁用用 Disabled。
发布到 Library，给版本号（例如 v1.0），写变更说明（新增 State=Loading）。
按钮高度不一致：检查文字 line-height 是否一致，容器是否用了 Hug 而不是 Fixed。
Hover 看不出来：不要只改阴影；优先改背景/描边/文字色。
Variants 属性太多：先做核心三件套（Size/Type/State），Icon 放到下一版。
Loading 布局抖动：把容器宽度固定到最长文案的宽度。
默认按钮：Size=M, Type=Primary, State=Default；次要操作：Type=Secondary；破坏性操作可额外加 Type=Danger（下一篇可扩展）。
