EP04. “组件（Components）与变体（Variants）：做一次，全站共用”

首页 › PC 工具 › Graphic Design · Figma · EP04

约 8 分钟· #EP04#Figma

网站有 12 个页面都用同一个按钮，客户说「按钮圆角改大一点」——用了组件，改一次就全部更新；没用的话，12 页一页页改
主组件（Main component）是母版，实例（Instance）是复制出去的分身；改母版，所有分身跟着变
变体（Variants）把同一种组件的不同版本收在一起，例如按钮的 Primary / Secondary、Default / Hover，切换只要点下拉选单
组件是做「设计系统」的基础，也方便开发者对照着做成 Elementor 的全局组件或代码

重点内容

主组件与实例

	主组件 Main component	实例 Instance
图标	◆ 实心四菱形（紫色）	◇ 空心菱形
修改后	所有实例一起更新	只影响这一个（叫 override）
可以改什么	全部	文字、颜色、图片、显示/隐藏等；不能改结构（例如删掉里面的图层）

建立组件：

先把按钮做好（建议用 EP03 的 Auto Layout 做）
选取按钮 → Ctrl+Alt+K，或右侧面板上方的 Create component 图标
图层图标变成紫色 ◆ 就成功了

使用实例：

复制主组件（Ctrl+C / Ctrl+V 或按住 Alt 拖拉）就是实例
或到左侧 Assets 分页，把组件拖到画布上

改了实例想恢复： 右侧面板实例名称旁的 ⋮ → Reset all changes

找到母版： 选取实例 → 右侧面板按 Go to main component

💡 建议把所有主组件放在同一个页面，例如新建一页叫「Components」，比较好管理。

变体（Variants）

同一个按钮有好几种版本，不要做成好几个独立组件，收进一个 Component set：

属性（Property）	值（Values）
Type	Primary、Secondary、Outline
State	Default、Hover、Disabled
Size	Small、Medium、Large

建立变体：

选取主组件，在右侧面板按 Add variant（或 +），会复制出第二个版本并出现紫色虚线框（Component set）
修改第二个版本的样子（例如改成白底描边）
在右侧面板把属性改名，例如 Property 1 → Type，值改成 Primary、Outline
使用实例时，右侧面板会出现下拉选单，直接切换 Type、State

flowchart TB
    subgraph S["Component set：Button"]
        A["Type=Primary<br/>State=Default"]
        B["Type=Primary<br/>State=Hover"]
        C["Type=Outline<br/>State=Default"]
        D["Type=Outline<br/>State=Hover"]
    end
    S -->|拖出实例| I["页面上的按钮<br/>右侧下拉切换 Type / State"]

组件属性（Component properties）

除了变体，还可以给组件加这些属性，让实例更好用：

属性类型	用途	例子
Text	在右侧面板直接改文字	按钮文字
Boolean	开关某个图层	显示 / 隐藏按钮前面的图标
Instance swap	替换里面的子组件	换成不同图标
Variant	切换变体	Type、State

实操示例：一套网站按钮

用 Auto Layout 做一个 Primary 按钮 → Ctrl+Alt+K 变组件
Add variant 做出 Outline 版本
再加 State：Default、Hover
加一个 Text 属性控制按钮文字、一个 Boolean 属性控制 WhatsApp 图标显示
在各页面放实例，文字改成「立即购买」「联络我们」
客户要求圆角从 8 改成 999（胶囊形）→ 只改主组件，所有页面的按钮一起更新 ✅

团队共用：发布成组件库

Professional 以上方案可以把组件发布成 Team library，其他文件也能用
左侧 Assets → Libraries（书本图标） → Publish
主组件更新后要重新 Publish，其他文件会收到「有更新」通知，按 Update 才会套用

📌 Starter 免费方案不能在团队里发布组件库，组件只能在同一个文件里用。

学完你会

✅ 建立主组件，分辨主组件和实例
✅ 在实例上 override 文字、颜色，必要时 Reset
✅ 用 Variants 把不同版本收进同一个组件
✅ 用 Text、Boolean 属性让组件更好用

常见错误

❌ 直接复制普通物件当按钮：之后要改样式时每个都要手动改。
❌ Primary、Outline 按钮做成两个独立组件：应该用 Variants 收在一起。
❌ 不小心修改了主组件：所有实例都会跟着变，改之前确认选的是 ◆ 还是 ◇。
❌ 在实例里删掉图层：实例不能改结构，要用 Boolean 属性控制显示/隐藏。
❌ Detach instance 太随便：分离后就跟主组件断开，以后不会再同步更新。

Sources

官方文档：

📝 测验一下共 6 题