Figma，你都复制了些什么东西？

前端西瓜哥

发布于 2024-07-12 16:28:28

650

发布于 2024-07-12 16:28:28

文章被收录于专栏：前端西瓜哥的前端文章

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

有人问我要怎么解析在 Figma 编辑器中复制的图形数据。

我以前其实有想过解析复制的数据，只是没太大动机，后面也忘了。既然有人问，那我就顺手解析一下吧。

我发现数据格式果然也是 kiwi，和解析 fig 文件差不多，所以很简单就转换出了 JSON 数据。

我们来解读一下这些字段的含义 ，揭秘 Figma 都复制了什么东西出来。

figmeta

首先是 figmeta 对应的一段很短的 base64，这个直接调用 atob 方法转成 ASCII 编码就拿到了 JSON 字符串。

{
  "fileKey":"kf9BxqmUAS10JEJZ7Rne3R",
  "pasteID":1624241693,
  "dataType":"scene"
}

字段：

fileKey：图纸文件 id；
pasteID：标识复制数据的唯一 ID；
dataType：数据类型，这里的 "scene" 大概指的复制的是场景树中的图形。

这段简单的数据单独放出来，没太理解为什么。

猜测大概可以基于它们判断是否在当前图纸复制，直接使用内存中保存的另一份一样的数据，这样就不用做完整的反序列化了。

figma

再看看 figma 字段对应的 base64 解析后的结果。

clipboardSelectionRegions

选区信息。比如选中的图形有哪些。

"clipboardSelectionRegions": [
  {
    // 被选中图形的父节点，通常是个 Canvas
    "parent": {
      "sessionID": 0,
      "localID": 1
    },
    // 被选中图形 id
    "nodes": [
      {
        "sessionID": 4,
        "localID": 4
      },
      {
        "sessionID": 2,
        "localID": 2
      }
    ],
    // 图形是否有部分在 frame 外边
    "pasteIsPartiallyOutsideEnclosingFrame": false
  }
],

nodeChanges

被复制的图形数组，注意这里处了有被选中的图形，还有和选中图形有关联的图形，比如 frame 图形被选中，其子图形也要带上。

具体各种图形的属性，之前我已经有不少解读，这里不说了，具体看我的相关文章。

blobs

一些 nodeChanges 数组里一些图形，比如矢量网格、文字会将一些复杂的数据放在这里。放这里的原因是做懒解析，要用到再取。

isCut

是否是剪切（Ctrl + X 或 Command）产生的数据。

pasteEditorType

从哪种类型的编辑器中复制出来的。目前有 5 种：

"EditorType": {
  "DESIGN": 0, // Figma
  "WHITEBOARD": 1, // FigJam
  "SLIDES": 2, // 幻灯片
  "DEV_HANDOFF": 3,
  "SITES": 4
}

其它

type：信息类型，复制都是 "NODE_CHANGES"，表示会对图形树进行操作。
pastePageId：图形是从哪个 Page （指向一个 Canvas 图形）上复制出来的；
pasteFileKey：图纸文件 id；
pasteIsPartiallyOutsideEnclosingFrame：图形是否有部分在 frame 外边，这个在前面提到的 clipboardSelectionRegions 字段下也有一个，算是重复数据吧；
pasteID：标识复制数据的唯一 ID；
ackID：不知道干嘛的，大概和多人协同有关，复制的时候永远是 0。大概是必填项，所以给了个默认值；
sessionID：会话唯一标识，复制的时候也永远是 0；
publishedAssetGuids：已发布资源的 id 数组。这个也不知道是什么，一直都是空数组。