Figma组件库的变体（Variants）具体怎么使用？

一、变体是什么（一句话）

变体 = 把同一组件的多种样式/状态，合并成一个“组件集”，用属性自由切换。

• 好处：组件库不乱、更新一次全生效、调用极快。
• 典型场景：按钮（类型/尺寸/状态）、输入框、标签、卡片。

---

二、创建变体（手把手：按钮案例）

1. 先做基础组件（自动布局+样式绑定）

1. 画按钮：Frame（Auto Layout）+ 文字 +（可选）图标
2. 绑定全局样式：Fill/Text/Effect 用 Color/Text/Shadow Style
3. 选中 → 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）

1. 框选所有按钮组件
2. 右侧属性面板 → Combine as variants → 变成紫色虚线框的组件集。

4. 定义属性（关键！命名规范）

选中组件集 → 右侧 Variants 区：

1. 把 Property1 改名为 Type，值：Primary/Secondary/Outline
2. 点 + Add property → 新增 Size，值：S/M/L
3. 再新增 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值）
• ❌ 实例别改结构（只能覆盖属性）。

---