本文将带你走进 Figma 底层协议，探索组件与实例之间"既统一又差异"的魔法是如何实现的。
认识组件与实例
什么是组件(Component)？
在 Figma 中，组件是一种可复用的设计元素。你可以把它理解为一个"模板"或"蓝图"。当你将一个图层或图层组转换为组件后，它就成为了一个可以被多次引用的主体（Master Component）。
什么是实例(Instance)？
实例是组件的"克隆体"，它引用了组件的所有属性，但同时又可以拥有自己的个性化修改。每当你从组件创建一个副本，这个副本就是一个实例。
为什么需要组件和实例？
组件和实例的设计解决了两个核心问题：
- 一致性：当你修改组件时，所有实例会自动同步更新，确保设计系统的一致性
- 灵活性：实例可以覆盖组件的部分属性（如颜色、文字、大小等），在保持整体风格统一的同时允许个性化定制
这种机制让设计师能够高效地管理大规模设计系统------只需维护少量组件，就能衍生出成千上万个具有细微差异的实例。
组件与实例的交互演示
实例跟随组件
实例覆盖组件
嵌套实例
嵌套实例覆盖组件
认识SymbolOverrides
SymbolOverrides 是什么？
在 Figma 的底层协议中，SymbolOverrides 是实现实例差异化的核心数据结构。当一个实例需要覆盖组件的某些属性时，Figma 并不会复制整个组件的数据，而是只记录"差异部分"------这就是 SymbolOverrides。
工作原理
SymbolOverrides 的工作机制可以概括为：
- 引用组件 ：通过
symbolID指向原始组件 - 路径寻址 ：通过
guidPath.guids精确定位到组件内部的某个子节点 - 属性覆盖：只存储被修改的属性值，未修改的属性继承自组件
这种"增量存储"的设计非常高效------无论组件有多复杂，实例只需要存储它与组件不同的那部分数据。
关键字段解析
| 字段 | 说明 |
|---|---|
symbolID |
指向主组件的唯一标识符，由 sessionID和 localID组成 |
symbolOverrides |
覆盖项数组，每项代表一个被修改的子节点 |
guidPath.guids |
GUID 路径，用于在组件层级中定位目标节点 |
fillPaints/ strokePaints |
覆盖的填充/描边样式 |
strokeWeight |
覆盖的描边粗细 |
实际数据示例
下面是一个实例覆盖组件属性的真实 Figma 协议数据：
json
{
"symbolData": {
"symbolID": {
"sessionID": 1,
"localID": 3
},
"symbolOverrides": [
{
"name": "IRectangle 1",
"guidPath": {
"guids": [
{
"sessionID": 1,
"localID": 2
}
]
},
"strokeWeight": 3,
"fillPaints": [
{
"type": "SOLID",
"color": {
"r": 1,
"g": 0.5240384340286255,
"b": 0.881009578704834,
"a": 1
},
"opacity": 1,
"visible": true,
"blendMode": "NORMAL"
}
],
"strokePaints": [
{
"type": "SOLID",
"color": {
"r": 0.24366332590579987,
"g": 0.08466623723506927,
"b": 0.9519230723381042,
"a": 1
},
"opacity": 1,
"visible": true,
"blendMode": "NORMAL"
}
],
"borderTopWeight": 3,
"borderBottomWeight": 3,
"borderLeftWeight": 3,
"borderRightWeight": 3
},
{
"name": "IC1",
"guidPath": {
"guids": [
{
"sessionID": 1,
"localID": 3
}
]
}
},
{
"name": "IStar 1",
"guidPath": {
"guids": [
{
"sessionID": 1,
"localID": 5
}
]
},
"strokeWeight": 3,
"fillPaints": [
{
"type": "SOLID",
"color": {
"r": 0.4491417109966278,
"g": 0.9615384340286255,
"b": 0.3074149489402771,
"a": 1
},
"opacity": 1,
"visible": true,
"blendMode": "NORMAL"
}
],
"strokePaints": [
{
"type": "SOLID",
"color": {
"r": 0.24366332590579987,
"g": 0.08466623723506927,
"b": 0.9519230723381042,
"a": 1
},
"opacity": 1,
"visible": true,
"blendMode": "NORMAL"
}
]
}
],
"uniformScaleFactor": 1
}
}数据解读
从上面的示例数据可以看出：
每个覆盖项通过 guidPath.guids 中的 GUID 精确定位到组件内的目标节点。对于嵌套实例的情况，guids 数组会包含多个元素，形成一条从外到内的访问路径。
总结
通过本文，我们深入了解了 Figma 组件系统背后的协议实现：
- 组件与实例是 Figma 设计系统的基石，前者提供"统一性"，后者提供"灵活性"
- SymbolOverrides是实现实例差异化的核心机制，采用"增量存储"策略，只记录与组件不同的属性
- GUID 路径寻址让 Figma 能够精确定位组件内部的任意子节点，支持任意深度的嵌套覆盖
理解 SymbolOverrides 机制，是深入 Figma 画布协议、实现 Figma 文件解析或构建兼容工具的重要一步。
本文是 Figma 协议解析系列的一部分，更多内容敬请期待。
更多精彩内容可关注 风起的博客 ，微信公众号：听风说图