Figma 组件系统，主组件「唯一数据源」

唯一数据源（Single Source of Truth，SSOT） 是 Figma 组件体系的底层基石，整套差异覆盖、实例同步、跨库复用、多人协作都建立在这一设计之上。下面从定义、底层标识、数据存储、约束规则、联动逻辑、边界场景、对比传统软件几个维度完整拆解。

一、核心定义

主组件就是整个组件体系里唯一、权威、不可替代的原始模板。

• 所有组件实例、变体、跨文件引用、团队库组件，最终都指向这一份原始数据；
• 任何样式、结构、属性的全局标准，都由主组件定义；
• 实例只做「引用+局部差异」，不拥有独立完整数据，从根源避免多副本不一致。

核心设计思想：一处定义，全处引用；改一处，全局生效。

---

二、底层唯一标识：Component ID（核心指纹）

Figma 靠全局唯一 ID 绑定主组件与所有实例，这是实现数据源统一的技术关键。

1. ID 生成规则 新建主组件时，系统自动分配全局唯一的字符串 ID（UUID 格式），该 ID 永久不变：

   • 重命名主组件、移动图层位置、修改样式/尺寸 → ID 不变；
   • 复制主组件、跨页面移动主组件 → 仍是同一个 ID，依旧共享同一数据源；
   • 只有执行 「分离组件（Detach Instance）」 或 「创建新独立组件」，才会生成全新 ID，脱离原数据源。

2. 实例的绑定逻辑 每一个组件实例内部，都会硬编码存储对应的 Component ID，逻辑关系：

   实例 → 通过 Component ID → 精准指向 唯一主组件
   

   实例不会复制主组件的图层树、样式、结构，仅靠 ID 建立关联。哪怕实例被复制、跨页面粘贴、跨文件复用，ID 始终不变，数据源也不变。

3. 组件集（变体）的 ID 规则 整套变体属于同一个主组件集，共用一个根 ID；不同变体只是「预定义属性组合」，并非独立数据源，进一步保证整体统一。

---

三、主组件的数据存储结构（完整数据源）

主组件在文件中存储完整、原始的节点树数据，是全量模板，而非增量数据。

1. 存储内容（全量信息）

一个标准主组件会保存以下所有内容，构成完整数据源：

• 图层结构：图层数量、嵌套层级、图层顺序、分组关系（核心结构）；
• 节点基础属性：位置、尺寸、旋转、翻转、约束；
• 视觉样式：填充、描边、阴影、模糊、渐变、透明度、混合模式；
• 文本默认值：字体、字号、行高、字重、默认文案；
• 组件属性配置：文本/布尔/变体/实例交换 四类可暴露属性；
• 自动布局规则：间距、对齐、内边距、适配规则；
• 嵌套组件引用：内部嵌套的子组件 ID、默认状态。

2. 简化数据模型对比

（1）主组件（全量数据源）

{
  "type": "COMPONENT",
  "componentId": "uuid-001",  // 全局唯一ID
  "name": "基础按钮",
  "children": [/* 完整图层树、子节点、嵌套组件 */],
  "styles": { /* 全部默认样式 */ },
  "componentProperties": { /* 暴露的可控属性 */ }
}

（2）普通实例（仅存ID + 局部差异）

{
  "type": "INSTANCE",
  "componentId": "uuid-001", // 指向同一个数据源
  "overrides": { /* 仅记录手动修改过的属性 */ }
}

关键区别：

• 主组件：存全量数据，是源头；
• 实例：只存引用ID + 差异项，无完整结构。

---

四、唯一数据源的强制约束（保证一致性的硬性规则）

为了不让「唯一数据源」失效，Figma 做了多层强约束，从操作层面锁死结构与归属。

1. 结构锁定：实例禁止修改图层结构

这是最重要的一条约束：

• ✅ 实例允许：修改颜色、文本、尺寸、显隐、切换变体、局部样式（属性覆盖）；
• ❌ 实例禁止：增删图层、调整图层顺序、修改嵌套关系、重命名内部图层。

原因：图层结构是数据源的核心骨架，一旦实例能改结构，就会产生「多套不同骨架」，唯一数据源直接崩塌。

例外：执行 Detach Instance（分离组件） 后，实例彻底断开 ID 绑定，变成普通图层，不再受主组件约束，也不再属于原有数据源。

2. 归属约束：复制/移动不产生新数据源

• 在同文件内复制主组件、把主组件移动到其他页面/画板：ID 不变，仍然是同一个数据源，所有实例同步不变；
• 拖拽主组件生成新实例：只是新增一条 ID 引用，不创建新数据源；
• 跨文件复制组件：若选择「保留组件关联」，ID 不变，继续共用原数据源。

3. 编辑权限约束（团队协作场景）

当主组件发布为团队库（Team Library） 后：

• 仅库管理员/编辑者有权修改主组件（修改唯一数据源）；
• 普通成员只能使用实例、做局部覆盖，无法编辑原始数据源； 从权限上防止多人乱改源头，保障全局标准统一。

---

五、唯一数据源如何驱动「同步机制」（联动逻辑）

所有同步行为，本质都是主组件（数据源）变更 → 基于 ID 遍历所有关联实例 → 批量更新。

1. 同文件内同步（实时生效）

1. 编辑主组件的结构/默认样式/默认文本（修改数据源）；
2. Figma 底层遍历当前文件中所有 componentId 匹配的实例；
3. 对每一个实例做判断：
   • 该属性没有被实例覆盖：直接继承主组件新值，实时刷新；
   • 该属性已被实例手动覆盖：保留实例自定义值，不强制同步。

逻辑总结：未覆盖=跟随数据源；已覆盖=局部独立。

2. 组件集（变体）同步

变体依附于同一个组件集数据源：

• 修改某一个变体的样式，同组件集内其他变体、所有引用该变体的实例都会同步；
• 新增/删除变体，全局实例的下拉选项也会同步更新。

3. 跨文件/跨团队库同步

主组件发布为团队共享库后，数据源托管在云端：

1. 库维护者更新云端主组件（修改全局数据源）并发布更新；
2. 所有引用该库的文件，会收到更新提示；
3. 用户手动「更新组件」后，文件内所有实例批量同步云端最新数据源；
4. 支持版本锁定：可选择沿用旧版数据源，灵活兼容迭代。

4. 嵌套组件的多级数据源联动

多层嵌套组件会形成链式唯一数据源： 最内层主组件 → 中层组件（引用内层ID） → 外层组件（引用中层ID） → 最终实例

• 修改最内层数据源，会顺着 ID 链路，逐层向上同步所有父级组件、最终实例；
• 每一层都遵循「未覆盖则继承、已覆盖则保留」规则，多级联动但不混乱。

---

六、唯一数据源的边界场景（常见特殊情况）

1. 分离组件（Detach）：彻底脱离数据源

执行分离后：

• 实例的 Component ID 被清空，不再指向任何主组件；
• 实例转为普通图层组，拥有独立数据，不再参与同步；
• 这是主动「切断唯一数据源关联」的操作。

2. 替换组件（Swap Instance）：切换数据源

对实例执行「替换组件」：

• 本质是修改实例内部的 Component ID，从指向A数据源，改为指向B数据源；
• 原有的局部覆盖项会尽量保留兼容，完成数据源切换。

3. 重复创建同名主组件：两套独立数据源

手动新建一个和现有组件名字完全相同的主组件：

• 系统会分配全新 Component ID，属于第二套独立数据源；
• 两者互不影响，各自管理自己的实例（属于人为创建多数据源，不推荐）。

4. 多人同时编辑主组件

多人协作编辑同一个主组件（同一数据源）：

• 云端以最终保存版本作为统一数据源；
• 所有在线用户实时拉取最新数据源，保证所有人看到的模板一致。

---

七、对比传统设计软件，凸显该设计的优势

以 Sketch / PS / XD 为例，理解 Figma 唯一数据源的先进性：

1. 传统软件 组件/符号是「本地副本+弱关联」，跨文件、跨设备容易断联，多副本各自独立，改一个无法全局同步，极易出现视觉混乱。
2. Figma 唯一数据源 靠永久唯一ID + 云端托管实现强关联，全文件/全团队共用一份源头，从数据模型上杜绝多版本、多副本问题。

---