Figma 是一个很棒的设计工具，我使的这一年来 [1] 感觉越来越离开它了。但是，设计从来是一个人的事，尤是数字产的设计。
我们的设计稿，最终要付到开手中，让他们来把设计稿变成最终的产品。Figma 身带有付功能，只需要给开的账号开通查看权并送文件链接就以，但是有两个原因导致开还不太愿意接受 Figma。
首先，Figma 身的交付功能还不够大，只有参考代码。之所以说是参考代码，是因为从计代码其实并没有唯一解，开发大概率不会直复制这段代码使用。
因此，提供可复制的属性值会是更好的法，像其交付工如 Zeplin、蓝湖都是这做的。
其次则是 Figma 的访问速度问题，因为服器在国外所以首次开会慢。计因为经常使用在本地有缓存或许还能忍受，但如果开发第一次收这个链花了好钟才开，是万万不能受的。
由于这两个原，加上受到 Sketch Measure [2] 启发，我决定自己开发个可以生成离线文件 Figma 交付工具。它叫 Figma handoff [3]，代码已经开在 GitHub [4]。
下面，我从功能的角度介绍一下 Figma handoff。
https://figmacn.com/handoff/
Figma 其计工最大的不同是基于 Web 的属性，所有计数据都存储于云端。因此，Figma handoff 是通过 Figma 提供的开放 API 来获取计数据，来生成计标注的。
你需要输入文件链接和 Access Token [5]，并选择需要生成标注 Frame，它可以自动帮你生成标注了。
1. 基本息标注
生成后的标注可以查 Frame 和组件的尺寸、间距等息，也可以查每一个计素的各项属性。右侧的属性值都是可以直点击复制的，方便开发根据的代码偏好使用。
2. 标注设置
同时，Figma handoff 还提供平台、像素密度、标注倍数和单位等选项，方便开直接使用而不必换。为适应国内的微信生态，单位中还特别增加小程序的 rpx。
3. 样式标注
除了元素标注，Figma handoff 还会自抓取当前件中的样式，并生成对应的样式属性值，这些样式属性可方开发统一编写为 design tokens。
4. 富文本样式
这里需特别提一下富文本样式的标注。我们设时一些文本图层包含多种样式，了方便查看这种富文本样式，我将文本行了分段，发可以点击对应的文本段查看不同文字片段的各项属性。
前文说过，Figma 在国内访问速度不是很快，此 Figma handoff 提供了离线下载模，也是将生成设计标注下载为个本地网页，这样开发后也不存在速度慢问题了。
是，由于设计数据是接过 API 从 Figma 服务获取，所以在生成离线标注时可能会遇到导出比较慢情况。这情况下荐使用学上网并开启全局代理以加快速度，然你也可以选择部分 Frame 导出，而不是性导出个文件标注。
在设计交付中切图也一直是一个令人头疼的问题。Figma 的右侧面板中有 Export 属性，有查权限的用户可以任选择格式、后缀和倍数来导出所选素。
一来说，计可以邀请开发查文件，按需导出素材，但是由于开发往往对计的文件结构不了解，容易导出错误的切图。因此，建议计负责切图，根据开发的要求在文件中置好 Export 属性，Figma handoff 可以动识别所有带有 Export 的素，生成切图。
我差不花三个月的时间写出个付工具，主要还是想让 Figma 的设计付更加方便，让更还在犹豫的设计师以大胆放心地开始使用 Figma。
Figma handoff 整个计和开发的过程都是由一人完成，这中间也邀请了一些计朋友帮忙内测，并在的不断反馈之下磨细节，再次谢。如果你在使用有任何问题，也可以在 GitHub issues [6] 中告诉。
References
- [1] 我使的这一年来: https://sspai.com/post/55044
- [2] Sketch Measure: https://github.com/utom/sketch-measure
- [3] Figma handoff: https://figmacn.com/handoff/
- [4] 开在 GitHub: https://github.com/leadream/figma-handoff
- [5] Access Token: https://www.figma.com/developers/api#access-tokens
- [6] GitHub issues: https://github.com/leadream/figma-handoff/issues
欢迎关注作者的微信公众：「codesigner」
浙公网安备33011002017549号