重新构建设计系统（变量版）

自上次更新以来，Figma 又更新了很多东西，比如新增了最大最小宽高，自动布局的自动换行、全新的开发者模式（dev mode）等等，而最令做设计系统的设计师期待的当然是变量了。在这一节，我将通过一个完整的项目 Bodcasts App 来演示如何基于变量构建一个完整的设计系统。

变量是什么？

维基百科中对变量的定义是：**在数学、物理学中，变量（variable）又称变数，是表达式或公式中，没有固定的值而可以变动的数或量。**听起来有点绕有点复杂，其实在我看来，变量就是一个可以代表一个值的符号。

和 Figma 中的变量最接近的，是 CSS 变量。比如，我们可以在 CSS 代码中定义一个变量 --bg-color: #F2F2F2 ，在给其他元素添加背景色样式时就可以写 background: var(--bg-color) ，这个元素就有了灰色的背景。如果我们更改一下这个变量的色值，假设改为 --bg-color: #000000，那么这个元素的背景就变成黑色了。

变量还可以引用，比如我们再定义一个变量 --button-bg: var(--bg-color) ，就可以说变量 --button-bg 引用了变量 --bg-color ，当 --bg-color 发生变动时 --button-bg 也会跟着变动。

Figma 中的变量

在 Figma 中，我们也可以像这样定义一个变量，然后在其他地方引用它。变量功能的入口在右侧面板中，不选中任何东西，就可以看到本地变量（Local variables），点击后会弹出一个变量管理窗口。

我们先创建一个颜色变量 bg-color，然后使用这个变量作为一个 Frame 的背景色。当我们改变变量的颜色时，这个 Frame 的背景色也会跟着变化。

现在，我们再创建一个变量 button-color，引用刚才创建的变量 bg-color，并用它作为按钮的背景色。此时，如果我们更改 bg-color 的颜色，button-color 的值也会跟着变化，按钮的背景色也会跟着变化。

我们还可以给变量添加模式（Mode），在不同的模式下使用不同的值。这可以帮助我们进行多主题设计，除了多主题，还可以做多语言模式、紧凑或宽松模式等等……