如何在Figma中使用组件库？

一、先分清三个核心概念（必懂）

• 组件库 Library：单独文件，里面放所有主组件、样式、变量，发布后全团队共享。
• 主组件 Main Component：库文件里的原始模板，紫色实心菱形，改它会同步所有实例。
• 实例 Instance：从库拖出来的副本，紫色空心菱形，跟随主组件，但可局部覆盖。

---

二、第一步：在项目中「启用组件库」

你要先用库，才能拖组件。

1. 打开你的项目文件

2. 左侧点 Assets（资源），快捷键：Alt+2（Win）/ Option+2（Mac）

3. 右上角点 书本图标（Library）

4. 在列表里找到团队发布的组件库（如 DesignSystem_组件库）

5. 打开开关 → 库已启用，里面所有组件都可调用

找不到库？让管理员确认：已发布到团队、你有查看权限。

---

三、第二步：从库中「拖入组件」

1. 找到组件

• 在 Assets 面板里：
  • 直接搜索：Button / Card / Input
  • 或按文件夹浏览：Base → Buttons

2. 拖入画布

• 点住组件 → 拖到画布 → 松手，生成实例（空心紫菱形）

3. 快速替换

• 选中实例 → 右侧 Swap → 直接换同类型组件（如 Button → IconButton）

---

四、第三步：用「变体 Variants」切换状态（最常用）

如果组件有多种类型/尺寸/状态（如按钮：主色/轮廓/禁用），直接在右侧切换。

1. 选中实例（如按钮）

2. 右侧 Variants 区域：

   • Type：Primary（主色）/ Secondary（次要）/ Outline（轮廓）/ Danger（危险）
   • Size：S / M / L
   • State：Default / Hover / Pressed / Disabled

3. 下拉切换 → 样式瞬间变化，不破坏关联

常见变体属性

• Boolean（开关）：ShowIcon（是否显示图标）、Loading（加载中）

• Text（文字）：按钮文案、输入框提示

• Swap（替换）：换图标、换头像

---

五、第四步：实例「局部覆盖」（不改主库）

实例可以自由改文字、颜色、尺寸、图标，但不能改结构（增删图层）。

可安全覆盖（推荐）

• ✅ 双击文字 → 改文案（如“提交”→“确认订单”）
• ✅ 选中图层 → Fill → 自定义颜色（会标记为“覆盖”）
• ✅ 整体缩放 → 改实例尺寸（内部比例不变）
• ✅ 图标层 → Swap → 换图标

绝对禁止（会断开关联）

• ❌ 删除图层（如删掉文字层）
• ❌ 新增图层（如加个图片）
• ❌ 改内部图层结构（如移动文字位置）

---

六、第五步：组件库「更新与同步」（团队协作关键）

当管理员修改了主组件并发布新版本，你需要同步更新。

1. 收到更新提示

• 项目右上角出现红点 + Library Update
• 打开 Assets → 顶部显示：Update available

2. 一键更新

• 点 Update Library → 所有实例自动同步主组件的修改（如圆角、色值、间距）
• ✅ 你之前覆盖的属性（自定义文字/颜色）会被保留，不会被覆盖

3. 版本回退（可选）

• 右上角 Library → 选 View History → 可回退到旧版本

---