大家好，我是前端西瓜哥。

上周图形编辑器交流群里有人问，对于 Figma 导出的 fig 文件，该如何解析其格式，拿到可读数据。

经过群友的一番讨论，这个问题最后算是解决了。

fig 文件

导出 Figma 的设计文件，我们会得到一个 fig 文件。

fig 是一种二进制的格式。

它没有使用 XML 或是 JSON 的格式，而是选择使用了 Figma 自己实现的特殊编码工具进行了序列化编码，并做了封装，最后得到一个二进制文件。

二进制相比明文格式（JSON 和 XML），优点有：

• 体积更小，因为数据更紧凑；
• 解析速度快，像是 JSON 这种，要逐个字符解析然后构建 AST，考虑转义、空格等特殊情况，对于大文件，解析效率很差；
• 高保真，比如一些类型明文格式其实是不好表达的，需要多做一层转换（比如 Float32Array 类型，要保存为字符串就要转为普通数组）；
• 安全性。因为编码规则是应用自己实现的，此外方便做加密（比如异或加密）。编码和解码的规则我们是无法知道的，除非它主动公布出来，否则只能尝试去做逆向。

先用 Figma 随便画几个基本图形。

然后导出 fig 文件，拿到了一个名为 fig-file.fig 的文件。

先用 vscode 打开看看。

不是文本文件，应该就是二进制文件了。

不管怎样，强行用文本格式打开。

PK 打头，应该就是 ZIP 格式文件头的标识。

顺便再查看一下这个文件的二进制内容，看到开头这个 50 4B 03 04，说明确确实实是个 ZIP 文件。

基本上很多应用的导出文件都选择 ZIP 格式，然后再把后缀名改成自己定义的，比如 fig、xmind。

使用 ZIP 格式有以下好处：

• 进行了文件压缩，体积更小，并且是单文件；
• 保留了目录结构；
• 跨平台，基本所有主流操作系统都支持 ZIP。虽然用户一般来说并不会手动解压它，但用户安装的应用程序能直接使用操作系统的底层 API 去解压，有助于减少应用程序包体积；

解压一下。

unzip fig-file.fig