目标：做一套“可切换浅色/深色主题”的按钮组件（Primary / Secondary），并且包含 3 个常用状态（Default / Hover / Disabled）。完成后你会得到：
1）一个按钮主组件（Auto Layout 结构正确）；2）一个 Variant 组件集（类型 + 状态）；3）一组 Variables（颜色/圆角/间距）作为设计令牌，后续改主题只改变量。
1. 打开 Assets → Local variables（或右侧面板 Variables）。新建一个集合：ButtonTokens。
2. 新建以下变量（建议命名清晰，后续好维护）：
Color / Light：
- btn.primary.bg = #1A73E8
- btn.primary.text = #FFFFFF
- btn.secondary.bg = #F2F4F7
- btn.secondary.text = #111827
- btn.disabled.bg = #E5E7EB
- btn.disabled.text = #9CA3AF
Color / Dark：
- btn.primary.bg = #4F8CFF
- btn.primary.text = #0B1220
- btn.secondary.bg = #1F2937
- btn.secondary.text = #F9FAFB
- btn.disabled.bg = #374151
- btn.disabled.text = #6B7280
3. 在集合里创建 2 个模式（Modes）：Light 和 Dark，把每个变量在两种模式下分别赋值（如上）。
1. 新建一个 Frame，命名为 Button/ 。
2. 给它开启 Auto Layout：Horizontal；对齐：Center；Spacing：8。
3. Padding 建议：左右 16、上下 10（后续也可做成变量，例如 space.x / space.y）。
4. 放入两层内容：
- 一个 Text：例如 “Button”
- （可选）一个 Icon Frame（16x16），用来承载图标
5. 关键检查：
- 文本的 Resizing：Hug contents
- Button/ ：Hug contents（至少宽度可 Hug），这样按钮会随文字变化而自适应
1. 选中 Button/ → 右键 Create component。
2. 再点击 Add variant，让它变成一个组件集（Component set）。
3. 建议两个属性（Properties）：
- Type：Primary / Secondary
- State：Default / Hover / Disabled
4. 复制并排好 2 × 3 共 6 个 Variant。
1. 给 Primary 按钮的 Fill 绑定变量：btn.primary.bg。
2. 文字颜色绑定变量：btn.primary.text。
3. Secondary 同理：Fill → btn.secondary.bg；文字 → btn.secondary.text。
4. Disabled：Fill → btn.disabled.bg；文字 → btn.disabled.text。并把透明度设为 100%（避免不一致），用变量来控制“灰掉”的效果。
5. 圆角（Corner radius）建议也做成变量：比如 radius.button = 10（Light/Dark 可一致）。
方法 A（推荐，简单可靠）：为 Hover 单独加一组变量，例如：
- btn.primary.bg.hover
- btn.secondary.bg.hover
然后 Hover Variant 绑定对应变量。
方法 B（进阶）：用 Color mix / lighten（如果你的 Figma 版本支持变量计算），从基础色推导 Hover 色，减少维护成本。
1. 在你的页面上实例化按钮组件。
2. 选中任意实例，在右侧 Variables 面板，把集合 ButtonTokens 的 Mode 从 Light 切到 Dark。
3. 观察：所有绑定了变量的 Fill/Text/Radius 会同步切换，不需要手改组件。
- 按钮宽度不跟文字走：检查 Button Frame 和 Text 是否都是 Hug contents。
- 切主题没变化：检查是否真的“绑定变量”，而不是直接填了颜色值。
- Hover/Disabled 看起来不一致：确认每个 Variant 的颜色都来自同一套变量命名规则。
- 组件越来越难维护：属性名尽量少而稳定（Type/State 足够），不要把尺寸也做成 Variant（尺寸用变量或实例覆盖更灵活）。
1）加入 Size（S/M/L）但用 Padding 变量控制；2）加入 Icon-only 按钮；3）把 Typography（字号/字重）也变量化；4）把按钮 token 复用到输入框、Tag 等组件，形成统一设计系统。
