分享一篇来自资深 UI设计师 Danny Sapio的文章，他总结了日常设计过程中，使用 Figma 的一些非常快速省时省力的功能和小技巧，因为文章属于直译，因此在编辑时候确保不影响本意的情况下有辅助性的帮大家梳理知识点，希望能帮到大家快速掌握技巧，让各位在今后的 Figma 设计当中做起图来如同呼吸一样简单。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34878.html
1、此生最轻松的环形进度条设计方法
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34878.html
良心哥不清楚是不是所有人都知道这个方法，但是 这应该是我这辈子最快的环形进度条的设计体验，在figma中只要使用弧形工具，就可以快速拖拽出美观而均匀合理的效果，一键生成，是不是比Sketch和XD、这些方便多了！文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34878.html
2、使用缩放工具避免出现变形
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34878.html
这个缩放工具在设计 UI 的时候也相当实用，只需要选择你要缩放的元素和内容，然后在键盘上单击「k」 键，就可以快速拖动缩放，并且确保被缩放的元素是像素完美的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34878.html
在以往我总是不愿意使用缩放功能，因为总会因为种种原因导致部分缩放出问题并为之进行调整。在 Figma 中使用缩放功能则可以完全保证比例，无需返工。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34878.html
3、将对象拖出框架外并让它还在容器中
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34878.html
当你按住空格键并且将某个对象拖出框架外的时候，能够让它依然处于这个容器内只是不可见，当然， 你还可以关闭「Clip contents」 选项，那么你就能够让它在容器外也可见，初次之外，你还可以使用 「cmd/ctrl + Y」 在不可见的情况预览到它的外轮廓。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34878.html
4、快速整理、调整并管理表格元素
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34878.html
当我们选择一组阵列中含多个元素之后，通过单击角落的网格图标，就能对他们进行快速的整理，比如让元素之间的距离相等，还可以通过拖动快速地调整间距，是不是很棒？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34878.html
5、快速重复执行上一个操作
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34878.html
这个和我们使用AI工具里面的Ctrl+D连续重复复制是一个道理，在figma中使用 「cmd/ctrl + D」 复制你的上一个操作，并且 「cmd/ctrl + D」 这个操作还将会复制相关的对象/框架和任何操作中涉及到的元素。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34878.html
6、使用吸色工具快速预览颜色
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34878.html
当你点击吸色工具「i」之后，就可以吸取特定的颜色，但是如果你按住 i 按键不动的时候，就可以移动光标预览颜色而不是取色。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34878.html
7、快速解锁所有对象
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34878.html
「cmd/ctrl + /」是一个可以帮你节省大量时间的快捷键，它可以调用多个不同的快捷操作，而我用的最多的，是用它一次解锁所有的对象和元素，以及修改字体。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34878.html
8、快速为占位符图形添加图片
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34878.html
相信很多人和良心哥一样，在设计时候没有找到合适的图片，后面我们找到或者做好图了可以使用 「cmd/ctrl + shift + k」快捷键，快速为占位符或者框架之类的元素添加一堆图片替换。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34878.html
9、空格键的各种骚操作
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34878.html
当你在进行选择多个元素的操作的时候，你可以用光标拉出一块区域，这个时候按住空格键就能拖动你的选中区块，移动光标时候就可以移动选中一大堆元素啦。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34878.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34878.html
还有就是当你拉出一个图形之后，这个时候按住空格键，就可移动这个元素文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34878.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34878.html
除此之外，你还可以在拖动元素的时候按住空格键，防止元素在框架或者自动布局当中自动嵌套到其中！文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34878.html
10、Content Reel + Unsplash
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34878.html
Content Reel + Unsplash 是两个必备的插件，我们在之前的文章中也有专门的介绍，使用 Content Reel 能够快速帮你生成各种占位符，而不是让你的 UI 界面中每个用户都是「无名氏」，当然，它能生成的占位符有很多类型：名字、头像、ID、文本段落等等全都有，Unspalsh 则是著名的免费图库的插件，能够为你提供高质量的图库，他的图片是免费可商用的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34878.html
11、超好用的自动行高
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34878.html
如果你的文本行高看起来参差不齐，而你也本身也暂时没打算设置某个特别的行高参数，那么你只需要在行高中输入 auto（自动） 或者删除其中的参数并且点击回车，就能够设置成为自动行高了！文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34878.html
12、好用的断点控制
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34878.html
在使用这个 Breakpoints（http://navo.top/mAv6zi）插件，你可以像 CSS Flexbox 一样在你的设计文档当中控制样式和断点，可以轻松地将它们插入到自适应框架当中，并且在你拖动边缘的时候，让元素样式灵活自然地自适应。更多Figma实用插件安装请点击>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34878.html
13、将状态标签添加到框架中
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34878.html
当你向客户或者产品和其他设计师在 Figma 当中协同合作的时候，有时很难用语言表述不同设计状态。这时候我们就可以用 Figma Tags 这个插件能够帮你为界面元素快速添加状态，确保你无需向其他人进行复杂的解释，而且这款插件本身就有非常完善的预设状态。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34878.html
14、设计时「隐身」的方法
作为一个UI设计师通常都会有这样的一种焦虑，就是不希望别人看着你设计。虽然他也学不去，但就是浑身不自在，试想下旁边同事盯着你的屏幕看你做图，是不是很难受？今天叫你一个方法就是当你在 Figma 中设计的时候，在保持在线协作状态下，别人是可以实时看到你的设计过程和状态的，如果你想「隐身」，断开 Wifi 即可。有人会问断网还可以做吗？是可以做的，只要保证在关闭文档之前联网，就不会丢失你的设计进度，此外你还可以将文档保存成离线脱机格式 (.fig)，因为 Figma 一般不会保存本地副本。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34878.html
15、一键删除背景
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34878.html
一个比较强大的插件，简单来说就是一键去背景，在用XD和sketch时候良心哥基本都是把图片拖到 PS 中用钢笔或者魔棒工具来删除背景，比较麻烦，现在用figma时发现可以使用这个 RemoveBG（http://navo.top/VVVbUv）插件 就能帮你一键搞定问题，当然能不能抠头发就不得而知了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34878.html
16、创建私人样式和组件
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34878.html
为了防止 Figma 直接覆盖你创建的样式和组件，你可以在命名的时候加入一些前缀标识，将这些样式变为私人的样式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34878.html
在组件名称前添加 「 . 」和 「 _ 」这样的符号，就能做到这一点，比如「 _Component Name 」这样，在发布过程中，系统就会跳过这些样式和组件，并且在「Assets」面板和「库」当中，将这些样式和文件标注为「Private to this file」，也就是专用于这个文档的样式和组件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34878.html
17、在 Figma 当中聊天
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34878.html
虽然有时候你通过别的实时沟通工具（比如微信钉钉）会更加习惯，但是你的信息可能会被别人的信息给埋没掉，这个时候不妨使用 Figma Chat（http://navo.top/ZBBVRf） 这个插件，直接实现在 Figma 当中同你的协作设计师或产品进行一对一沟通。更多Figma实用插件安装请点击>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34878.html
18、一键获得同色系的所有颜色
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34878.html
这个也一样，在之前的figma插件安装中良心哥有介绍过，他是一个可以帮助我们获得同色系配色，不用你再挨个在色板吸色了，而且吸得也不准确。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34878.html
19、为组件增加边框投影
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34878.html
用过此软件的可能都清楚，在 Figma 当中似乎无法为元素特定的一侧增加下划线，这个时候我会使用投影来实现这个效果，关闭模糊，然后按照下方的参数进行设置：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34878.html
当然，你还可以调整参数让笔触出现在另外一边，如果你希望效果更明显一点，可以让参数大于1即可。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34878.html
20、四舍五入到最接近的整数
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34878.html
Round >> All（http://navo.top/R3uqYz） 是一个最近才出现的一个插件，当你在按照比例缩放（快捷键 k）某些组件的时候，最后会发现它的实际尺寸是小数而非整数，这个时候你需要做的，就是使用「cmd/ctrl + A」全选所有画板，然后运行 Round >> All 这个插件，就能让所有的组件参数四舍五入，确保像素完美。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34878.html