在 Figma 推出 组件属性（Component Properties，简称 Props） 之前，全球的设计系统维护者几乎都在经历一场旷日持久的“变体爆炸（Variant Explosion）危机”。

为了满足真实业务场景中对不同视觉与状态组合的需求，设计师往往需要将按钮、卡片、输入框的所有可能性进行笛卡尔积乘积组合。例如一个最为通用的按钮组件：

• 3 种尺寸（Small、Medium、Large）；
• 4 种视觉层级（Primary、Secondary、Tertiary、Danger）；
• 5 种交互状态（Default、Hover、Active、Focused、Disabled）；
• 左侧图标有无（True / False）；
• 右侧图标有无（True / False）；
• 加载状态（Loading 开关）。

仅仅这一个按钮组件，使用传统的变体组合方式，其底层图层数量就会高达：$3 \times 4 \times 5 \times 2 \times 2 \times 2 = 480$ 个独立变体画板！ 这不仅让组件母本所在的画布卡顿不堪、极易触发 Figma 60%/80% 内存预警与崩溃，更让业务设计师在使用组件时陷入茫茫多的下拉菜单，前端工程师在 Dev Mode 中也只能看到一长串生硬的字符串组合，无法对应代码层面的布尔值与插槽。

本文将深入拆解 Figma 组件属性的底层架构机制，演示如何将数百个臃肿的变体精简为数个核心形态，并打通与前端 React/Vue 组件属性的无缝代码交付。

---

核心机制：传统变体（Variants）与组件属性（Component Properties）的边界选型

在重构设计系统前，必须彻底厘清：到底哪些维度必须保留为 Variant，哪些维度应该立即迁移为 Component Property？

维度特性	传统变体（Variants）	组件属性（Component Properties）
底层实现机制	每个变体是画布上的一个独立 Frame 画板	母本内部图层绑定的元数据（Metadata）与控制器
画布内存消耗	极高（$N \times M$ 几何倍数膨胀）	极低（仅维护基础骨架，零额外画板）
适用设计场景	布局结构发生根本性断裂（如尺寸高度、主色到虚线框风格、Hover 交互态）	元素的显隐切换、文案填充替换、子图标/子组件动态切换
嵌套管理体验	必须层层穿透进入双击子图层修改	可以在顶层面板统一暴露与管理嵌套属性
前端代码映射	映射为复合状态机或独立样式类	1:1 精确映射为 React/Vue 的 props、boolean、slots
维护与修改成本	修改一个边框圆角需同步手动批量更新数百个画板	修改单个母本内部图层，所有派生实例瞬间热更新

选型黄金法则

• 必须使用 Variant 的场景：当组件的物理布局（Layout 尺寸/高度）、**交互微动画（如 Smart Animate 的 Hover/Pressed 状态）或核心视觉风格（如 Fill、Outline、Ghost）**发生结构性变更时，保留为变体；
• 果断使用 Component Property 的场景：
  1. 某个元素的显示或隐藏（使用 Boolean Property）；
  2. 某段文案的替换填充（使用 Text Property）；
  3. 图标、头像、标签等子组件的替换（使用 Instance Swap Property）；
  4. 嵌套组件内部的二次配置（使用 Expose nested instances）。

---

四大组件属性深度实操与配置规范

[Component Set: Button]
  ├── Variant Property: Size = [Sm, Md, Lg]
  ├── Variant Property: Hierarchy = [Primary, Secondary, Ghost]
  └── Internal Layer Bindings:
        ├── Icon-Left Layer ───► Boolean: hasIconLeft (Default: true)
        │                   └──► Instance Swap: iconLeftInstance (Preferred: Feather Icons)
        ├── Label Text Layer ──► Text: labelText (Default: "Button")
        ├── Icon-Right Layer ──► Boolean: hasIconRight (Default: false)
        │                   └──► Instance Swap: iconRightInstance (Preferred: Feather Icons)
        └── Loading Spinner ───► Boolean: isLoading (Default: false)

1. 布尔属性（Boolean Property）：解耦显隐控制

布尔属性用于将图层的 Layer Visibility（眼睛图标）绑定为一个开/关控制器（Toggle Switch）。

实操步骤：

1. 选中组件母本内的目标图层（例如左侧图标 icon-left）；
2. 在右侧检查器的 Layer（图层）模块右侧，点击形如十字连线的 Apply boolean property 图标；
3. 在弹出面板中选择 Create property；
4. 命名推荐遵循前端 props 规范（如 showIconLeft 或 hasIconLeft），并将默认值设为 true 或 false；
5. 同名合并绑定：如果你有多个图层应该同步联动（例如一个通知提示框，带有图标与配套的装饰背景），可以将这两个图层同时绑定到同一个布尔属性上，实现一键同步开关。

2. 文本属性（Text Property）：告别图层深层双击穿透

以往业务设计师在页面中使用组件时，为了改动一行按钮文字或卡片标题，需要连续双击 3~5 次穿透层层嵌套的 Auto Layout 容器，甚至误拖动内部图层导致布局错位。

实操步骤：

1. 选中组件内部的文本图层（如 label）；
2. 在右侧检查器的 Text 模块右侧，点击 Apply text property 按钮；
3. 设置属性名称为 label、title 或 buttonText；
4. 在 Value 中输入默认展示文案；
5. 多行与富文本建议：对于支持多行换行的描述文本，确保在 Auto Layout 中将文本框 Resizing 设置为 Fill container，并在 约束系统 中锁定垂直撑开逻辑。

3. 实例交换属性（Instance Swap Property）与 Preferred Values 推荐集

实例交换属性用于在保持组件整体封装的前提下，允许使用者快速将内部的某个占位组件替换为同类型的其他组件（最典型的就是图标与头像）。

实操步骤与高阶防呆技巧：

1. 选中组件内放置的基础图标实例（例如 icon-placeholder）；
2. 在右侧检查器的组件属性区域，点击 Apply instance swap property 图标；
3. 命名为 icon 或 trailingIcon；
4. 至关重要的防错配置：设置 Preferred Values（首选值列表）：
   • 很多团队在开放 Instance Swap 后，设计师随意替换了未规范化的矢量图形，导致尺寸不对齐；
   • 点击面板中的 Preferred values，点击 + 号，精准圈选设计系统团队库中的 Icons/System 目录；
   • 这样业务设计师在右侧面板下拉替换时，只会看到标准图标网格，无法胡乱搜索其他业务画框，大幅降低了协同失控风险。

4. 变体属性（Variant Property）：精准收敛物理状态

将上述布尔、文本、图标替换解耦后，按钮组件原本庞大的 480 个画板瞬间收敛为：

• 3 种尺寸 $\times$ 4 种层级 = 12 个变体。 交互态（Hover、Pressed、Focused）可以利用 Figma 的 变体与属性系统 与交互式组件（Interactive Components）直接在 12 个变体内部驱动，使得组件总数相比此前直接锐减 97.5%！

---

进阶工程架构：嵌套实例暴露与属性简化

当组件走向复杂场景（例如“弹窗 Modal”由“头部 Header”、“表单 Form”、“底部 Actions”组成）时，必须合理利用 Expose nested instances 与 Simplify all instances。

[Modal Dialog Master Component]
  │
  ├── 属性简化（Simplify all instances）: 开启
  │     └─ 隐藏 Modal 内部 40+ 个未绑属性的 Frame 节点
  │
  └── 暴露嵌套属性（Expose nested instances）:
        ├── Header Component ──► 暴露 title, showCloseButton
        └── Button (Primary) ──► 暴露 label, isLoading, variant

技巧 1：Expose nested instances（暴露嵌套实例）

在以往，如果一个 Dialog 弹窗里嵌套了一个 Button，设计师如果想修改 Button 上的文字，仍需深入选中 Button。

• 配置方法：在组件母本（Component Set）的外层根节点上，点击右侧 Properties 面板的 + 号，选择 Nested instances；
• 勾选弹窗内部引用的 Header、Primary Button、Cancel Button；
• 效果：在业务画板中，当用户选中外层 Dialog 实例时，右侧属性面板会把内部 Button 的 label、isLoading 属性直接平铺展示在 Dialog 面板下方，无需任何双击深入！

2. Simplify all instances（简化所有实例）

组件内部通常包含数十个 Auto Layout 布局 Frame 和辅助对齐容器。默认情况下，使用者在图层树中能看到所有乱七八糟的内部 Frame，不仅容易误改，而且视觉干扰极大。

• 配置方法：选中 Component Set 根节点，在右侧面板勾选 Simplify all instances；
• 效果：在实例图层树中，内部所有纯容器图层全部自动折叠隐藏，只高亮展示绑定了 Component Properties 的图层，让业务设计师的图层面板清爽如代码组件一般。

---

企业级设计系统重构 4 步落地法

如果你正在接手一个存在变体膨胀的旧版团队库，推荐遵循以下无损迁移步骤：

第 1 步：存量变体属性审计
  └─ 统计所有以 "hasIcon=true/false", "type=text/icon" 命名的多余维度

第 2 步：提取基础通用骨架母本
  └─ 仅保留 Size、Visual Type 构成的核心矩阵骨架

第 3 步：绑定 Component Properties
  └─ 依次绑定 Boolean（图标开关）、Text（文案）、Instance Swap（图标集）

第 4 步：发布团队库与平滑兼容
  └─ 利用 Team Library 变更说明，验证旧实例重写（Overrides）保持完好

1. 变体属性审计：使用 Figma 全局搜索或插件排查所有带有大量二元开关（如 hasIcon=true/false、isError=true/false）的变体集合；
2. 提取通用骨架：将冗余的重复画板删除，只保留不同几何尺寸（如 32px / 40px / 48px）的核心 Frame，将其重构成标准的 Auto Layout 容器；
3. 注入属性：依次绑定 Boolean、Text、Instance Swap 属性，并开启 Preferred Values；
4. 团队库发布校验：在 Team Library 团队库协同管理 中发布更新时，必须在独立测试画板验证旧版页面上的文本覆盖（Overrides）是否能够无损保留。详细的分支回滚与审查技巧可参阅 企业级分支协同与设计系统版本治理实战。

---

研发协同与 Dev Mode / Code Connect 1:1 映射

组件属性的最深远价值，在于它终结了设计属性与代码 Props 之间的鸿沟。

在前端开发生态中，一个标准的 React/Vue 按钮组件通常由以下 Props 构成：

interface ButtonProps {
  size?: 'sm' | 'md' | 'lg';          // 对应 Figma Variant: Size
  variant?: 'primary' | 'ghost';      // 对应 Figma Variant: Hierarchy
  children: React.ReactNode;          // 对应 Figma Text Property: label
  hasIconLeft?: boolean;              // 对应 Figma Boolean: hasIconLeft
  iconLeft?: React.ReactNode;         // 对应 Figma Instance Swap: iconLeft
  isLoading?: boolean;                // 对应 Figma Boolean: isLoading
}

当开发工程师在 Figma 中打开 Dev Mode 开发模式 选中该按钮实例时：

1. 代码检查器（Code Inspect） 不再输出冗余的绝对坐标与无用样式，而是直接在属性清单中显示：

   {
     "Size": "md",
     "Hierarchy": "primary",
     "label": "确认提交",
     "hasIconLeft": true,
     "isLoading": false
   }
   

2. 配合 Figma Code Connect 与 Dev Mode 企业级落地指南，你可以通过 CLI 将这段代码逻辑与 GitHub 仓库中的组件直接绑定，前端工程师在画布上一键点击即可直接拷贝与线上生产环境完全一致的组件调用代码！

---

常见踩坑与注意事项

1. 图层命名一致性丢失导致覆盖失效： 在不同变体之间（例如 Small 变体与 Large 变体），绑定的目标图层必须保持相同的图层命名与层级拓扑。如果 Small 里的文字叫 label，而 Large 里的文字叫 text，切换变体时输入的自定义文案将被还原为默认值；
2. 切忌给无需动态更改的装饰图层滥设属性： 只有真正需要由调用者配置的属性才创建 Controller，避免右侧检查器信息过载；
3. 结合 Variables 变量实现多主题与数值绑定： 如果组件包含不同主题的间距或圆角，应优先结合 Variables 变量系统 与 样式转变量迁移指南，而不是为每种颜色主题创建独立变体。

通过合理推行组件属性与精简变体体系，你的团队库不仅能彻底告别画布卡顿，更能在设计系统扩展性与研发交付效率上迈上全新的工程化台阶。