步入 Figma 世界之前

相信你也在日常工作或者生活中听到过不少人或在讨论或在使用 Figma 这个新型的设计工具，Figma 为什么会那么火？它比起以前听到的工具又有哪些不同？以设计师们将通过这个报告，从展示 Figma 与其他软件的不同之处开始逐步展示 Figma 在 UI 设计方面的强大之处。

用户界面（UI）设计工具变化飞快，从最开始的 Photoshop 到后面大火的 Sketch，再从 Sketch 到近些年不得不提的 Figma，这个过程中因为设计师需求的变化才导致了工具的变化。以前设计师们需要 Photoshop 是因为它方便做拟物化的设计，而 Sketch 取而代之的原因是扁平化的崛起，那么，现在 Figma 逐渐取代 Sketch 的原因又是什么呢？

设计师认为是因为 Figma 缩短了创意设计和开发实现之间的距离。 设计师的世界充满自由而创意的想法，而开发者的世界则包含清晰而严谨的代码。看起来截然相反的两种角色，要在同一刻一起协作，将想法落地变为现实。

Figma 一直以来在做的事情就是：「试图缩小这两者之间的距离」。Figma 的很多功能，比如「组件」的概念和「自动布局」这样的功能，在借鉴于开发实现的原理或习惯之上，又保持了对设计师的使用上的友好。在实际的协同过程中，如果能用好这些功能特性，不仅可以在设计时更加接近开发实现，也可以在终落地时更接近高保真的原型。

正如下图，重叠的部分是设计师和工程师共有的部分，当设计师们共有的信息越多，设计师们之间信息传达的损耗就越少，这样从设计到开发的成功也就更加还原设计。而通过 Figma 可以很好地帮设计师们拉近两个圆的距离，让彼此之间沟通更加紧密。

具体来说，Figma 通过 Frame、自动布局、组件等软件内具体的方法模拟代码实现，让你可以高效快捷地做出动态的、响应式、系统化的设计。如果这里看不懂没关系，设计师们将在这个专题中通过一个实际的播客项目 Bodcasts 案例，一步步向大家展示 Figma 这些功能和特点背后所隐藏的理念，帮助大家更好地在未来有需要的时候使用到这些功能，还能让你更好的理解到设计师们日常生活中的软件是怎么设计出来的。

磨刀不误砍柴工，在进入 Figma 的神奇世界之前，我们还可以简单了解一下 Figma 这个服务本身。

团队付费

Figma 有免费计划也有付费计划，Figma 的付费计划都是以团队为单位的，并不会跟随单个帐号。不过需要付费的是编辑者席位，查看者都是免费的。所以注册完成以后，设计师们还需要在 Figma 内创建团队，而团队又可以分为三种：

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

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

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

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

浏览器还是客户端？

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

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

字体设置

受限于浏览器，Web 端的 Figma 无法读取本地字体文件。所以如果你要在浏览器中使用并调用本地字体，还需要安装一个 Font installer。安装完成后，在个人设置（点右上角头像，下拉菜单中点击 Settings）弹窗中可以看到本地字体已经启用的提示。

Figma 的字体选择器很简陋，还不能根据字体名称搜索，所以输入中文搜不到，只能根据字体的 PostScript 名称搜索，在 macOS 中的字体册或是 Windows 下的字体设置中都可以查到每个字体对应的 PostScript 名称。

点击字体选择器右边的下拉箭头，会弹出字体选择列表，如设计师们需要找到思源黑体，可以直接按下 S，这个列表就会自动滚动到以 S 开头的字体这里，往下滚动找到 Source Han 就是思源黑体了。

色彩空间

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

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

Figma 有很多选项都可以自定义，这样每个人都可以更具自己的喜好设置出最适合自己的设置，但考虑到大家的基础各不相同，所以我打算在这里向大家详细讲解一下这些选项是什么以及应该怎么设置。

像素网格

当设计师们把画布放大到一定程度时，可以看到一个个像素网格，这里每一个网格的宽高都是 1px（像素），这方便设计师们通过对准网格进行微调。我的建议是默认开启，但是如果你认为这些网格会干扰你的视野，可以考虑把它关掉。具体方式如下：打开一个文件，点击右上角就会显示下拉菜单，点击里面的 Pixel grid（像素网格）即可将其关闭，再次点击即可重新开启，对应的快捷键是 cmd/ctrl+'。

像素对齐

默认情况下在画布中拖拽元素会对齐像素，也就是上面所说的网格，通过对齐网格可以避免设计稿中出现小数点，通常建议勾上此选项。

推移间距

所有的设计类工具都支持使用方向键移动元素，一般选中元素之后按一下方向键会移动一个像素，按下 Shift 键的同时按一下方向键会向该方向移动 10px。但在 UI 设计中，设计师们一般会使用 8px 或者 4px 作为基准尺寸来规范元素尺寸和间距；也就说，设计师们规定任何元素的尺寸或元素之间的间距都是 8 或者 4 的倍数，这主要是因为：

大部分屏幕尺寸都可以被 8 或 4 整除；
统一的间距比例可以保持设计一致性；

更多关于 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，就可以预览你的设计在非高清屏上的效果。