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

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

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

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

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

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

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

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

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

缩放工具在设计 UI 的时候也相当实用,只需要选择你要缩放的元素和内容,然后在键盘上单击「k」s g i o } 1 ~ I 键,就可以快速| 4 W c P w + ~拖动缩放,并且确保被缩放的元素是像素完美的。

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

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

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

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

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

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

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

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

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

可以使用 「cmd/ctrl + D」 复制你的上一个操作,并且 「cmd/ctrl + D」 这个操作还将会复制相关的@ K \ Z ^ C ! }对象/框架和任何操作中涉及到1 W y的元素。

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

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

当你点击吸色工具「i」之后,就可以吸取特定的# U E * y x X 9颜色,但是如果你按住 i 按键不动的时候,并且移动光标,就能够预览颜色而不是取色。h X ~ G r ] s E ,

7、快速解锁所有对象

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

使用 「cmd/ctrl + /」是一个可以帮你节省大5 Q H M量时间的快捷键,它可l i 7 +以调用多个不同的快捷操作M – h u 8 f 3 #,而我用的最多的,是用它一次解锁所有的对象和元素,以及修改字体` r ? _ ] 0 n @ \

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

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

使用 「cg H z X R O i 1 |md/ctrl + shift + k」的组合键,能够快速为占位符或者框架之类的元素添加一堆图片。

9、空格键的\ I k p g O K各种骚操作

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

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

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

当你拉出一个图形之e Z }后,这个时候按住空格键,就能够顺J Q [ = Y便移动这个元素了。

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

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

10、Content Reel + UnD U Nsplash

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

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

11、超好用的自动行高

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

如果你的文本行高看起来参差不齐a – X R 8 y ] y,而你也本身也暂时没打算设置某个特别的行高参数,那么你只需要在行高中输入 auto 或者删除其中的参数并且点击回车,就能X C W ( } S Z 0 K够设置成k 4 \为自动行高了!

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注