Figma 提高效率常用16个快捷键使用技巧

2023-07-0110:48:31UI设计Comments5,273 views字数 1801阅读模式

分享一篇关于 Figma 提高效率的常用技巧，适合 UI 设计师、交互设计师、用户体验设计师、用户体验咨询从业人员、原型设计人员等阅读。

一、前言

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

比如，“保存” 用鼠标操作：点击界面开始菜单 - 调出下拉菜单 - 找到“保存”按钮再点击，这一系列动作需要点击 3 次鼠标，花费3～4 秒。如果使用快捷键，光靠下意识的动作，就可以在 0.1 秒内完成操作。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49032.html

下面整理了一些常用的 Figma 快捷键使用技巧，帮助我们提升Figma的操作效率，更快更好的完成工作，节省时间，以便更专注地思考方案。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49032.html

二、Figma快捷键技巧

1、查看 Figma 快捷键

快捷键：【Ctrl + Shift + ?】，打开 Figma 的快捷键面板，可查看 Figma 的所有快捷键，方便快速查找。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49032.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49032.html

2、等比例缩放

快捷键是【K】，在设计中缩放是经常要用到的功能，在 Figma 中，按一下【K】键进行缩放，就可以完全保证比例。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49032.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49032.html

3、快速画出环形进度条

快速画出环形进度条的方法，先画一个圆，然后鼠标拖动两下就完成了。如下图：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49032.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49032.html

4、图片快速填充

在桌面或文件夹，选择需要填充的图片【Command + C】。点选Figma中待填充元素【Command + V】。填充成功，如下图：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49032.html

Figma 提高效率常用16个快捷键使用技巧文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49032.html

5、复制粘贴样式

选中一个已经调整好样式的元素（图形或文字），第一步：【Command + option + C】，第二步：【Command + option + V】就可以把样式复制粘贴下来。如下图：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49032.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49032.html

6、快速定位组件母版

对于使用组件的元素，在调整的时候需要修改组件母版，才会对每个组件生效。当有很多组件时，我们可以通过任意组件，点选右侧“跳转回组件母版”icon，快速定位至母版。如下图：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49032.html

第一步：点选右侧“跳转到组件母版”icon，右侧红框处文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49032.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49032.html

第二步：自动定位到该组件母版文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49032.html

Figma 提高效率常用16个快捷键使用技巧文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49032.html

7、快速整理表格元素

选择一组阵列中的多个元素之后，可以随意交换任意两个元素之间的位置，其他的不受影响，还能直接拖动调整它们的间距。如下图：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49032.html

Figma 提高效率常用16个快捷键使用技巧文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49032.html

8、快速批量修改颜色

快速批量修改颜色。比如下面九个元素中有三个是红色，当我想要批量修改这三个红色元素的时候，我不需要一个个选择这三个元素，只需要批量选择，然后在右侧属性栏那里，选择想修改的那个红色，直接改颜色，三个元素的颜色就会一起修改了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49032.html

Figma 提高效率常用16个快捷键使用技巧文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49032.html

9、图层折叠浏览

快捷键【Alt+L】，可以直接将所有图层折叠起来，这样，不管之前展开了多少层，都能直接折叠，方便快速浏览整个系统的全貌。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49032.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49032.html

10、快速浏览图层

使用键盘快捷键快速浏览图层。快捷键【Tab】快速向下切换选中图层，【Shift+Tab】快速向上切换选中图层。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49032.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49032.html

11、快速选取颜色样式

使用颜色样式时，这里有一个小按钮（下图红框标出），可以快速得在列表样式和网格样式之间进行切换，使用列表样式能够更方便浏览使用了哪些颜色，方便进行管理。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49032.html

Figma 提高效率常用16个快捷键使用技巧文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49032.html

12、用吸色工具预览颜色

吸色工具的快捷键是【i】，当你按住【i】键不动时，移动光标，就能预览颜色，而不是直接取色了，预览的颜色就如下图，是展示在右上角的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49032.html

Figma 提高效率常用16个快捷键使用技巧文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49032.html

13、重复上一步操作

快捷键是【cmd/ctrl + D】，如下图所示，向右下方复制一个元素，然后使用【cmd/ctrl + D】，会继续向右下角复制元素，重复的是相关对象和操作中设计到的所有元素。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49032.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49032.html

14、自动行高

如果设计时输入了一些文本，行高有问题，但是暂时又没有很明确的行高参数，这个时候，只需要在行高这里输入 auto，点击回车，就可以把这些文字设置成自动行高了。如下图红框位置：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49032.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49032.html

15、单个图片导出

在右侧的属性栏中，有一个叫【Export】的属性，选中你想导出的对象，在【Export】属性这里点击【+】，还可以设置导出的具体参数，选择不同的倍率、图片的后缀名、图片格式，都设置好之后，点击导出按钮，图片就会自动下载下来了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49032.html

Figma 提高效率常用16个快捷键使用技巧文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49032.html

16、批量图片导出

批量导出图片。点击左上角 Figma 的标志，选择【File】-【Export】，点击可批量导出所有添加了切图标记的对象了，添加切图标记的方法通常有两种：一种是用切片工具，手动去切，一种是右侧属性【Export】那里按【+】添加。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49032.html

英文版，如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49032.html

Figma 提高效率常用16个快捷键使用技巧文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49032.html

中文版，如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49032.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49032.html