第一波!我希望能早点知道的 11 个 Figma 技巧

释放双眼,带上耳机,听听看~!
编者按:这篇文章来自资深 UI设计师 Danny Sapio,他总结了日常设计过程中,使用 Figma 的一些非常快速的设计技巧,希望能帮到大家:Figma 这款设计工具进步真的超级快,在 Sketch 当中很多进阶的、复杂的功能,在 Figma 当中实现起来像呼吸一样简单。我经常能在 Figma 当中碰到一些省时省力的功能和小技巧,每次这样的发现都令我兴奋不已,而这个系列,我就来分享一下这些能够帮助UI设计师事半功倍的小技巧。

编者按:这篇文章来自资深 UI设计师 Danny Sapio,他总结了日常设计过程中,使用 Figma 的一些非常快速的设计技巧,希望能帮到大家:

第一波!我希望能早点知道的 11 个 Figma 技巧

Figma 这款设计工具进步真的超级快,在 Sketch 当中很多进阶的、复杂的功能,在 Figma 当中实现起来像呼吸一样简单。

我经常能在 Figma 当中碰到一些省时省力的功能和小技巧,每次这样的发现都令我兴奋不已,而这个系列,我就来分享一下这些能够帮助UI设计师事半功倍的小技巧。

1、此生最轻松的环形进度条设计方法

第一波!我希望能早点知道的 11 个 Figma 技巧

不清楚是不是所有人都知道这个方法,但是 这应该是我这辈子最快的环形进度条的设计体验,只要使用弧形工具,就可以快速拖拽出美观而均匀合理的效果。

2、使用缩放工具避免出现变形

第一波!我希望能早点知道的 11 个 Figma 技巧

缩放工具在设计 UI 的时候也相当实用,只需要选择你要缩放的元素和内容,然后在键盘上单击「k」 键,就可以快速拖动缩放,并且确保被缩放的元素是像素完美的。

在以往我总是不愿意使用缩放功能,因为总会因为种种原因导致部分缩放出问题并为之进行调整。在 Figma 中使用缩放功能则可以完全保证比例,无需返工。

3、将对象拖出框架外并让它还在容器

第一波!我希望能早点知道的 11 个 Figma 技巧

当你按住空格键并且将某个对象拖出框架外的时候,能够让它依然处于这个容器内只是不可见,当然, 你还可以关闭「Clip contents」 选项,那么你就能够让它在容器外也可见。出来这种方法之外,你还可以使用 「cmd/ctrl + Y」 在不可见的情况预览到它的外轮廓。

4、快速整理、调整并管理表格元素

第一波!我希望能早点知道的 11 个 Figma 技巧

当你选择一组阵列中多个元素之后,通过单击角落的网格图标,就能对他们进行快速的整理,比如让元素之间的距离相等,还可以通过拖动快速地调整间距。

5、快速重复执行上一个操作

第一波!我希望能早点知道的 11 个 Figma 技巧

可以使用 「cmd/ctrl + D」 复制你的上一个操作,并且 「cmd/ctrl + D」 这个操作还将会复制相关的对象/框架和任何操作中涉及到的元素。

6、使用吸色工具快速预览颜色

第一波!我希望能早点知道的 11 个 Figma 技巧

当你点击吸色工具「i」之后,就可以吸取特定的颜色,但是如果你按住 i 按键不动的时候,并且移动光标,就能够预览颜色而不是取色。

7、快速解锁所有对象

第一波!我希望能早点知道的 11 个 Figma 技巧

使用 「cmd/ctrl + /」是一个可以帮你节省大量时间的快捷键,它可以调用多个不同的快捷操作,而我用的最多的,是用它一次解锁所有的对象和元素,以及修改字体。

8、快速为占位符图形添加图片

第一波!我希望能早点知道的 11 个 Figma 技巧

使用 「cmd/ctrl + shift + k」的组合键,能够快速为占位符或者框架之类的元素添加一堆图片。

9、空格键的各种骚操作

第一波!我希望能早点知道的 11 个 Figma 技巧

当你在进行选中多个元素的操作的时候,你可以用光标拉出一块区域,这个时候按住空格键就能拖动你的选中区块,这个时候就能带着这个区域来选中文件,移动过程中选中一大堆元素。

第一波!我希望能早点知道的 11 个 Figma 技巧

当你拉出一个图形之后,这个时候按住空格键,就能够顺便移动这个元素了。

第一波!我希望能早点知道的 11 个 Figma 技巧

除此之外,你还可以在拖动元素的时候按住空格键,防止元素在框架或者自动布局当中自动嵌套到其中!

10、Content Reel + Unsplash

第一波!我希望能早点知道的 11 个 Figma 技巧

Content Reel + Unsplash 是两个必备的插件,使用 Content Reel 能够快速帮你生成各种占位符,而不是让你的 UI 界面中每个用户都是「无名氏」,当然,它能生成的占位符有很多类型,名字、头像、ID、文本段落等等全都有。Unspalsh 则是著名的免费图库的插件,能够为你提供高质量的图库。

11、超好用的自动行高

第一波!我希望能早点知道的 11 个 Figma 技巧

如果你的文本行高看起来参差不齐,而你也本身也暂时没打算设置某个特别的行高参数,那么你只需要在行高中输入 auto 或者删除其中的参数并且点击回车,就能够设置成为自动行高了!

给TA打赏
共{{data.count}}人
人已打赏
教程分享

微信官方出品! 超详细的 watchOS App 设计指南

2021-5-8 17:16:29

教程分享

这10个顶尖的设计规范,每个设计师都应该收藏!

2021-5-11 17:16:39

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索