准备工作

磨刀不误砍柴工，在进入 Figma 的神奇世界之前，让我们先做好准备工作。

团队付费

Figma 有免费计划也有付费计划。需要注意的是，Figma 的付费都是以团队为单位的，并不会跟随帐号。同时还需要注意，需要付费的是编辑者席位，查看者都是免费的。在 Figma 内设计我们需要创建团队，而团队可以分为三种：

基础版（Starter）：免费，但是有一些文件和项目数量限制。
专业版（Professional）：$15/编辑者/月（$144/编辑者/年）。
组织版（Organization）：$45/编辑者/月，提供更多针对企业的特性。

一个帐号可以同时身处多个团队，但是你在每一个团队内的付费都是独立的。比如，你自己创建了一个基础版团队，同时作为编辑者加入了 A 和 B 专业版团队，还作为查看者加入了 C 专业版团队，那么只有你在 A、B 团队内的席位需要付费，也就是 $30/月。

具体的关于团队付费的细节参见下图：

一般来说，在我们最开始熟悉 Figma 时直接创建基础版团队就可以了，当真的需要 Figma 工作时再考虑购买专业版。而组织版，根据我的体验相当于是多个专业版团队的组合，如果协作的设计师和文件不是特别多则不需要考虑。

浏览器还是客户端？

Figma 是基于 Web 的，但同时也提供了客户端。Web 端可以随时访问，胜在方便，但客户端做了更多使用体验和性能上的优化。正式工作中推荐使用客户端，你可以前往下载页面下载对应操作系统的去安装。

如果你想任何文件链接都用客户端打开，可以在浏览器中（客户端中无此菜单）打开任意文件，从左上角的下拉菜单中依次选择 Preferences → Open links in desktop app （偏好 → 在客户端中打开所有链接）。

字体设置

受限于浏览器，Web 端的 Figma 无法读取本地字体文件。所以如果你要在浏览器中使用并调用本地字体，还需要安装一个 Font installer。

安装完成后，在个人设置（点右上角头像，下拉菜单中点击 Settings）弹窗中可以看到本地字体已经启用的提示。

这里需要注意的是，Figma 的字体选择器很简陋，还不能根据字体名称搜索，所以输入中文搜不到，只能根据字体的 PostScript 名称搜索（在字体册中可以查到）。

点击字体选择器右边的下拉箭头，会弹出字体选择列表，由于字体太多很不容易找，好在这里支持字母索引。比如我们需要找到思源黑体，可以直接按下 S，这个列表就会自动滚动到以 S 开头的字体这里，往下滚动一下就能很快找到了。

色彩空间

色彩空间指的是不同系统或软件对于色彩模式的实施方式，它影响着颜色的显示效果。Figma 只支持 sRGB 模式的导出，浏览器默认就是该模式，所以不需要修改。而客户端默认是 unmanaged（未管理的），这可能会导致你的设计在不同的显示器上显示不一致，所以需要手动改为 sRGB 模式。我们点击顶部菜单栏的 Figma → Color Space 就可以将其切换为 sRGB，切换后需要重启一下客户端才会生效。

像素网格、像素对齐、推移间距

Figma 有很多选项都可以自定义，如果我们事先根据自己的喜好设置好，在设计时就会更加得心应手。

像素网格

当我们把画布放大到一定程度时，可以看到一个个像素网格（每个宽高都是 1px），这方便我们进行微调。一般默认开启，但是如果你认为这些网格会干扰你的设计，可以把它关掉。打开一个文件，点击右上角就会显示下拉菜单，点击里面的 Pixel grid（像素网格）即可将其关闭，再次点击重新开启。当然，你也可以使用快捷键 Cmd '。

像素对齐

默认情况下在画布中拖拽元素会对齐像素，也就是上面所说的网格，这样我们的设计稿中就不会出现小数了，建议勾上此选项。

推移间距

设计工具都支持使用方向键移动元素，一般选中元素之后按一下方向键会移动一个像素，按下 Shift ⇧ 键的同时按一下方向键会移动 10px。在 UI 设计中，我们一般使用 8px 作为基准尺寸单位，来规范元素尺寸和间距。简单来说就是，我们规定任何元素的尺寸或元素之间的间距都是 8 的倍数（比较小的元素是 4 的倍数），这样设计有如下好处：

大部分屏幕尺寸都可以被 8 或 4 整除；
统一的节奏可以保持设计一致性；
减少不必要的沟通，告诉开发你的设计一般都是 4 的倍数，那么当他在设计标注中看到了一个 17px 的值，就会自我纠正为 16px。

更多关于 8px 网格的说明可以查看文末链接。现在，为了提升效率，我们可以把 Figma 的方向键推移距离设定为 8px。如下图，从左上角的下拉菜单依次进入 Preferences → Nudge amount，在弹出的窗口中把 Big nudge 改为 8，Small nudge 不变，也就是说当我们按一下方向键元素仍然移动 1px，但是按下 Shift ⇧ 加方向键元素会移动 8px。

使用几倍图设计？

使用几倍图设计也是一个很常见的问题，在回答之前，让我们先了解一下为什么会有「多倍图」这个概念，这还得从很久之前说起。我们可以简单理解屏幕显示的原理为像素画，显示设备用一个个的方格像素来组成图像。早期的设备一般都是用一个方格显示一个图像像素，所以，当我们凑近屏幕的时候可以看到一个个方格。那个时候设计图上一个像素对应着屏幕上的一个像素（px，我们称之为设备像素或物理像素），还很容易理解。

直到 2010 年，携带 Retina （视网膜）屏幕的 iPhone 4 发布。iPhone 4 的屏幕使用四个网格显示一个设计像素，让显示效果变得更高清，肉眼几乎看不到像素网格，但设计师的工作却变得复杂了。为了让设计图上的一个像素对应设备上的一个像素，设计师必须设计两倍的图，来适应这种变化，不然你的设计在 Retina 屏幕上就会变得模糊。

后来，随着技术发展事情变得越来越复杂，3 倍屏甚至 4 倍屏都出现了，设计师必须为每一种屏幕单独设计一份。不过，好在苹果这些系统厂商也发现了这个问题，于是，苹果推出了一个全新的单位 pt （Point，点），它是一个设备无关的逻辑像素单位。设计师不需要关心屏幕是几倍的了，所有的设计都使用一倍图设计，设备自己会适配。比如，设计稿中的 1pt，非视网膜屏会使用一个网格来渲染，但是两倍视网膜屏会使用四个网格来渲染。

Android 也推出了自己的逻辑像素单位 dp，Web 上虽然仍然使用 px，但其实它也是一个逻辑像素单位，和我们所说的设备上的网格像素是不一样的。虽然有了新的设备无关单位，但还有大量的多倍图设计稿不可能都重新做，以及一些老的系统可能不支持新的单位，所以很多设计标注工具提供了像素密度转换功能，比如 Zeplin 可以把二倍图转为一倍的。

不过随着旧设备的逐步淘汰，现在我们几乎不需要这么做了，直接使用一倍图进行设计就可以了。 需要注意的是，Figma 中的单位是 px，但这个 px 也不是设备的物理像素，而是一个逻辑像素单位。我们还可以通过 Figma 的像素预览功能预览设计在不同分辨率设备上的效果。如下图，点击右上角的下拉菜单，依次选择 Pixel preview → 1x，就可以预览你的设计在非高清屏上的效果。

最后

在下一节，先不着急去 Figma 中开始设计，让我们一起了解一下 Figma 的基本理念，这样有利于更好地理解后面的章节。

参考链接：