风起

Figma画布协议揭秘：组件Props的设计原理

此前我们介绍了 组件实例的 SymbolOverrides 覆盖机制 ，作为今日内容的铺垫，现在我们来深入解析 Figma 组件属性系统的底层架构设计，并将其与前端工程化概念进行对比。

1. 实例个性化的两条路径：Overrides vs Props

在 Figma 的协议中，实现“实例与组件不同”主要有两种机制，它们代表了两种完全不同的设计哲学：

1.1 SymbolOverrides (灵活性设计：直接操作)

• 机制：基于路径 (Path)。类似于 jQuery 的 $('.parent .child').css(...)。
• 特点：
  • 侵入式：实例必须知道组件内部的结构（GUID Path）。
  • 无限灵活：可以修改组件内部任何未锁定的节点，无需组件作者显式允许。
  • 数据结构：存储在 symbolOverrides 数组中，包含 guidPath 和具体的属性覆盖（如 textData, fillPaints）。

1.2 ComponentPropAssignments (现代化的设计：API 接口)

• 机制：基于定义 (Definition)。类似于 React/Vue 的 <Button label="提交" />。
• 特点：
  • 封装性：实例只通过组件暴露的“接口”（Props）进行交互，不关心内部实现。
  • 受控：组件作者决定了哪些属性可以被修改。
  • 数据结构：存储在 componentPropAssignments 中，直接映射组件定义的属性值。

为什么两者共存？

如果完全按照前端工程化的思路，应该只保留 Props。但在设计工具中： 避免属性爆炸：如果每个微小的修改都需要定义 Prop，右侧属性面板将变得不可维护。Overrides 提供了“所见即所得”的自由。

---

2. 数据流向：扁平化 vs 层级化

前端开发者习惯于 Prop Drilling（属性层层传递），但在 Figma 中，数据流是扁平化的。

2.1 为什么不做 Prop Drilling？

在可视化工具中，如果组件 A 包含 B，B 包含 C，要让 A 控制 C 的颜色，强制层层定义 Props 会导致交互灾难（每封装一层都要手动 Re-export 所有属性）。

2.2 Figma 的解决方案

1. 属性暴露 (Bubbling)：
   • 对应字段：propsAreBubbled: true。
   • 机制：允许将深层嵌套实例的属性直接“提升”到最外层面板显示。这不是数据传递，而是控制权提升。
2. 变量系统 (Variables)：
   • 类似 React Context / Vue Provide-Inject。
   • 通过绑定全局变量（Design Tokens），实现跨层级的数据共享，跳过中间层。

---

3. 底层机制：消费与映射

3.1 parameterConsumptionMap vs componentPropRefs

这两个字段都涉及属性绑定，但职责不同：

字段	职责	作用域
componentPropRefs	元数据 (Metadata)	主要用于 UI 显示（如紫色菱形图标）和依赖追踪。是早期的专用设计。
parameterConsumptionMap	执行 (Execution)	通用的数据消费机制。它告诉渲染引擎如何将“值”（Props/Variables）解析并应用到具体的节点字段（如 TEXT_DATA, VISIBLE, INSTANCE_SWAP）。

3.2 为什么嵌套实例的 Props 在 symbolOverrides 里？

当你修改一个嵌套组件的 Prop 时，数据结构如下：

"symbolOverrides": [
    {
        "guidPath": [...], // 1. 寻址：找到内部的那个组件实例
        "componentPropAssignments": [...] // 2. 赋值：修改它的 Props
    }
]

• 顶层属性：直接挂载在实例上（O(1) 访问，代表“我自己的配置”）。
• 嵌套属性：必须通过 symbolOverrides 寻址（O(N) 查找，代表“对他人的修改”）。

---

4. 渲染流水线 (Pipeline)

理解了上述结构，就能推导出渲染引擎的正确处理顺序：

1. 属性解析 (Props Resolution)：读取 componentPropAssignments，确定所有 Props 的值。
2. 结构扩展 (Tree Expansion)：
   • 关键点：必须先解析 Props，因为 INSTANCE_SWAP 属性会改变子树的结构（决定加载哪个 Symbol）。
   • 根据解析出的 Symbol ID 递归生成节点树。
3. 覆盖应用 (Apply Overrides)：
   • 树结构确定后，利用 parameterConsumptionMap 应用非结构性属性（文本、可见性）。
   • 遍历 symbolOverrides，通过路径匹配应用手动修改的样式。

5. 总结

Figma 的协议设计是在工程规范性（Props）和设计灵活性（Overrides）之间寻找平衡的结果。它没有照搬代码世界的“单向数据流”，而是通过属性提升和变量上下文解决了可视化编辑中的效率问题。