一、变体是什么（一句话）
变体 = 把同一组件的多种样式/状态，合并成一个“组件集”，用属性自由切换。
- 好处：组件库不乱、更新一次全生效、调用极快。
- 典型场景：按钮（类型/尺寸/状态）、输入框、标签、卡片。
二、创建变体（手把手：按钮案例）
1. 先做基础组件（自动布局+样式绑定）
- 画按钮：Frame（Auto Layout）+ 文字 +（可选）图标
- 绑定全局样式：Fill/Text/Effect 用 Color/Text/Shadow Style
- 选中 →
Cmd+Opt+K（Mac）/Ctrl+Alt+K（Win）→ 生成主组件（紫菱形）。
2. 复制多状态/尺寸
复制主组件，做出所有需要的组合：
- Type：Primary（主色）/Secondary（次要）/Outline（轮廓）
- Size：S/M/L
- State：Default/Hover/Pressed/Disabled
建议：先做 M 尺寸 + Default，再复制扩展。
3. 合并为变体（Component Set）
- 框选所有按钮组件
- 右侧属性面板 → Combine as variants → 变成紫色虚线框的组件集。
4. 定义属性（关键！命名规范）
选中组件集 → 右侧 Variants 区：
- 把 Property1 改名为 Type，值：Primary/Secondary/Outline
- 点 + Add property → 新增 Size，值：S/M/L
- 再新增 State，值：Default/Hover/Pressed/Disabled。
5. 修正每个变体样式
选中组件集中的每个小变体，调整对应样式：
- Primary：背景主色、文字白色
- Outline：透明背景、主色描边
- Disabled：灰色、低透明度
技巧：用批量修改（选多个图层一起改）。
三、4种核心属性类型（灵活控制）
1. Variant（下拉切换，最常用）
- 用途：类型、尺寸、状态（如 Type=Primary）
- 调用：右侧下拉选值。
2. Boolean（开关：显示/隐藏）
- 用途：是否带图标、是否加载中
- 操作：选中图标图层 → 右侧 Layer 旁箭头 → 绑定 Boolean（如 ShowIcon）→ 默认 false。
3. Text（文字可改）
- 用途：按钮文案、标签文字
- 操作：选文字层 → 绑定 Text 属性 → 实例可直接改文案。
4. Swap（替换实例）
- 用途：换图标、换头像
- 操作：选图标层 → 绑定 Swap → 实例可右键换图标。
四、日常使用变体（3步上手）
1. 拖入组件集
- 左侧 Assets（Alt+2）→ 搜索组件名（如 Button）→ 拖到画布 → 生成实例（紫空心菱形）。
2. 切换变体（改属性）
选中实例 → 右侧直接改：
- Type：Primary → Outline
- Size：M → L
- State：Default → Hover
- ShowIcon：false → true（显示图标）。
3. 局部覆盖（不影响主组件）
- 改文字：双击直接改
- 改颜色：选中图层 → Fill → 自定义（会标记为“覆盖”）
- 换图标：选中图标 → Swap → 换图标
⚠️ 不能增删图层、不能改结构（会断开关联）。
五、管理与优化（团队协作必看）
1. 新增变体
选中组件集 → 右下角紫色 + → 复制出新变体 → 修改样式 → 自动加入属性矩阵。
2. 重排属性顺序
右侧 Variants → 拖动属性名（如把 Size 放最前）→ 实例默认优先显示靠前属性。
3. 发布与同步
- 库管理员：修改组件集 → Assets → 发布更新（写清版本日志）
- 使用者：打开项目 → 右上角更新红点 → 一键同步所有实例。
4. 避坑要点
- ✅ 命名统一：
Button/Type/Size/State - ✅ 样式绑定 Tokens（颜色/文字/阴影）
- ✅ 用 Boolean 控制显隐，别删图层
- ❌ 不要做太多变体（建议≤3属性，每属性≤4值）
- ❌ 实例别改结构（只能覆盖属性）。