Figma 20240508 更新 - 原型交互支持修改变量模式

查看官方更新日志

这次更新增强的又是变量，且刚好是我一直需求的功能。

在原来的变量下，要设计多主题或者夜间模式的时候，在高交互原型阶段想要切换，必须准备两套颜色模式的画布，然后通过连线让其转换。大致是如下的逻辑：

而现在，当变量设置好了之后，只需要制作一套原型，在切换模式的动作按钮上设置当前变量所使用的模式即可。

这样做的好处，就是在调整 UI 稿件的时候，比如某些组件的位置，就不需要再两个画布上分别修改了。下面说一下实际的应用：

比如我设置了两个模式的颜色变量如下：

然后还是刚刚的例子，这里放置两个按钮，一个按钮设置切换为日间，一个切换为夜间：

得到的效果是这样的：

当然也可以进阶一点，把切换按钮合并成一个，此时需要多增加一个布尔型的当前状态变量：

然后按钮做一个判断，如果当前模式是夜间，则切换为 day，否则还是切换为 night：

最终效果如下：

最后再结合我曾经做过的一个真实案例，套用本次升级的功能调整一下，最终的效果：