大家好，我是前端西瓜哥。
上周图形编辑器交流群里有人问，对于 Figma 导出的 fig 文件，该如何解析其格式，拿到可读数据。
经过群友的一番讨论，这个问题最后算是解决了。
导出 Figma 的设计文件，我们会得到一个 fig 文件。
fig 是一种二进制的格式。
它没有使用 XML 或是 JSON 的格式，而是选择使用了 Figma 自己实现的特殊编码工具进行了序列化编码，并做了封装，最后得到一个二进制文件。
二进制相比明文格式（JSON 和 XML），优点有：
先用 Figma 随便画几个基本图形。
然后导出 fig 文件，拿到了一个名为 fig-file.fig 的文件。
先用 vscode 打开看看。
不是文本文件，应该就是二进制文件了。
不管怎样，强行用文本格式打开。
PK 打头，应该就是 ZIP 格式文件头的标识。
顺便再查看一下这个文件的二进制内容，看到开头这个 50 4B 03 04，说明确确实实是个 ZIP 文件。
基本上很多应用的导出文件都选择 ZIP 格式，然后再把后缀名改成自己定义的，比如 fig、xmind。
使用 ZIP 格式有以下好处：
解压一下。
unzip fig-file.fig解压后的内容为：
.├── canvas.fig├── fig-file.fig # 这个是压缩源文件├── images│ └── 0b15125516ae308a2d819f2970e851c0402949d2├── meta.json└── thumbnail.png需要注意的是，解压出来的内容，并没有一个根文件夹存放这些内容。
但如果你用可视化界面去解压，通常会解压出一个文件夹，这个文件夹和压缩包同名。
这个其实是操作系统的额外操作，目的是防止解压出大量文件和当前文件夹的其他文件混在一起了，可能还会有文件同名的问题。
canvas.fig 是真正的 Figma 数据内容，记录图形树中图形的关系，以及图形的属性。
images 文件夹，存放的是图片，给里面的文件加上 .png 后缀可查看图片。
meta.json 是一些图纸的基本信息，比如导出的客户端使用的背景色，文件名等。
thumbnail.png 是预览图图片，如果你装了 figma 桌面端，则在会从 fig 提取出这个图片给文件预览器预览。
等下，不对，canvas.fig？怎么又是 fig 文件，这是在玩套娃？
经识别，也是个二进制文件，但它的文件格式却是。。。fig-kiwi？
这个叫做 Kiwi 的特殊格式被 Figma 的前 CTO，Evan Wallace 开源了。
https://github.com/evanw/kiwi。
Kiwi 是一种基于 Schecha 的二进制格式，用于高效地对树形数据结构进行编码。
它受到 Google 的 Protoclol Buffer 格式的启发，但更简单，编码更紧凑，且对自定义字段有更好的支持。
Kiwi 库提供了工具，能够解析二进制文件转换为编程语言中的对象，目前支持 JavaScript (TypeScript)、C++、Rust、Skew。
但要提供一个 Schecha，来进行类型的映射。
好在这个 Schecha 有保存在 fig 文件里的。
实际上这个 canvas.fig 文件并不是 Kiwi，它是一个复合产物。
首先开头的 fig-kiwi 字符串是一个注释，表示它是一个 fig 文件（毕竟前面也看到了，fig 文件可能也是 ZIP），并使用了 kiwi 进行编码。
文件里有 Kiwi 的二进制数据部分，也有 Schecha 部分，需要把它们提取出来。
这里要做 切片 了。
有个开源项目 Figma-To-JSON 成功解析了 fig，我们看看它怎么做的。
看了下，貌似是切在 50 89 这个地方，切好几刀，得到一些切片。我们需要前两个切片。
第一个切片是 Schecha，第二个是 Kiwi 数据。
每个切片都是 ZIP 压缩的，需要先给它们解压，然后再做 Kiwi 解码。
import { ByteBuffer, compileSchema, decodeBinarySchema } from "kiwi-schema"export const figToJson = (fileBuffer: Buffer | ArrayBuffer): object => { // 提取 fig 文件的 schema 和 kiwi 格式数据 const [schemaByte, dataByte] = figToBinaryParts(fileBuffer) const schemaBB = new ByteBuffer(schemaByte) const schema = decodeBinarySchema(schemaBB) const dataBB = new ByteBuffer(dataByte) const schemaHelper = compileSchema(schema) // 这个 json 对象就是最终结果了 const json = schemaHelper[`decodeMessage`](dataBB) return convertBlobsToBase64(json)}流程总结一下，大致如下：
上面都是在说解码 fig 文件的过程。
如果你只是想要得到 fig 的结构，对过程不感兴趣，可以直接用一个名为 Figma-To-JSON 的开源项目去解析。
https://github.com/yagudaev/figma-to-json。
下面是转换结果，是一个一维数组，风格类似 quill 的 delta。
每个节点保存有父节点的 id，可以关联构建出一棵图形树。
拿到 fig 数据格式有什么好处呢？
首先如果你开发自己的图形编辑器，或者直接就是 Figma 的竞品，你是要设计数据结构的，那 fig 数据格式就有很好的参考价值。
然后就是做二次开发，写一些工具做一些离线的批处理操作，比如提取 fig 的一些文本数据转换为 excal 之类的奇怪操作。
这样你就不用联网打开 Figma 网站，使用插件去进行这些操作。
Figma 的 fig 格式算是半公开的，在网上找找能找到不少蛛丝马迹。因为 Figma 还是比较开放的，使用的 Kiwi 编码格式也公开了。
但 Figma 不会主动提供在客户端转换 fig 的方式（但可以使用开发者 API 请求服务端数据），因为这 和它所希望的生态稳定相悖。
如果 Figma 主动提供 fig 的内部格式出来，那它就要对这个格式负责，且 Figma 在开发新的功能时，fig 文件在未来发展中结构大概率会有破坏性改变的。
当然如果你想和 Photopea 一样，尝试去解析它转换成的结构，那也是可以的，但你自己要对这个数据结构负责。
本文链接：http://www.28at.com/showinfo-26-66960-0.html什么？Figma 的 Fig 文件格式居然解析出来了
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
Copyright © 2016-2023 天津谷骐科技有限公司 版权所有 sitemap.xml
违法及侵权请联系：2376512515@qq.com 津ICP备18001702号
津公网安备 12010102000574号
