关于 Figma Config 2023 的一些总结和所思所想

视频源：https://config.figma.com/

开场动画信息点

• 颜色 token
• 有序列表
• AI 文本校对
• 黏性吸顶布局（CSS sticky position）
• 多样式文本（粗体、斜体同行显示）
• 区域选择（区别于容器和图层，新增了 section 概念）

用户回馈

• 社区感谢
• 教育推广
• chrome book 合作
• adobe 收购事件
• 拥抱 AI

服务场景

Stages

• Brainstorm（创意头脑风暴）
• Design（设计环节）
• Build（生产构建环节）

变量

Variables rather than Design Tokens

变量支持四种类型

• 数字
• 字符串
• 颜色
• 布尔

作用范围

变量设置中可以定义变量的作用范围（针对哪些属性，比如圆角、宽高、间距、文本）

变量设置框里有一个“即将上线”的功能——代码高亮

以上提供的能力已经可被用于建立设计系统，那么接下来我们看看变量可以有哪些应用

应用场景

场景 1：颜色模式

和变量同级别的设置项还有”颜色模式“，有点像颜色选集，但更像 web 应用中换肤功能所对应底层定义，也就是每套皮肤（主题）所使用的颜色定义组合

但这不止像演示中所呈现的亮暗色模式下的颜色定义，很明显它支持定义更多套的主题色配置，每套配置都在使用相同的颜色变量，但每个变量在每套主题下使用的颜色是不同的，这有点像 design tokens，但确实更接近于主题色的定义，因此这个配置项区别于变量，单独成为一个配置框完全合理

一旦定义好不同颜色主题的配置，在容器级别的图层选择 Color modes，即可轻松实现快捷的”一键换肤“效果。

相比传统设计场景需要针对不同颜色主题需要提供多套设计，这一改变将使得设计师和前端工程师的使用效率都大大提高，想必当前端还原设计稿时也希望直接在同一个容器看到它在不同颜色模式下所对应的标注信息。

而这一切都是因为变量作为基础，所以产生了更简洁的呈现方式。正如编程语言中，借助变量在不同的场景下具有不同的值，从而使得程序在运行时拥有更多的变化

场景 2：布局密度

对于列表类的布局，通过对变量定义不同模式下的值，可以直接应用在图层的排布密度属性上。当你定义了多套模式后，在设计稿中可以通过切换不同的模式查看同一个布局在不同密度下的视觉效果，这是不是解决了设计师常常反复调整元素间距以对比哪个效果更好的痛点呢

场景 3：国际化（多语种）

如果你要做一款国际化的产品，需要考虑设计稿在不同语种下的视觉体验是否一致。同样是借助变量，你可以直接定义多套语言模式，同一个词汇在不同语言模式下使用其对应语言的字符，然后同样在图层的”本地化“属性下进行”一键切换“。

这里从开发视角补充一点，其实国际化功能在实现环节也是通过类似变量的方式定义同一个词汇在不同语言下的字符定义，因此将变量能力带到设计环节，其实是对设计到实现的整个协作流程效率的提升，因为在设计环节的很多”动态定义“从此可以与开发人员共享了。

简单来说，就是从前对于多语种的展示，可能只有开发人员在维护，设计人员可能需要到开发的实现环节才能体验不同语种下的展示效果，或者设计师需要创建多套设计稿来展示同样的内容使用不同语言的呈现效果。但因为有了变量，设计师和开发人员完全可以共享同一套”多语言配置“，这难道不是协作效率的飞跃吗

变量组合应用

如你所见，变量的魅力不止于此，一旦拥有变量，你可以更近一步，对他们进行组合使用。因为有了上面的颜色模式、密度模式和语言模式，从此你可以看到的不止是各个属性下不同模式的效果，而是各个模式的随意组合

样式能力增强

最小宽度/最大宽度/最小高度/最大高度

这是前端 CSS 中一个很基本的属性，但到今天才被添加到设计工具内，算是补充了设计到开发环节的一个鸿沟。因为这里原本的痛点在于，设计稿往往对响应式设计依赖于做多套设计，而前端对于响应式的实现往往是通过最小/大宽度和最小/大高度属性在不同宽度/高度范围内定义不同的布局属性和元素宽高值，可见这个环节从前在设计环节和开发环节的实现方式是不一致的。

自动布局功能对于设计与实现环节保持一致曾迈出了重要的一步，而最小/最大宽度和最小/最大高度功能则是补齐了响应式实现在设计到前端的另一块拼图

换行属性

这是网页技术中实现多列布局响应式的关键属性，因为它决定了元素在限定的布局内当超出一行后应如何展示，也许你说使用网格布局可以做到同样的事情，但如果你想使用自动布局（对应前端的弹性布局），那换行属性必不可少

原型

使用原型作为产品初始功能演示是很重要的，因为在它还没有被完整实现以前，可以快速地进行意见收集和改进。但对于一个功能复杂的应用，使用原型模拟出所有操作路径会很复杂，使用设计工具以往所提供的能力，原型中的步骤线可能会非常，因为你需要创建同一个页面在不同操作后的不同结果，因此最终原型内的关系会变得非常难以维护。

原型+变量

如果依托变量能力，原型可以变得怎样呢？

你可以为原型中使用到的状态定义变量，比如对于电商应用，你可以定义不同商品的名称、数量、价格等等。当定义完这些以后，你就像拥有了一个小型的数据库（数据库这个概念熟悉吗？Notion 的表格正是利用数据库方式存储表格数据，从而做到将同一个数据源以不同视图模式进行展示的效果）

动作使用变量

交互属性内的动作使用变量

比如当你点击某个元素时，你可以对变量的值进行更新，更新的值可以是在变量当前值的基础上增加计算逻辑，从而得到新的状态值。比如当你在购物车对某个商品点击加号时，理想的变化应该仅仅是商品展示的数量从 1 变成 2 即可，而使用以往的原型演示，这一效果可能需要拷贝一份容器，然后在新的版本内将数量改为 2。

怎么样？感受到变量的力量了吗，因为有了变量，这个场景下的原型交互可以直接省去一个重复的容器去展示不同的状态，而仅仅是通过变量的变化来表达状态的变化

原型预览

这是另一个工作流上的效率提升点，以往的原型预览是在一个新的标签页展示的，如今你可以直接在原型设计页面弹出一个和容器一样大的弹窗，直接看到一个像样机一样的页面呈现在你眼前，然后在此基础上进行调整。

这一交互其实源自苹果应用的开发，熟悉苹果 App 开发的人应该知道，苹果官方提供了专用的工具用于开发苹果系列的产品，叫做 Xcode。当你在 Xcode 内运行代码后，就会在弹出一个独立窗体用于展示你的 App，然后你可以在不需要切换标签页的情况下直接预览到你应用此刻的效果，从而在此基础上进行调整。

将这种交互应用在原型功能上，可以说是将原型使用者的体验与开发者更加接近了

条件语句

这也是源自编程语言的理念，因为有了条件语句，你可以对逻辑增加条件判断，从而使逻辑走向不同条件下的分支。但看似简单的能力，却可以产生丰富的结果。

用在原型场景，就是你原本对于不同元素的点击，下一步要展示的页面可能需要拷贝多份并做对应的修改才能达成。而使用条件语句，你可以对交互增加条件逻辑声明，当你点击商品列表中的苹果时，在跳转商品详情页时应该展示的是苹果的详情，包括苹果的价格和数量。

当你在购物车将所有商品的数量减少为 0 时，页面应该展示空态，而这些判断都是通过条件判断所定义的

未完待续，详见 下篇——开发模式