本文将带你近距离了解Figma的用途，并提供给你20个实用技巧，让你更快更好的使用这个著名的协作交互设计工具进行工作。
关于快捷键的一点说明
本文中大多数快捷键都提供Windows和Mac两个版本，Windows上的Ctrl键对应Mac上的Cmd键，Alt键在Windows和Mac上（Option/Alt）通用。
例如：Ctrl/Cmd + Alt + C 对应 Windows上的 Ctrl + Alt + C 以及Mac上的 Cmd + Alt/Option + C。
1. 如何同时导入多张图片
我们做设计的时候无时无刻不在使用图片，如果我们能够更轻松、更直接地改变单个和多个图像，那将非常有用。
Figma可以导入多张图片（使用快捷键 Ctrl/Cmd + Shift + K），并将其一一对应到你希望它们出现的图层（对象）上。这个功能非常方便，你可以看到导入的图像然后进行实时放置。
[图片上传失败...(image-2c49fe-1568608600577)]
2. 批量重命名
很多时候，我们在准备导出设计（如icon或者一组图片）的时候，或是当我们对设计文件需要执行“深度整理”的时候，都需要重命名一组图层。
Figma可以让你批量重命名图层（以及frame），这个功能非常方便。你可以重命名整个图层的名字，也可以只是图层名字中的一部分。你也可以查找重命名一个图层的某个字符，添加不同的数字到图层以方便导出到独立的文件。你也可以通过在“Match”字段里面输入关键字后执行查找替换。
[图片上传失败...(image-17f202-1568608600577)]
3. 在Frame名字中使用Emoji表情符号显示当前工作状态
在设计团队中使用Figma会让工作更加具有协作性。但是通常需要在同一个设计文件上进行工作，而且有时还是同时展开的。
为了知道哪个Frame正在工作中，以及哪个已经完成了，我们可以添加emoji表情符号（Windows快捷键: win + . 或者 win + ;，Mac快捷键：Cmd + Ctrl + space）在frame名称的前面，这样，每一个人就可以知道当前frame的工作状态了。
[图片上传失败...(image-915a3d-1568608600577)]
4. 重组物件
Figma最伟大的功能之一就是可以在Frame中重组物件。特别是在使用icon，列表以及标签组的时候非常有用。
[图片上传失败...(image-acf8dd-1568608600577)]
使用合适的名称组织你的样式（文本，颜色，效果等）
本地样式（Local Styles）是Figma最棒的功能之一。它可以让你创建设计系统（design system）以方便你重复使用组件。如果你修改了母版样式，它将同时改变所有相关联的组件。非常强大，对不？但是，如果没有使用正确的方式进行命名和分组，那么你将丢失所有的样式。下面将分享几个组织样式的实用技巧。
5. 文本样式命名
你可以通过添加“/”在子分类来组织你的文本样式。例如，在“Heading”后面加上“/”，这样所有的标题文本都将在“Heading”这个分类下面了。这对于有很多不同尺寸字体的情况非常有用，可以让你更快定位到指定的文本。这个方法对于“文本”和“颜色”都适用。
[图片上传失败...(image-37e624-1568608600577)]
6. 对每一个样式添加描述作为导览
对在什么地方使用不同的组件及如何使用这些组件的样式添加快速说明是非常有用的，特别是当你与团队或者其他设计师共同协作的时候。你可以在编辑文本样式，颜色样式或其他组件的同时添加说明文字。
Figma中的样式说明
7. 如何从侧栏切换实例
很多时候我们会遇到大量的组件，图标等。而通过使用下拉菜单切换实例并不是最好的做法。这里有个小技巧，就是你可以按住 Alt + Ctrl/Cmd 键从侧栏拖动组件到你想要替换的组件上。简单，快速！
[图片上传失败...(image-b5c7ad-1568608600577)]
8. 如何拷贝/粘贴所有的属性
当复制一个元素或拷贝一个元素样式的时候，可以快速拷贝元素属性（Ctrl/Cmd + Alt + C），然后粘贴（Ctrl/Cmd + V）到一个新的元素上。对于具有多属性的图像或者样式元素，这个功能非常有用，例如：填充或者描边等。
[图片上传失败...(image-c23b37-1568608600577)]
9. 如何拷贝/粘贴单一属性
另外一个有用的快捷方式就是拷贝单一属性，也就是说你可以选择拷贝哪个属性。从右侧面板选择属性，然后使用快捷键 Ctrl/Cmd + C 复制，再用 Ctrl/Cmd + V 进行粘贴到另外一个对象上。
[图片上传失败...(image-bdb085-1568608600577)]
10. 搜索具有相同属性、实例、样式等等的元素
当你的设计文件非常复杂，或者你想清理你的设计系统，搜索相同的属性（例如一个特定的颜色），然后修改颜色样式中的颜色这个功能将会非常有用。特别是你正在处理设计系统并且需要更好的组织所有的组件的时候，这个功能异常实用。
[图片上传失败...(image-731ff4-1568608600577)]
11. 使用缩放工具调整对象尺寸和它们的属性
缩放元素以及它们的属性（描边，对象上的效果等）是非常有用的。在这一点上，Figma要比Sketch使用起来更简单，因为你无需选择对象的尺寸。当你缩放对象的时候，对象的尺寸和它的属性都将按比例调整大小。通过按住Shift键，你可以在放大或缩小物体的同时保持比例。
提示：如果你只想改变对象的尺寸而不修改它的属性（描边，效果等），使用“Select”工具选择对象，然后使用属性面板进行尺寸修改。如果你使用缩放工具并且调整对象的尺寸，那么对象的尺寸和属性都会发生变化。
[图片上传失败...(image-d8cc74-1568608600577)]
12. 调整Frame的尺寸而不调整其内部的图层尺寸
当为不同的屏幕分辨率进行设计的时候，你希望调整的是屏幕frame的尺寸而不调整其内部frame所有元素的尺寸。为了实现这个，当你执行调整尺寸操作的时候需要按住 Ctrl/Cmd 键。奇迹出现啦！
[图片上传失败...(image-1146b9-1568608600577)]
13. 快速创建图表/弧形
使用Figma，你可以快速创建图表/弧形。无需在圆弧上剪裁路径来创建自定义的图形。看看下图如何创建一个加载圆弧，并且所有的数值都可以通过右侧的属性面板进行精确的控制。
Figma中的图表工具
14. 随时改变边距
Figma中改变群组元素边距的功能很实用。它让你在屏幕上布置一组元素变得垂手可得。该功能不仅适用于多个元素，同时也适用于单个元素。
在Figma中改变边距
15. 组件的关键字搜索功能
当你开始着手大量组件的时候，在你的库中查找指定的组件有时会变的非常困难。而组件关键字（component keywords）功能让搜索变得容易起来。你可以对任何组件添加关键字，即使和组件的名字不同也可以，这些关键字让你查找组件更加容易。看下图的示例：
Figma中组件的关键字功能
16. 还原较早的设计文件版本，或分享较早版本的链接
能够回到文件的之前版本这一功能非常让人欣喜。
无论出于什么原因（你犯了一个错误，或者客户需要你切换回较早的版本等。），能够返回较早的版本这一功能都非常有用。不仅如此，Figma还允许你拷贝较早版本的链接，这样你就不必删除文件的近期版本了。非常聪明！
[图片上传失败...(image-f59769-1568608600577)]
17. 使用UI套件库开始新的项目
通常需要使用UI套件库来开始新的项目。例如，当设计一些线框模型的时候会使用Wireframy套件。你只要激活该库就可以使用了。另外，Bootstrap Grid 和 Figma Redlines 也是会经常用到的套件。你可以在这里找到很多免费的资源供你使用。
[图片上传失败...(image-6bd3d2-1568608600577)]
18. 在原型中使用GIF
Figma刚刚增加了将GIF文件添加到原型的功能，从而增加了在原型中添加用户交互动画的可能性。以下是Aris Acoba的预览：
[图片上传失败...(image-dc3953-1568608600577)]
19. Figma的整理功能
Figma的整理功能（Tidy Up）非常实用，特别是当你需要快速重排网格中的元素或者将元素对齐的时候。结合第4条和第14条提到的实用技巧，该功能变得非常强大。此外，另一个执行整理的方式就是鼠标悬浮在所选元素的右下角，然后点击蓝色的图标。
[图片上传失败...(image-e269d5-1568608600577)]
20. 查看设置
Figma的查看功能也非常实用，虽然它比较难找到在哪里。在窗口右上角的设置（Settings）的下拉菜单中，你可以看到工作区域的设置。不仅可以显示标尺（Rulers），网格（Grid），启用/停用与网格对齐（Snap to Pixel Grid），而且当你需要专注不想被其他设计师干扰的时候，还可以隐藏其他参与者的光标。
[图片上传失败...(image-777ec-1568608600577)]
21. 额外提示：Figma插件
Figma最近发布了它全新的插件功能 ，允许人们为他们的工作流程创建自定义的插件扩展。
插件对于整个Figma的生态系统来说意义非凡，并且可以提升工作流程 ，下面推荐几个常用的插件：
- Content Reel
- Unsplash
- Stark
- Image Palette
- Google Sheet sync
[图片上传失败...(image-81ad97-1568608600577)]
英文原文：地址
原文作者：Philippe Hong
编译作者：@iris0327
以上译文仅代表原作者观点。如需转载请遵循CC版权协议正确标明出处。
[图片上传失败...(image-9ae8da-1568608600577)]
网友评论