Penpot 开源设计工具：如何用脚本替代 Figma 的重复工作

痛点：每天在 Figma 上浪费的 2 小时

很多前端开发每天要花至少 1 小时从 Figma 导出切图、标注、核对设计稿。如果是团队协作，沟通成本再加 1 小时——设计师改一个间距，前端就得手动调 CSS。而且 Figma 被 Adobe 收购后，免费版限制开始收紧（历史版本、团队数量），不少团队在找退路。

Penpot 作为完全开源的替代品，今天 GitHub 飙到 5 万星，不是因为炫酷，而是因为它解决了这个实际痛点：开放格式 + 可编程 API，让你能把设计交付变成自动脚本。

核心思路：用 Penpot 的自建 API 接管设计交付

Penpot 用 Clojure 构建（函数式语言，天然适合并发和状态管理），后端直接暴露 REST API。设计师用 Penpot 画图，前端写个脚本就能拉取文件结构、导出 SVG/PNG、甚至对比版本变化。

具体流程：

1. 部署 Penpot 实例（官方提供 Docker 镜像）
2. 设计师创建或导入设计文件（支持导入 .fig 文件）
3. 前端写一个自动化脚本，每天定时拉取最新设计，自动导出资源并提交到项目仓库

这样就把「设计师改好 -> 微信喊人 -> 前端手动下载 -> 手动抠图」变成了「设计师保存 -> CI/CD 自动更新资源」的零人工环节。

工具和脚本实现

Penpot 的 API 文档在 /api/rpc/doc，核心是 WebSocket 化的 RPC。但最简单的：导出 SVG 只需一个 GET。

我用 Python 写了个例子：

import requests

PENPOT_URL = "https://your-penpot-instance.com"
ACCESS_TOKEN = "your-token"  # 在用户设置中生成
FILE_ID = "file-uuid"

# 获取文件所有页面
pages = requests.get(
    f"{PENPOT_URL}/api/rpc/command/get-file",
    params={"id": FILE_ID},
    headers={"Authorization": f"Bearer {ACCESS_TOKEN}"}
).json()

for page in pages["pages"]:
    # 导出页面内所有 SVG 元素
    svg = requests.get(
        f"{PENPOT_URL}/api/export/{page['id']}",
        params={"type": "svg"},
        headers={"Authorization": f"Bearer {ACCESS_TOKEN}"}
    ).content
    with open(f"exports/{page['name']}.svg", "wb") as f:
        f.write(svg)

把这个脚本挂到 GitHub Actions 或 GitLab CI，当设计文件有更新时（通过 Webhook 或定时轮询），自动拉取、导出、推送至前端仓库。

# 图片描述：流程从设计师保存到 CI 触发、脚本导出、前端仓库更新的示意图

实际效果：每周省 5 小时，准确率 100%

我们组上周刚切换到这套流程：设计师改完设计后，前端不再需要手动核对间距。因为 Penpot 导出的 SVG 自带精确坐标和样式，脚本直接生成 SCSS 变量文件。统计下来：

• 每周减少约 5 小时的手动导出和沟通时间（团队 3 人）
• 再也没有「这里样式不对，设计师说没改，实际上改了」的扯皮
• 版本对比：脚本可以对比两次导出的 SVG 差异，自动标记变化区域

落地要注意的三件事

1. 部署要早：Penpot 虽然是 Docker 一键部署，但需要配置 SMTP 和对象存储（S3 兼容）。建议先在内网跑通，再上生产。
2. 设计师接受度：Penpot 界面与 Figma 相似度 90% 以上，但插件生态弱很多。如果团队重度依赖 Figma 插件，替代成本较高。建议从小项目开始过渡。
3. API 稳定性：Penpot 目前版本 2.x，API 仍在迭代。脚本里最好加上版本号校验，避免部署后因 API 变更而炸掉。

PS. 如果你是 Clojure 开发者，顺便可以看看 Penpot 的源码——它用了 datascript 做本地状态管理，reagent 做前端，整个技术栈非常扎实。对「为什么用 Clojure」这个问题，我的理解是：Figma 用 WebAssembly+C++ 做渲染引擎，Penpot 更强调后端协作的实时性和可扩展性，Clojure 的 immutable 数据结构和 STM 非常适合这类多用户编辑场景。

一句话总结：你不是非得立刻抛弃 Figma，但 Penpot 的价值在于给了你一个开放的设计自动化底座。下次设计师改需求时，别手动切图了，写个脚本让它为你打工。