/Figma新加的这些功能，太实用了！
最新文章2024-01-27

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 份资料，包含图文解说和可以操作的模板。


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






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



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




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



本文来自微信公众号“体验进阶”（ID：Advanced_UX）。大作社经授权转载，该文观点仅代表作者本人，大作社平台仅提供信息存储空间服务。

TAGS:

相关文章