Figma 组件系统的核心是主组件-实例引用模型 + 变体与属性驱动 + 差异覆盖与同步机制 + 嵌套与组件库，底层靠唯一 ID、差异存储与响应式依赖追踪，实现“一处修改、全文档/全库同步”。下面分模块讲清楚它如何工作。
一、核心模型：主组件（Main Component）+ 实例（Instance）
1. 主组件（模板）
- 定义：唯一的“母版”，存于 Assets 面板，紫色实心菱形图标。
- 内容：固定图层结构、基础样式、默认属性、嵌套关系。
- 本质：一个带唯一
componentId的节点树，作为所有实例的数据源。
2. 实例（引用）
- 定义：主组件的轻量引用副本，紫色空心菱形图标。
- 存储：不存完整结构，只存主组件 ID + 与主组件的差异（Overrides），文件体积极小。
- 同步：主组件修改 → 所有实例自动响应式更新（反向依赖追踪）。
- 限制：实例不能改图层结构（增删图层、改嵌套），只能改属性；可整体缩放。
3. 底层数据结构（简化）
// 主组件
{"id": "comp-btn","type": "COMPONENT","children": [...], // 完整图层树"styles": { ... }
}// 实例（仅存差异）
{"id": "inst-1","type": "INSTANCE","componentId": "comp-btn", // 指向主组件"overrides": {"fill": "#f00", // 覆盖主组件颜色"text": "提交" // 覆盖文本}
}
二、变体（Variants）：组件集（Component Set）
1. 概念
- 把同一组件的不同状态/尺寸/主题打包成一个“组件集”，避免建多个独立组件。
- 例：按钮的
默认/悬停/禁用、小/中/大、主色/次色都放进一个组件集。
2. 变体属性（Variant Properties）
- 给组件集定义可枚举的属性（如
size: small/large、state: default/hover）。 - 每个变体是属性值的唯一组合，实例可直接下拉切换。
3. 优势
- 统一管理：所有状态在一处，修改一次全量同步。
- 减少组件数量：避免文件里一堆零散组件。
三、四大组件属性（Component Properties）
让实例可受控自定义，且不破坏主组件结构。
- 文本属性（Text）
- 主组件内文本层暴露为变量，实例可改文字内容。
- 布尔属性（Boolean）
- 控制图层显示/隐藏（如“是否显示图标”）。
- 变体属性（Variant）
- 切换组件集内不同变体（状态、尺寸）。
- 实例交换（Instance Swap）
- 主组件内嵌套的子组件，实例可直接替换为同类型其他组件（如下拉换图标）。
四、覆盖（Overrides）与同步机制
1. 差异覆盖
- 实例修改的属性（颜色、文本、尺寸）会被记录为
overrides，不再跟随主组件同步。 - 未修改的属性永远继承主组件，主组件改则实例改。
2. 反向同步（Push Overrides）
- 实例的自定义属性可反向推送给主组件，一键同步到所有实例。
3. 依赖追踪（Materializer）
- 底层响应式系统，只更新变化的节点，不整树重绘，保证大文件流畅。
五、嵌套组件（Nested Components）
- 组件内部可放其他组件实例，形成层级化设计系统。
- 例：卡片组件里嵌套按钮、头像、文本组件。
- 同步规则：改最内层组件 → 所有父级嵌套实例逐层同步。
六、组件库（Team Library）
- 组件可发布为共享库，跨文件、跨项目、跨团队复用。
- 版本控制：库更新后，使用实例可选择升级或保留旧版。
- 权限：可设置编辑/查看权限，保证设计规范统一。