Figma UI3 官方组件库之变

本文授权转自：体验进阶（ID：Advanced_UX）

Figma 作为全球当前备受瞩目的 UI 设计工具，近期迎来了重大改版，并命名为 UI3。然而，网络上相关文章及评论未能给予清晰明确的阐释，即便向早期试用的设计师问询，也未获取到确切评价。在此情形下，起初对此次改版未抱期望，但经亲自试用后，发现其优劣并存。

梳理出以下内容。无论使用者是否已更换为 UI3，或是尚未使用，亦或根本不使用 Figma，希望以下内容能提供一定参考。

改得好的点

（一）组件库获取便捷化

以往获取组件库需在 Community 中搜索并复制到本地，过程繁琐。如今，在左侧栏点击 Assets，即可呈现三种官方组件库，涵盖苹果、谷歌以及 Figma 自身提供的官方组件库，极大地提高了获取组件库的效率。

（二）翻转功能优化

翻转功能在设计中使用频繁，此前该功能位于右键菜单，且水平（horizontal）和垂直（vertical）方向容易混淆，操作效率较低。

现在，这两个功能以清晰易懂的图标形式展示在旋转角度输入框旁边，显著提升了操作便利性。

（三）图层自动布局可视化

在设计过程中，经常会遗忘是否给 Frame 设置自动布局，查看右侧 Auto Layout 虽可确认，但当 Frame 从左侧图层查找时，视线需左右移动，较为不便。

现在，左侧图层通过图标区分设置了自动布局的 Frame，使操作更为便捷。

（四）图层文本查看优化

由于左侧栏空间有限，长文本的图层名往往只能显示部分内容，不利于查看。现在，鼠标悬停即可查看完整文本，改善了查看体验。

（五）效果切换更便捷

以前，在切换图层模糊（Layer Blur）和背景模糊（Background Blur）等效果时，选错需删除后重新选择。

现在不用删了，可以在保留数值的情况下，直接换成其它的效果，提高了操作效率。

（六）尺寸与自动布局整合

以前的尺寸设置在上面，如果下面设置了自动布局 Auto Layout，上边的尺寸设置就发生联动——这联动距离有点远。

现在所有布局相关的设置都整合到了一起，用一个按钮作为切换开关。

这样设计确实更合理了，只是这个按钮开关图标设计得很好理解。

（七）不常用功能精简

部分不常用功能在 UI3 中进行了优化处理。Constraints 可以在 Frame 尺寸变化时，将里面的元素用不同的方式固定。

但是因为很多可以靠自动布局完成，所以在 Figma 中这个功能其实用得不多，UI3 就把它收起成一个小图标了。

原本图层混合模式 Blend Model 是用下拉框选择的。我主要是画交互稿时，利用 Luminosity 给图片去色。

现在收成一个小图标了，可能大部分 UI 设计师用得不多吧。

原本右栏有个 inspect 页签，用来展示页面样式。

这种主要是开发看了有用，所以只存在开发者模式了。

Frame 的布局切换找不到了，这个功能我几乎没用过。

没什么用的点

侧栏终于可以调整宽度了。

然而它只能拉宽不能收窄，而画方案时没人会想拉宽吧？所以这个功能暂时看不出有什么用。

侧栏可以收成一行。

我以为悬停可以展开，那样切换还挺方便。结果不是，展开和收起都必须鼠标点击。

右栏很多输入框上面多了一行标题，这个对于 Figma 熟手来说，完全是画蛇添足了，悬停出气泡不够吗？

以前组件列表是用树形结构展开收起的，虽然看着复杂了一点，但还算方便。

现在改成了像文件夹那样逐级打开的。一旦点错了，就得退回上一级，效率没有树形结构高。

另外，虽然有缩略图第一眼看着挺清晰，但是占位比较大，分类太多时会比较难找。

也不是完全否认这个改版，只是觉得变动这么大，却并没有提供明显的价值，性价比不是很高。

以上仅代表个人观点，如有不同想法，欢迎留言交流。

二、有待改进之处

（一）右栏过长且复杂

对于任何设计工具，属性面板都是很容易变得太过复杂。而当时我刚开始对 Figma 最满意的一点，就是它的属性面板足够简约。

现在 Figma 把之前顶栏的东西挪到右栏，又在输入框上塞了很多标题，导致右栏的属性面板变得很长，找东西反而没以前方便了。

举个例子，背景色 Fill 是高频功能。背景色（Fill）功能位置下移，超出屏幕范围，需滑动查找。

（二）边栏头部布局不合理

右栏之前是比较纯粹的属性面板，而现在顶部加上了头像、原型演示和分享。

属性面板是针对画布中选中元素的；

原型演示和分享是针对整个文档的；

头像是针对整个帐号的。

与原本的属性面板功能混淆，变得混乱。

左栏头部布局也存在空间浪费的问题。

（三）插件入口隐藏过深

插件入口原本位于二级菜单，虽存在不便，但上次选择插件页签下次会默认选中，使用上有一定便利性。

现在插件页签不会被默认选择，而且还跟 Widgets 合并了。

关键是前两个页签内容重要性不明显，导致插件使用不便，对于经常使用插件的用户不太友好。

我自己还蛮常用插件的，所以对这个改动不太满意。

总结一下

Figma 的 UI3 比之前有提升吗？

视觉上走便当盒风格，加了很多胶囊和圆角样式。悬停动效也更加细腻，看起来比之前更成熟了，相比之前在某些方面有一定提升。

然而，在实际体验中，虽有亮点，但改进幅度有限，处于一种不尴不尬的境地，导致难以获取明确的评价。

你觉得这次 Figma 的改版怎么样？对你个人来说，有什么特别好的点，或者特别糟的点？

福利时刻！！！

【IXDC赠书活动正在举行，点开书名或打开图片链接参加活动，即有可能获得实体图书一本噢！】

文章转载：体验进阶，版权归原作者所有

原文链接：https://mp.weixin.qq.com/s/qiCPY6_xUfY3OOz7d8d0XQ

版权声明：“IXDC”所推送的文章，除非确实无法确认，我们都会注明作者和来源，本公众号对转载、分享的内容、陈述、观点判断保持中立，不对所包含内容的准确性、可靠性或完善性提供任何明或暗示的保证，仅供读者参考。部分文章推送时未能与原作者取得联系，若涉及内容或作品等版权问题，烦请原作者联系我们，给出内容所在的网址并提供相关证明资料，我们会核查后立即更正或者删除有关内容！本公众号不承担任何责任，并拥有对此声明的最终解释权。

联系微信：18802086168

联系电话：18802086168

编排 | 巫 欢

终审 | 苏 菁

点这里，学习更多设计知识！