Figma提高效率的常用技巧

一、前言

如果软件操作速度提升了，那么在相同时间内，我们可以有更多时间和精力用于方案的思考，提升工作效率。这也是我们经常看到很多B端产品，在系统做快捷键的原因之一。在日常软件的使用中，我们要尽可能的多使用快捷键，减少鼠标操作。举个实例：

比如，“保存” 用鼠标操作：点击界面开始菜单 - 调出下拉菜单 - 找到“保存”按钮再点击，这一系列动作需要点击 3 次鼠标，花费3～4 秒。如果使用快捷键，光靠下意识的动作，就可以在 0.1 秒内完成操作。

下面整理了一些常用的 Figma 快捷键使用技巧，帮助我们提升Figma的操作效率，更快更好的完成工作，节省时间，以便更专注地思考方案。

文章末尾附 Axure RP9、 Sketch提高效率的常用技巧。

二、Figma快捷键技巧

1、查看 Figma 快捷键

快捷键：【Ctrl + Shift + ?】 ，打开 Figma 的快捷键面板，可查看 Figma 的所有快捷键，方便快速查找。

2、等比例缩放

快捷键是【K】，在设计中缩放是经常要用到的功能，在 Figma 中，按一下【K】键进行缩放，就可以完全保证比例。

3、快速画出环形进度条

快速画出环形进度条的方法，先画一个圆，然后鼠标拖动两下就完成了。如下图：

4、图片快速填充

在桌面或文件夹，选择需要填充的图片【Command + C】。点选Figma中待填充元素【Command + V】。填充成功，如下图：

5、按住CMD裁剪图像

单击 Command 按钮来裁剪图像。

6、批量填充图片

【 Shift + Command + K】从文件中选择照片，可以集中选择照片。还可以通过单击框架、矩形等来放置照片。

7、拖动+空格

如果要更改所选区域的位置，可以在选择区域后使用空格键。

8、Shift + A

自动布局元素，一般是从右侧面板使用此功能，使用快捷键【Shift+A】会更高效。

9、复制粘贴样式

选中一个已经调整好样式的元素（图形或文字），第一步：【Command + option + C】，第二步：【Command + option + V】就可以把样式复制粘贴下来。如下图：

10、快速定位组件母版

对于使用组件的元素，在调整的时候需要修改组件母版，才会对每个组件生效。当有很多组件时，我们可以通过任意组件，点选右侧“跳转回组件母版”icon，快速定位至母版。如下图：

第一步：点选右侧“跳转到组件母版”icon，右侧红框处

第二步：自动定位到该组件母版

11、快速整理表格元素

选择一组阵列中的多个元素之后，可以随意交换任意两个元素之间的位置，其他的不受影响，还能直接拖动调整它们的间距。如下图：

12、快速批量修改颜色

快速批量修改颜色。比如下面九个元素中有三个是红色，当我想要批量修改这三个红色元素的时候，我不需要一个个选择这三个元素，只需要批量选择，然后在右侧属性栏那里，选择想修改的那个红色，直接改颜色，三个元素的颜色就会一起修改了。

13、隐藏左右操作区域

快捷键【Command+ . （点）】，可以关闭左右操作区，相同的组合键打开操作区。

14、图层折叠浏览

快捷键【Alt+L】，可以直接将所有图层折叠起来，这样，不管之前展开了多少层，都能直接折叠，方便快速浏览整个系统的全貌。

15、快速浏览图层

使用键盘快捷键快速浏览图层。快捷键【Tab】快速向 下 切换选中图层，【Shift+Tab】快速向 上 切换选中图层。

16、快速选取颜色样式

使用颜色样式时，这里有一个小按钮（下图红框标出），可以快速得在列表样式和网格样式之间进行切换，使用列表样式能够更方便浏览使用了哪些颜色，方便进行管理。

17、用吸色工具预览颜色

吸色工具的快捷键是【i】，当你按住【i】键不动时，移动光标，就能预览颜色，而不是直接取色了，预览的颜色就如下图，是展示在右上角的。

18、重复上一步操作

快捷键是 【cmd/ctrl + D】，如下图所示，向右下方复制一个元素，然后使用【cmd/ctrl + D】，会继续向右下角复制元素，重复的是相关对象和操作中设计到的所有元素。

19、自动行高

如果设计时输入了一些文本，行高有问题，但是暂时又没有很明确的行高参数，这个时候，只需要在行高这里输入 auto，点击回车，就可以把这些文字设置成自动行高了。如下图红框位置：

20、单个图片导出

在右侧的属性栏中，有一个叫【Export】的属性，选中你想导出的对象，在【Export】属性这里点击【+】，还可以设置导出的具体参数，选择不同的倍率、图片的后缀名、图片格式，都设置好之后，点击导出按钮，图片就会自动下载下来了。

21、批量图片导出

批量导出图片。点击左上角 Figma 的标志，选择【File】-【Export】，点击可批量导出所有添加了切图标记的对象了，添加切图标记的方法通常有两种：一种是用切片工具，手动去切，一种是右侧属性【Export】那里按【+】添加。

英文版，如下：

中文版，如下：

22、Figma文件如何导入fig

第一步：进入网页版Figma www.figma.com

第二步： 把fig文件直接拖进网页；

第三步：打开电脑客户端，电脑客户端也会同步

23、如何导出fig

第一步：单击Figma图标

第二步： 【文件】-【保存本地副本】

Figma快捷键大全中文版，如下：（如果觉得文字小，可下载到本地放大看高清）

《Axure RP9提高效率的常用快捷键》 https://www.zcool.com.cn/article/ZMTQ4OTcwNA==.html
《Sketch提高效率的常用技巧》 https://www.zcool.com.cn/article/ZOTkyNjIw.html
《Figma文章》 https://www.figma.cool/article
《Figma常用的9个插件推荐》https://www.figma.cool/article/Figma-plugin