两个参数架构的故事——以及我们如何统一它们
Today, Figma offers a suite of dynamic features: responsive design, typography, animations, state machines, and more. These features all rely on the concept of parameters: values that can be set in one place and will propagate automatically throughout the project, ensuring quick, consistent updates.
如今,Figma 提供一整套动态功能:响应式设计、排版、动画、状态机等。这些功能都依赖于“参数”这一概念:在一个地方设置值后,会自动在整个项目中传播,确保快速、一致的更新。
When a parameter value changes, such as a color variable’s value, the parameter system ensures that the bound layer’s property immediately reflects this change.
当某个参数值发生变化(例如颜色变量的值)时,参数系统会确保被绑定的图层属性立即反映这一变化。
Component properties and variables are both examples of “parameter systems,” or ways of achieving a behavior in Figma that’s set-once, apply-across. But while they’re similar, these systems evolved differently, to solve different core limitations our users faced—and the underlying architecture was not the same.
组件属性和变量都是“参数系统”的示例,即在 Figma 中实现“一次设置,全局生效”的行为方式。尽管它们相似,但这两个系统为解决用户面临的不同核心限制而各自演进,底层架构并不相同。
By 2024, it became clear that having separate architectures for these two systems was creating more problems than it solved, with unexpected behavior that confused users and made these features harder to learn and use reliably. For example, it was possible for a variable and component property to bind to the same layer property, leading to inconsistent rendering in the editor. Maintaining separate architectures also made it nearly impossible to bring parametrization to other Figma products without inheriting these technical burdens.
到 2024 年,很明显,为这两个系统分别维护架构带来的问题比解决的问题还多,出现了让用户困惑的意外行为,也使这些功能更难学习和可靠使用。例如,变量和组件属性可能绑定到同一个图层属性,导致编辑器中的渲染不一致。分别维护架构也让参数化几乎无法扩展到其他 Figma 产品,而不继承这些技术负担。
In this article, we’ll discuss how we built a single, unified architecture that now powers both component properties and variables under the hood. This has eliminated user-facing inconsistencies, improved developer velocity, and created a scalable foundation for parametrization across all current and future Figma products.
在本文中,我们将讨论如何构建一个统一的架构,在底层同时驱动组件属性和变量。这消...