Figma 进阶：组件与变体

引言

Figma 的组件系统是构建设计系统的核心基础设施。但很多设计师对组件的使用停留在"复制粘贴然后修改"的层面，没有充分利用组件属性、变体和自动布局的高级功能。本文从组件属性出发，逐步深入到变体系统、设计令牌和团队库发布，帮助你构建一个真正可维护的设计系统。

一、组件属性（Component Properties）

组件属性是 Figma 2023 年引入的功能，但很多设计师还没有充分利用。它让你在实例面板中直接修改组件的特定属性，而无需进入组件内部。

1.1 文本属性（Text Property）

将按钮的文本创建为文本属性后，使用者可以直接修改按钮文字，而不需要分离实例。

• 适用场景：按钮文字、标签、标题、描述文本
• 创建方法：选中组件内的文本图层，在右侧属性面板点击"创建组件属性"图标

1.2 布尔属性（Boolean Property）

布尔属性控制图层的显示/隐藏。例如，一个带图标的按钮，可以通过布尔属性控制是否显示图标。

• 适用场景：显示/隐藏图标、显示/隐藏徽章、切换状态指示器
• 创建方法：选中图层，在图层属性中创建布尔属性

1.3 实例交换属性（Instance Swap Property）

允许在组件实例中替换嵌套的组件实例。例如，按钮中的图标可以通过实例交换属性替换为不同的图标。

• 适用场景：图标替换、头像替换、插画替换
• 创建方法：选中嵌套的组件实例，创建实例交换属性

二、变体与变体属性

变体（Variants）是将多个相关组件组织在一起的机制。最常见的例子是按钮的多种状态：Default、Hover、Pressed、Disabled。

2.1 创建变体

1. 选中多个组件（如 Default 按钮、Hover 按钮、Disabled 按钮）
2. 右键选择"合并为变体"（Combine as Variants）
3. Figma 自动识别差异并创建变体属性

2.2 变体属性的命名规范

# 属性命名示例：按钮组件
属性 1: Type = Primary | Secondary | Tertiary | Ghost
属性 2: State = Default | Hover | Pressed | Disabled
属性 3: Size = Small | Medium | Large

# 属性命名示例：输入框组件
属性 1: State = Default | Focus | Error | Disabled
属性 2: HasIcon = True | False
属性 3: IconPosition = Left | Right

2.3 变体属性的最佳实践

• 属性顺序：将最常用的属性放在最前面，通常是 Type > State > Size
• 命名一致性：整个设计系统中统一使用相同的属性命名（如都用 Size 而不是有时用 Size 有时用 Dimension）
• 避免过度拆分：如果两个变体差异很小（如仅颜色不同），考虑使用变量绑定而不是创建新变体

三、自动布局嵌套

自动布局（Auto Layout）是 Figma 的布局引擎，类似于 CSS 的 Flexbox。嵌套自动布局可以实现复杂的响应式 UI。

3.1 常用自动布局模式

# 卡片组件结构（嵌套自动布局）

[Card] - Auto Layout: Vertical
  ├── [Image] - Fill Container
  ├── [Content] - Auto Layout: Vertical, Padding 16px
  │   ├── [Title] - Auto Layout: Horizontal, Space Between
  │   │   ├── Text "标题"
  │   │   └── Badge
  │   └── [Description] - Text
  └── [Footer] - Auto Layout: Horizontal, Space Between, Padding 16px
      ├── [Author Info] - Auto Layout: Horizontal, Gap 8px
      │   ├── Avatar
      │   └── Text "作者名"
      └── [Date] - Text

3.2 自动布局的关键属性

• Hug Contents：容器大小跟随内容变化
• Fill Container：填满父容器可用空间
• Fixed：固定宽度或高度
• Space Between：两端对齐（类似 CSS justify-content: space-between）

四、组件集（Component Sets）

组件集是变体的容器。一个组件集可以包含多个变体，每个变体代表组件的一种状态或配置。组件集的最佳实践：

• 一个组件集 = 一个 UI 元素：如按钮、输入框、下拉菜单各是一个组件集
• 说明文档：在组件集旁边添加说明文字，描述使用方法和属性含义
• 缩略图：合理排列变体，让缩略图在资产面板中清晰可辨

五、设计令牌与 Figma 变量

Figma 变量（Variables）是设计令牌（Design Tokens）在 Figma 中的实现。它们让你在一个地方定义颜色、间距、字号等值，并在整个设计系统中使用。

# 设计令牌结构示例

Colors/
  ├── Primary/
  │   ├── 500: #4F46E5
  │   ├── 400: #818CF8
  │   └── 300: #A5B4FC
  ├── Neutral/
  │   ├── 900: #1E293B
  │   ├── 500: #64748B
  │   └── 100: #F1F5F9
  └── Semantic/
      ├── Success: #10B981
      ├── Warning: #F59E0B
      └── Error: #EF4444

Spacing/
  ├── xs: 4px
  ├── sm: 8px
  ├── md: 16px
  ├── lg: 24px
  └── xl: 32px

Typography/
  ├── heading-1: 32px/700
  ├── heading-2: 24px/600
  ├── body: 16px/400
  └── caption: 12px/400

变量绑定

将变量绑定到组件属性上，可以实现"修改一个变量，全局自动更新"。例如，将按钮的背景色绑定到 Colors/Primary/500 变量，修改这个变量后所有按钮自动更新。

六、使用变量进行原型设计

Figma 变量不仅用于设计系统，还可以用于原型交互。通过变量和条件逻辑，可以实现更真实的交互原型：

• 计数器：点击按钮后数字+1
• 主题切换：在亮色和暗色模式之间切换
• 购物车：添加商品后更新购物车数量和总价

七、发布到团队库

设计系统只有被团队使用才有价值。将组件和样式发布到团队库：

1. 在资产面板中点击"发布"按钮
2. 选择要发布的组件和样式
3. 填写版本说明（如"新增按钮组件的 Loading 状态"）
4. 团队成员在文件中收到更新通知，点击"接受更新"即可

八、插槽组件（Slot Components）

插槽组件是 Figma 中实现"可替换内容区域"的常用模式。例如，一个模态框组件，标题和内容区域可以通过实例交换替换为不同的内容。这依赖于"实例交换属性"和"自动布局"的组合使用。

总结

一个好的 Figma 组件系统应该让使用者"不需要进入组件内部就能完成所有操作"。这意味着：文本通过属性修改，状态通过变体切换，图标通过实例交换替换，颜色通过变量绑定控制。花时间建立好组件系统，短期看是投入，长期看是投资——每个组件减少的 5 分钟手动调整，乘以团队人数和使用频率，回报是巨大的。

---