Figma 批量备份源文件

tags
Design
Tool
Works
date
Aug 3, 2022

使用方法

需要基础的编程能力。
先获取以下信息
  • Figma API Token
  • Figma 团队 ID
  • 浏览器中（推荐 Chrome），Figma 界面 UI 元素的坐标（运行脚本时可获取）
准备工作
  • 准备一台闲置的电脑（备份期间不能进行其他操作）
  • 在浏览器中：设置浏览器下载文件时，不询问保存路径（否则会打断机器人的点击操作）
  • 在备份脚本中：设置源文件的备份路径（已在路径下的文件会忽略，不进行备份）
➡️ 项目地址：https://github.com/draJiang/Figma-backup

背景

今年 3 月，大疆、华为等企业位于美国发布的制裁名单中，导致 FIgma 限制了这些企业的使用。
今年 6 月，Figma 服务器发生故障，影响持续了数小时。
notion image
这些事件导致 Figma 文件的备份进入了人们的视野。

行动

首先，Figma 的数据分为两种类型，我们要备份的就是这些数据
  • 画布数据
  • 图片数据

寻找现成工具

尝试寻找现成的工具进行批量备份时，发现全都是只能备份「画布数据」，而源文件中的图片数据均会丢失。

结合 Figma API 备份数据

查阅 FIgma 官方 API 发现，可以获取文件中的图片数据，通过脚本批量下载就可完成「图片数据」的备份，再通过研究现成工具的逻辑，使用了备份「画布数据」+「图片数据」。
但问题是，这 2 种数据是以 .fig 文件 + 图片列表的形式保存，当要恢复备份的数据时，需要人工将图片导入 .fig 文件，并且手动放置到对应的位置。
notion image
这造成了大量的人力成本，再加上 Figma API 对于请求频率的限制以及大量的图片需要处理，使得备份速度难以提升。这些原因使得此备份方案也难以满足需求。

使用脚本模拟鼠标点击

最后尝试使用 Python 的 PyUserInput 模块模拟鼠标点击进行备份
  • 获取所有 Figma 文件（可设置只获取最近 N 天有更新的文件进行备份）
  • 关闭标签：当浏览器标签数量开启达到一定数量时，自动关闭标签，避免内存爆满导致电脑死机
  • 自动排除已下载的文件：鼠标点击的方式难以保证一次性可以下载所有文件，所以需要多次执行脚本，执行时将排除已下载的文件，从而减少人工检查的工作

结果

完成了 2000+文件的备份（使用闲置设备，耗时 1 天完成）。并且脚本可复用，提升备份效率降低数据风险。
由于备份需要先开启 Figma 文件，而开启的加载时长难以确定，机器只会在指定的间隔时间点击指定的位置，可能出现文件未加载完成状态下执行点击，导致文件下载失败。
未来考虑加入计算机视觉模块，让机器人可以感到界面状态，如果已经加载完毕，则再执行点击操作。

总结

通过模拟鼠标点击的方式进行任务的批量处理，可以绕开 API 请求频率等因素的限制，可以作为后续可选的一个自动化解决方案。

© jiangzilong 2024