# 给设计师的使用指南

有问题可以先看文档，能解决绝大部分问题，解决不了可以通过以下方式联系我：

在发邮件或者提 issue 时请详细描述问题，包括：设置项是什么样的，电脑系统配置如何，Figma 版本（如果使用 Web 就是浏览器版本）。此外，你还可以把出问题的设计稿复制为一个新文件，并邀请我（[email protected]）为编辑者，在设计稿中注明出问题的部分。参考下面的邮件：

# 导出时卡在那不动了

导出时卡住的原因有很多，主要由以下三种情况：

  • 整个文件太大图层太多了
  • 选中导出的太多了
  • 有带 SVG export 的图层不在可视区域内

针对每种情况解决办法如下：

  • 合理按照模块拆分文件
    一个文件内东西太多会消耗很大的电脑性能，导出时就有可能会卡住。很多设计师喜欢往一个文件里塞很多东西，这是一个很不好的习惯。 你可以在 Figma 中按 Cmd P 并输入 resource use，看一下画布左上角显示的图层数量（下图中是 9250），一般超过 50000 就需要考虑拆分了。一般可以按照一个文件放一个版本，一个页面（page）放一个模块来拆分，投资时不能把所有鸡蛋都放在一个篮子里，设计时也是。
  • 每次选少一些，尝试分模块导出
    选得越多处理所需时间就越长，所以如果你选择了很多要么多等一会要么就选少一点。
  • 这是 Figma 的一个 bug，临时解决办法是把不在可视区域内图层的 export 属性去掉
    如下图，在这个 Frame 里面有一个矩形，因为这个 Frame 设置了 Clip content （裁切内容）所以矩形不在可视区域内，但是它又有一个 SVG export，就会导致导出失败。你可以自己试验一下，在 Figma 中直接导出也会提示 export failed。如果将右侧的 SVG export 去掉，就没问题了。

# 多层级页面是什么意思？

Figma 不支持多层级页面，左侧只支持「Page->Frame」的层级。但是对于一些人来说，尤其是交互和产品，页面的层级可以更清晰地描述一个产品的结构。因此，我在这里增加了一个多层级页面功能，当你的 Frame 标题里面含有斜线 / 时，就会被自动组织为多层级结构。比如，当你的文件中有如下 Frame 时，就会被转换为下面的结构。

  • List
  • List / PRD
  • List / PRD / 字段说明
  • List / Motion
List
│   PRD
└───PRD
│   │   字段说明
└───Motion

多层级页面

# 为什么我选了 @2x 标注变成一半了？

Handoff 支持在设置中选择平台像素密度，需要注意的是在平台为 Web 时选择的是「倍数」，平台为 iOS 和 Android 时选择的才是「像素密度」，它们是有区别的。

  • 在 Web 平台下选的是倍数，最终的标注数值会乘以这个倍数
  • iOS 和 Android 下选择的是你设计稿的像素密度，最终的标注数值会除以一个数。

Heron Handoff 设置

这是很多设计师都容易混淆的地方。这个故事说来话长，首先我们要明白手机或电脑的屏幕是用一个个微小的方块组成的，类似于像素画。早期受限于屏幕技术，一个物理方块代表设计图中的一个像素，后来随着屏幕技术的进步，为了获得更好的显示效果，苹果推出了搭载 Retina 屏幕的 iPhone 4，它使用四个物理方块来显示设计图中的一个像素。

图自维基百科-w935

这时候，其「像素密度」就是 @2x，设计图的尺寸也就需要变为 2 倍，比如之前使用 375 的宽度设计，现在则需要使用 750 的宽度。后来，随着屏幕技术进化，又出现了「像素密度」为 @3x，也就是九个物理方块来代表设计图中的一个像素。随着屏幕的种类越来越多，设计师就需要为不同「像素密度」的设备分别设计一套图，这得多累啊。

所以，后来 iOS 和 Android 分别有了 pt 和 dp 的虚拟单位，在你的设计中 10×10px 宽的元素在代码中被写为 10pt 或 10dp，而设备会自动根据屏幕的像素密度来解析，比如在 @2x 屏幕上用 20×20 个物理方框来显示它。

所以，这里的设置其实是为了解决历史遗留问题，如果你有一些设计图还是二倍图或三倍图，就可以用这个把它转化为 pt/dp 所需要的数值。所以这里当你选择了 @2x 它会把你的设计尺寸除以 2。不过现在都 2020 年了，建议大家都使用一倍图做设计。

Zeplin 的像素密度设置

对于 Web，你写的单位 px 会被浏览器自动解析为对应的物理方块尺寸大小，它是屏幕像素密度无关的。在设置这里设置的也是「倍数」，也就是和 iOS、Android 反过来，选择了 2x 时会把你的设计尺寸乘以 2。这个其实没什么用，也就是在写小程序转换为 rpx 时有点用，不过有很多库可以把 px 转为 rpx 单位，比如 px2rpx (opens new window)，所以也建议你使用一倍图做设计。

希望这个设置在以后可以被丢弃进历史长河中，更多细节可以查看像素密度解密 (opens new window)，以及这个视频 (opens new window)。

# 为什么我的标注错位了？

如果你生成的标注错位了，可能有以下两个原因：

  • 元素水平/垂直翻转过
  • 最外层 Frame （画板）没有勾选裁切内容选项（Clip content）

第一种情况是一个 bug，我会在后续的版本中修复它；第二种情况很好解决，请给每一个画板 Frame 勾选「clip content」，勾选之后可以隐藏超出的部分。

如下图，尽量不要出现左边这样内容超出 Frame 的现象，而右图最外层 Frame 本身带有投影什么的则没有关系。

clip content

# 切图如何导出？

切图这件事，我建议还是设计师自己来。在 Figma 右侧面板中有一个 Export 属性，你可以在那里添加 Export，每一个都会被 Handoff 识别到并按照你的设置导出。比如，按照下图中的设置会导出 [email protected] 和 thumb-up.svg（该图标命名为 thumb-up）。

Export 设置

如果你想要快速给元素添加多个导出设置，比如 iOS 的 @1x/@2x/@3x/@4x，可以使用一些插件批量添加，比如这个 Figgy exporter (opens new window)。

需要注意的是，Handoff 不会识别 Slice，Slice 可能是 Figma 为了兼容 Sketch 用户而做的，不太好用，所以还是建议使用 Export。

对于设计师特别烦的开发查看标注时总是会点到切图内部的问题，最近的一个更新可以设置不允许点到切图内部，在后文开发人员部分会详细说。

# 为啥我的网页上的切图没有下载按钮？

导出的压缩包解压后，在里面找 data/exports 文件夹，里面就是所有的切图，直接从里面拷贝就行了，不需要下载。如果你想要下载功能，参考这篇文章 (opens new window)把你的标注文件托管在服务器上。

切图所在文件夹

# 如何导出样式及组件？

Handoff 会自动识别当前文件（跨文件的还不支持）中所有的样式，显示在右侧，而组件可以在导出时选择是否导出组件列表。如果选择导出，就会生成一个组件列表在左侧。我建议在设计时把样式和组件单独放在某一个 page 内，这样就不需要单独导出组件列表了。

单独的组件和样式 page

目前，Handoff 还只能识别到当前文件内的样式和组件，如果你的样式和组件在另外的文件内，则需要单独将这个文件导出，目前还没有办法关联。

# 其它

Handoff 目前只会识别到第一层 Frame，也就是直接处于画布中的 Frame，因此在设计时请保持 Frame 都是直接处于画布中。

识别不到的 Frame

还有一个需要注意的，那就是有些设计师的元素只是看起来在 Frame 内部，实际上不在里面，这样识别出来的页面就是空白的。比如下图中，那些元素只是看起来在 home 这个 Frame 里面，实际上和它是同级的，需要拖拽到它的子级中。

看起来在 Frame 里面

← 给工程师的使用指南 →