聊聊昨晚 Figma Config 带来的新功能
Dark Mode
Dark Mode 在大会之前就传得沸沸扬扬，并且泄露了接口， 可以通过在浏览器 Develop Tools 的 Console 中输入 document.body.dataset.preferredTheme = "dark" 来开启，现在正式发布后放到了设置菜单里 ，或者使用快捷键`Command + / 或 Command + P 后搜索 Dark 更方便。
这个功能是由 Ryhan[1] 和另一位华人设计师 Qi Linzhi[2] 负责的，并且 Ryhan 分享了背后的一些设计细节[3]。(话说两位都是 gay，设计品味自然不用怀疑)
个人点评：感觉目前的 Dark Mode 还是不那么精致，也不是我喜欢的那种 Dark，可以优化的地方还很多。
New Auto Layout
今年的重头戏，主要增加了负间距 negative spacing、堆叠顺序 canvas stacking、绝对定位 absolute positioning、基线对齐 test baseline alignment、描边是否占据布局空间 stroke values included in layout 这些新特性，以及全新设计的面板。
新面板把 Fixed, Hug content 和 Fill container 这些空间布局的属性移到了最上面，再加上绝对定位，至此 Frame 面板里都是 position 相关的属性了。而 Auto Layout 面板只保留 Flex 和 Padding 相关的布局属性。
Canvas stacking：相信很多人都做过 avatar 头像相关的设计和组件，以前想要做这种布局 auto layout 是无法实现的，现在通过设置堆叠顺序和负边距就完全可以做到了。
Negative spacing：间距属性对应的 CSS 属性是 Flex 中的 gap: ?px，但是由于 gap 并不支持负值，所以当你在面板中使用负值时， CSS 导入代码中就没有 gap 了。
Aabsolute positioning：绝对定位可太有用了，UI 中需要自动布局结合绝对定位的地方太多了，比如通知图标上面的角标，个人设置里上面的按钮等等，以前通常是分成两个 frame 分别定位，现在只需要在右上角把需要的元素设置成绝对定位就好了。不过说实话一开始都没找到在哪里设置，还以为藏在 auto layout 里，而且在 dark 模式图标点击后的 active 样式不是很清晰，这也说明了 Dark Mode 需要优化的地方还不少。
画板中新增的快速调节功能也很有用，和之前的 Stack layout 也可以在画板中拖拽调节类似，并且还可以直接输入数值。
Stroke values included in layout：看似不起眼但很好的小改进，可以把描边从布局中剔除不占布局空间，对于一些按钮组合和特殊的设计布局会很有用。
个人点评：目前的 Auto Layout 算是做到了 CSS Flex 基本功能吧，而更高级的功能可能也不适合做在设工具里，更不用说还有 Grid 布局，gap 还可以设置多参数 gap: 20px 40px 或百分比 gap: 16% 等等目前都没有。不过就目前的完成度来说作为一个设计软件也绰绰有余了。
Component properties
设计系统这两年发展得越来越成熟，Figma 有很大的功劳，但大家都发现一个设计系统中，即使是很基础的组件，想要覆盖各种场景和需求，都要做无数个变体。就像下图这样，不仅维护起来很麻烦，组件多了导致文件太大性能急剧下降等问题。
而现在只需要给组件添加各种属性就能在侧边栏中直接使用了。官方的 Playground[4] 文件和文档[5]都写得非常详细了，看似很复杂其实理解了背后的逻辑一点也不难。
另外值得一提的是：变体中还增加了一个选择所有匹配图层的功能。
个人点评：Framer 很早就支持这种属性侧边栏了，甚至还可以通过代码自定义，而 Sketch 当年的 Symbols 就是这样的，逻辑上可能不太一样但交互和侧边栏操作基本都一致。早期 Figma 的组件刚出来我还纳闷为什么不采用这种模式，是故意要做得不一样吗？看来最后还是绕回来了。
Spotlight
非常贴心的功能改进，每次开会时演示设计稿，别人经常找不到你的鼠标在哪，只能提醒对方点击右上角我的头像就能找到了……现在终于可以强制跟随你的鼠标而无需其他人再操作了。这个功能还学习了最近流行的直播，比如 Twitter Space 如果想发言可以举手申请主持人同意，同样当你在自己的头像上点击 Spotlight me 其他人也会被通知有人要求被跟踪。
Variable fonts
也是一个千呼万唤的功能，自从几年前 Figma 刚流行的时候人们就一直盼望加入可变字体的支持，今年终于把这个功能做完了，为此 Figma 还专门设计了一个专页[6]。
由于 Figma 支持自动加载 Google Fonts 里面的字体，就拿上周 Google 新发布的 Roboto Flex 举例，可以看到所有属性都支持，连 Optical Size 这种微调轴也可以设置。打开官方提供的 Variable Fonts Playground[7] 文件里面有更详细的教程讲解。
个人点评：不太懂的领域就不细说了，不过目前字体面板上的所有可视化选项，基本上都和 CSS 中字体部分的语法对应上了，虽然大部分设置名称和用法都比较晦涩，一般情况下设计师也用不上。
Spring animation
弹性动画作为 web 中最常见的动画效果， Framer 早在第一版 Framer Classic 中就支持了，这么多年过去 Figma 终于增加了这个功能。目前预置的有 Gentle、Quick、Bouncy、Slow 四种效果。
Figma 和 Framer 的弹性动效对比
Individual strokes
又一个呼声很高且早就该有的功能，早在 Photoshop 时代人们就学会了使用 drop shadow 和 inset shadow 模拟分割线，当然初学者直接画一条线也可以，但都 2022 年了这种既不标准也很麻烦的 hack 方法早就该淘汰了，于是这次 Figma 终于加上了独立描边这个小功能。
每个描边分别对应 CSS 中的 border 语法，其中 custom 代表自定义宽度，和圆角功能中自定义数值的操作类似。目前独立描边可以应用在矩形、Frame、组件这些元素中，如果是不规则元素这个选项就没有了。
个人点评：从 CSS 的角度理解也是比较基础的功能，现在 CSS Border 配合渐变、mask 还可以玩出很多花样，当然设计软件里做到这样已经足够用了。不过既然和前端更一致了，Radius 圆角的设置是不是也应该放到 Border 面板呢？
Review states
企业版专有功能，配合 Branch 版本控制功能使用，一般大部分人都用不到，就不详细展开了。
但是你发现它像什么吗？是的，我们现在已经习惯在 Figma 中自定义 Cover 封面图来管理文件和项目了，社区很多这类资源还加上 states 组件来切换显示状态，和上图官方自带的功能很像。只不过我们普通付费用户只能手动添加，而尊贵的企业版用户可以通过程序自动生成……
个人点评：其实 Figma 可以给所有用户提供一个 Cover 添加颜色标签和设置状态名称的功能，既然 Frame 设置成 Cover 都做了，再迭代一下又不是难事，大部分人不需要 Branch 版本管理，只需要加个标签给开发者看就好了。连国产的几个竞品现在都支持这种功能了，原创竟然还不支持。
CSS Variables and Theming
还有一个几乎没提到的细节是：现在插件开发者可以直接拿到 Figma 系统的 token，这样就可以让插件界面和原生面板更好的统一，还能支持适配 Dark Mode 了。具体可以看官方提供的文档[8]。
全部更新列表中还有很多内容就不详细展开了，大部分都和设计本身无关，我只把红色重点部分拿出来讨论一下。具体可以参考官方的推文[9]。
1. Dark mode
2. New auto layout
3. Component properties
4. New widgets for FigJam
5. Spotlight
6. Variable fonts
7. Spring animation
8. Individual strokes
9. Review states
10. Updated outlines view
11. New international keyboard shortcuts
12. Password-protected links
13. Widget Code Generator
14. Favoriting files
引用链接
[1] Ryhan: https://twitter.com/ryhanhassan/[2] Qi Linzhi: https://twitter.com/LinzhiQ[3] 分享了背后的一些设计细节: https://twitter.com/ryhanhassan/status/1524055456972386304[4] Playground: https://www.figma.com/community/file/1100581138025393004[5] 文档: https://help.figma.com/hc/en-us/articles/5579474826519-Create-and-use-component-properties[6] 还专门设计了一个专页: https://www.figma.com/typography/variable-fonts/[7] Variable Fonts Playground: https://www.figma.com/community/file/1100582092812434286[8] 官方提供的文档: https://www.figma.com/plugin-docs/css-variables/[9] 官方的推文: https://twitter.com/figma/status/1524052372871270400
题外话：我的微信昨天被封了，三天后才能解封，现在不能发朋友圈不能群聊……如果看到的朋友，帮忙转发一下，谢谢！
更多精彩文章