Figma Config 2022 给我们带来了什么?

2022-05-11 星期三

一年一度的 Figma 用户大会又来了,毫无意外,每次大会的开场都是可爱的 Dylan Field 给我们带来一些最近的重磅更新。这一次也一样,废话不多说,咱们一起看看吧!

自动布局 4.0

自动布局帮助我们节省了很多时间,也让我们的设计从静态变为动态。时至今日自动布局已经迭代了三个版本,这一次发布的 AL 4.0 可以说十分无敌(除了还不能实现多行排布以外)。

面板重设计

AL 4.0 对右侧调节面板进行了重新设计,把横向或纵向的适应方式——固定、适应内容还是充满剩余空间(Fixed, Hug content, Fill container)——移到了宽高那里,把内边距拆成横向和纵向分别调节。

负间距

同时,元素间距现在可以为负数了,这样我们就可以轻松做出头像堆叠的效果啦。

子元素堆叠顺序

之前一直被用户吐槽的一个事情就是,垂直方向自动布局内的元素顺序和左侧图层顺序相反,直觉上一直难以适应。现在,你可以自己设置元素排布顺序啦,配合负间距,你可以决定第一个头像在上还是最后一个头像在上(注意下图谁盖住谁)。

绝对定位

自动布局容器内的元素都会被自动布局规则控制,无法随意摆放。现在,你可以给内部的元素添加绝对定位,这样它就不受自动布局影响了。比如下图,我们想做一个带有下载进度的按钮,就可以给下载进度背景设置为绝对定位,这样它就能置于其他元素底层,和其他元素重叠了。你还可以给它设置约束,这样就能控制它在容器尺寸改变时的自适应规则。

基线对齐

现在除了顶部对齐、居中对齐和底部对齐,我们还可以选择基线对齐,这经常用于多个文字图层的对齐。

画布中快速调节

之前调节间距或边距都需要在右侧面板中调节,但是现在,我们可以直接在画布中调节了,效率加加加!

描边是否占据空间

此外,你还可以决定自动布局容器内元素的描边是否占据空间。

自动布局文档:https://help.figma.com/hc/en-us/articles/360040451373-Create-dynamic-designs-with-auto-layout社区 playground:https://www.figma.com/community/file/784448220678228461

暗色模式

除了自动布局这个重磅更新,Figma 还为我们带来了暗色模式。之前的设计工具几乎都是暗色模式,看起来很专业,亮色模式让我们在面对甲方时心虚不敢喊价。现在,你可以把 Figma 调成暗色模式,大胆地向甲方报一个较高的价格(小声说,目前这个暗色模式还有很大的进步空间啊)。

单描边

另一个重大更新,是大家在社区喊了很久的单侧描边。以前要做分隔线,要么用投影,要么画一条线,但是这两种做法都有坏处,用投影交付给开发说不清楚,画一根线就需要额外多一些图层。现在,我们可以给元素添加单侧描边了,这些问题就解决了。

组件属性

接下来这个大更新,可以解决变体数量庞大的问题。在以前我们需要罗列出一个组件所有属性组合,这可能会导致一个变体组件内包含成百上千个组件。现在,我们只需要给一个主组件添加属性,就可以在它的实例组件中组合这些属性了。

文字说不清楚,我直接录了个视频给你看怎么操作:

已关注
Follow
Replay Share Like
codesigner
Added to Top StoriesEnter comment

0/0

00:00/01:01
进度条,百分之0
00:00
/
01:01
01:01
全屏

倍速播放中

继续观看

Figma Config 2022 给我们带来了什么?

转载
,
Figma Config 2022 给我们带来了什么?
codesigner
Added to Top StoriesEnter comment

现在,你不需要一一罗列了,只需要给一个组件设置不同的属性就可以了,不过目前只支持是否显示、文字内容和组件替换三种属性控制方式,期待后面可以增加更多种类(小声说,这是抄的借鉴 Framer)。

社区 Playground:https://www.figma.com/community/file/1100581138025393004

可变字体

Figma 终于支持可变字体了,现在你可以调节无极字重,以及其他可变字体属性了。

已关注
Follow
Replay Share Like
codesigner
Added to Top StoriesEnter comment

0/0

00:00/00:16
进度条,百分之0
00:00
/
00:16
00:16
全屏

倍速播放中

继续观看

Figma Config 2022 给我们带来了什么?

转载
,
Figma Config 2022 给我们带来了什么?
codesigner
Added to Top StoriesEnter comment

来自 Clu 的推文[1]

社区 playground:https://www.figma.com/community/file/1100582092812434286

弹性动效

在原型动效这里,除了常见的缓动曲线,现在你还可以设置弾性曲线。

这样我们就能实现类似于弹簧一样的效果了。

社区 Playground:https://www.figma.com/community/file/1100581821937139565

带密码分享

以前我们要么邮箱邀请别人查看文件,要么公开对所有人分享,现在你多了一个选择——带密码分享(此功能仅对专业版、组织版等付费版本开放)。

More than one more thing

最后,还有很多最近或今天刚上线的贴心小功能。

收藏文件

点击文件卡片上的小星星,就可以把文件固定在左侧啦。可以把最近使用的文件收藏一下,这样再也不怕大海捞针啦。

分支状态和评审者

组织版的分支在合并时,还可以选择 Reviewer,也就是评审者,同时会标记分支状态。

国际化的键盘快捷键

世界上的键盘布局并不都是一样的,Figma 为此特别做了优化,目前主要针对的是德国、法国和日本的键盘(该特性现在还处于 Beta 状态)。

帮助文档:https://help.figma.com/hc/en-us/articles/5665442977431

超出现时省略号

不废话,看图:

聚光灯

所谓聚光灯,就是你可以强行让大家都跟着你的光标。在线上分享时,使用这个功能把大家拉到你所在的地方,再也不用说“点一下我头像跟着我”了,现在你就是最靓(亮)的仔。

最后

好了,新功能总结完了。接下来来自世界各地嘉宾的分享也都很精彩,大家也可以去看一下。Config 2022 结束之后 Figma 也会把这些视频录播放到油管上,大家也可以关注一下。

Config 2022:https://config.figma.com/events/figma-config-2022/home新功能:https://www.figma.com/whats-new/Figma 社区主页:https://www.figma.com/@figma

咱们明年见,拜拜。

References

[1] Clu 的推文: https://twitter.com/designedbyclu/status/1524050028091740160?s=20&t=zaHL065mzP0tDR-k6BZGlQ

原文地址:点击