Figma新加的这些功能，太实用了！

今年 5 月 11 日设计工具界的独角兽 Figma 开了一场线上发布会：Config 2022: Thinking big and acting with urgency.

CEO 兼联合创始人 Dylan Field 小哥有些腼腆地在开场演说中，介绍了 Figma 的一系列新功能。

Figma 的前瞻性和易用性一直让人印象深刻，这次发布的很多新功能，让我感觉设计与前端的次元壁正在慢慢溶解，仿佛看到了 UI/UX 设计的未来。

如果你没时间看上面这个我制作的中字版，可以往下翻，快速浏览一下新功能介绍。

不管你用不用 Figma，都可以了解一下，获取一些灵感。

1. 暗黑模式

虽然这并不算什么创新，但也是“千呼万唤始出来”，暗黑爱好者可以满足了。

2. 自动布局

2.1. 拖动改间距

Figma 一早就有拖动改间距的功能，只是之前没有运用到自动布局上。只要把整齐排列的元素全部选项，拉动中间的红色横杠就行。

现在选中自动布局的 Frame，就会出现代表间距和边距的横杠，鼠标拖动即可调节宽窄。

如果拖动时按下 option (alt) 键，还能同时统一调整两侧内边距。

2.2. 负间距

Figma 也是早就有负间距的功能，选中多个整齐排列的元素后，可以通过将间距设置/拖动为负数，来让元素整齐叠在一起。

现在这个功能在自动布局上也能用了，主要的差别是要选中整个 Frame，而不是选中需要排列的元素。

2.3. 文字对齐

现在允许在自动布局模式下设置文字对齐，只需点击「…」图标打开高级布局面板，开启 Text baseline alignment 就行。

2.4. 绝对定位

用 Figma 的自动布局很难做出下面这种层叠关系，因为所有元素必须从左至右或从上至下排布才行。

现在有了绝对布局功能后，能够将一个元素固定在 Frame 的某个位置上，相当于从自动布局中脱离出来，不和其它普通元素一样依次排布了。

3. 文字编辑

3.1. 自动省略

前端开发做自动省略，只需一行代码。

但是大部分设计工具却没有这个功能，需要设计师自己手动删除多余文字，并在末尾加上“…”，想想还挺不合理的。

现在可以在文字的 Type setting 窗口设置设置一下，不管有多少文字都能根据文本区域自动省略了。

3.2. 字体调节

调节字体粗细一直都是依靠几个粗细选项，但是 Figma 这次推出的 variable fonts，可以让你通过拖拽随心调整。

这个也是本次更新的主打功能了，不过我没有放在前面讲，主要是因为能支持的中文字体太少了（说是能支持大部分 Google Fonts）。

4. 单边框

之前我们在设计工具上画分割线一般是用直线工具，比较麻烦，而且还不好对齐。

现在 Figma 允许添加单个边框，可以用来做分割线，方便多了。

P.S. 我之前经常用内阴影来做边框感觉也挺好用。

5. 组件属性

Figma 的组件灵活性很高，颜色可以改、图片可以改、文字可以改、图层可以删……

虽然方便，但是变体太多不好管理了。

组件属性，就可以用来标出主要的设置项。P.S. 虽然即便设置了组件属性，之前能改的地方也依旧能改，但多少有了些规范作用。

从上面这张图可以看到，组件属性又三种类型：交换示例属性（切换图标）、布尔属性（是否展示）、文本属性（修改文本）。

下图就是给组件设置属性的方式：在组件里选择一个元素后，在 Layer 右侧点击那个图标，就能将这个元素设置为该组件的一个属性了。

设置的属性类别，跟选中的这个元素相关：

• 选中的是组件 – 设置为交换示例属性（切换图标）

• 选中的是文本 – 设置为文本属性（修改文本）

• 选中的是其它 – 设置为布尔属性（是否展示）

6. 弹性动效

这也不算什么创新，只是补齐之前 Prototype 的缺失功能。

7. 其它

接下来的新功能重要性没那么高，我就放到一块儿了。

7.1. 文档密码

因为链接是永久的，如果分享给外部人员，时间长了容易造成风险，加上一个密码之后，安全系数就上升了。

7.2. 标星

文件管理时，界面多了一颗星星，点亮后就可以在左侧的 Favorites 列表找到。

7.3. 线框模式 Outline Model

当你想要快速找到层叠起来的元素时，Outline Model 还是比较方便的。只要点击 shift + o 就能进入或退出该模式。

7.4. 聚光灯 spotlight

和团队一起在一个文件上在线讨论时，很容易不知道看哪里，有了这个功能，就能让其他人跟随自己的屏幕了。

不过，这也不是什么创新功能，很多设计工具都有。

7.5. 查看分支变化

分支（Branch）团队版的功能，同样的设计可能有一版确认方案，还有好几版试稿或者修改中的版本。

Figma 最新版允许给不同的分支添加状态，以便更加方便地查看管理。

? 最后，送点资料

因为篇幅有限，很多新功能的具体用法都无法详细解释。

Figma 官方其实提供了 4 份资料，包含图文解说和可以操作的模板。

我帮大家把中文版整理了一份，供网络不方便的同学们下载：

---

想要学习或者练习体验/交互设计的朋友，可以了解一下「体验设计学习社」。

无限制作品集详细点评+答疑+免费训练营&学习打卡等活动，更有各类大厂内推：

如果你只是想要多认识一些同行，也可以加入我们无广告的纯粹体验研讨微信群：

本篇文章来源于微信公众号: 体验进阶