Penpot：开源 Figma 替代，自建设计协作工具
Figma 的订阅费用对独立开发者和小型团队来说是一笔不小的开支，而且所有设计资产都存储在第三方服务器上。Penpot 是一款完全开源的设计与原型制作工具，支持实时多人协作，基于 SVG 标准渲染，可完全自托管。它提供了媲美 Figma 的核心功能：矢量编辑、组件库、原型链接、开发者标注面板，是团队自建设计工具栈的理想选择。
本文将详细介绍如何在自己的服务器上部署 Penpot，完成初始配置，并带你体验核心设计工作流。
服务器配置
Penpot 的后端采用 Clojure 编写，同时包含 Node.js 导出服务，整体内存占用较大。推荐以下配置：
- 机型：4 核 8GB（Clojure 后端 + Node.js 导出服务 + PostgreSQL，内存需求较高）
- 系统：Ubuntu 22.04 LTS
- 磁盘：40GB 以上（设计文件和导出资源会持续增长）
推荐使用 雨云服务器 部署，注册填优惠码 2026off 领 5 折优惠券，4 核 8GB 机型性价比出色，完全满足 Penpot 的运行需求。
安装 Docker 和 Docker Compose：
bash
curl -fsSL https://get.docker.com | sh
sudo usermod -aG docker $USER
newgrp docker
docker --version && docker compose version获取官方 Docker Compose 配置
Penpot 官方在 GitHub 提供了完整的 Docker Compose 配置，直接使用官方配置是最稳妥的部署方式：
bash
mkdir -p /opt/penpot
cd /opt/penpot
# 下载官方 docker-compose.yaml
curl -o docker-compose.yaml \
https://raw.githubusercontent.com/penpot/penpot/main/docker/images/docker-compose.yaml
# 下载配置文件
curl -o config.env \
https://raw.githubusercontent.com/penpot/penpot/main/docker/images/config.envDocker Compose 服务说明
官方 Compose 包含以下服务：
- penpot-frontend：基于 Nginx 的前端服务，用户通过浏览器访问此服务
- penpot-backend：Clojure 编写的核心后端，处理设计文件存储、用户认证、团队协作
- penpot-exporter：Node.js 编写的导出服务，负责将设计导出为 PNG/SVG/PDF
- penpot-redis：用于实时协作的消息队列和缓存
- penpot-postgres：存储用户数据、设计文件元数据
完整的 docker-compose.yaml 关键部分如下：
yaml
version: "3.5"
networks:
penpot:
volumes:
penpot_postgres_v15:
penpot_assets:
services:
penpot-frontend:
image: penpotapp/frontend:latest
restart: always
ports:
- 9001:80
volumes:
- penpot_assets:/opt/data/assets
depends_on:
- penpot-backend
- penpot-exporter
networks:
- penpot
environment:
- PENPOT_FLAGS=enable-login-with-password
penpot-backend:
image: penpotapp/backend:latest
restart: always
volumes:
- penpot_assets:/opt/data/assets
depends_on:
- penpot-postgres
- penpot-redis
networks:
- penpot
environment:
- PENPOT_FLAGS=enable-registration enable-login-with-password disable-email-verification
- PENPOT_SECRET_KEY=your-very-long-secret-key-here
- PENPOT_PUBLIC_URI=https://penpot.yourdomain.com
- PENPOT_DATABASE_URI=postgresql://penpot-postgres/penpot
- PENPOT_DATABASE_USERNAME=penpot
- PENPOT_DATABASE_PASSWORD=penpot_password
- PENPOT_REDIS_URI=redis://penpot-redis/0
- PENPOT_ASSETS_STORAGE_BACKEND=assets-fs
- PENPOT_STORAGE_ASSETS_FS_DIRECTORY=/opt/data/assets
- PENPOT_TELEMETRY_ENABLED=false
penpot-exporter:
image: penpotapp/exporter:latest
restart: always
networks:
- penpot
environment:
- PENPOT_PUBLIC_URI=http://penpot-frontend
- PENPOT_REDIS_URI=redis://penpot-redis/0
penpot-redis:
image: redis:7
restart: always
networks:
- penpot
penpot-postgres:
image: postgres:15
restart: always
volumes:
- penpot_postgres_v15:/var/lib/postgresql/data
networks:
- penpot
environment:
- POSTGRES_INITDB_ARGS=--data-checksums
- POSTGRES_DB=penpot
- POSTGRES_USER=penpot
- POSTGRES_PASSWORD=penpot_password关键环境变量说明：
| 变量 | 说明 |
|---|---|
PENPOT_FLAGS |
enable-registration 允许用户注册；disable-email-verification 跳过邮件验证（测试用）；enable-login-with-password 启用密码登录 |
PENPOT_PUBLIC_URI |
外部可访问的域名，必须与实际访问地址一致 |
PENPOT_SECRET_KEY |
用于 JWT 签名，必须设置强随机值：openssl rand -hex 64 |
Caddy 反向代理配置
bash
mkdir -p /opt/penpot/caddy创建 /opt/penpot/caddy/Caddyfile：
caddyfile
penpot.yourdomain.com {
reverse_proxy penpot-frontend:80
}在 docker-compose.yaml 中追加 Caddy 服务：
yaml
caddy:
image: caddy:2-alpine
restart: unless-stopped
ports:
- "80:80"
- "443:443"
volumes:
- ./caddy/Caddyfile:/etc/caddy/Caddyfile
- caddy_data:/data
- caddy_config:/config
networks:
- penpot
depends_on:
- penpot-frontend同时在 volumes 块添加：
yaml
volumes:
caddy_data:
caddy_config:启动服务
bash
cd /opt/penpot
docker compose up -d
# 监控启动过程（后端启动较慢，约 60-90 秒）
docker compose logs -f penpot-backend出现 Server started 日志后，访问 https://penpot.yourdomain.com 即可看到登录界面。
初始设置
注册管理员账号
首次访问时，点击「Create new account」注册账号。由于我们设置了 disable-email-verification，注册后无需邮件验证即可直接登录（生产环境建议配置 SMTP 并移除此 flag）。
配置 SMTP（团队邀请必需）
若需要通过邮件邀请团队成员，需在 penpot-backend 中配置 SMTP：
yaml
environment:
- PENPOT_SMTP_ENABLED=true
- PENPOT_SMTP_HOST=smtp.youremail.com
- PENPOT_SMTP_PORT=587
- PENPOT_SMTP_USERNAME=noreply@yourdomain.com
- PENPOT_SMTP_PASSWORD=your_smtp_password
- PENPOT_SMTP_TLS=true
- PENPOT_SMTP_FROM=noreply@yourdomain.com创建团队与项目
登录后进入主界面：
- 创建团队：点击左侧「+」图标，选择「New team」，输入团队名称（如「设计团队」），点击「Create new team」
- 创建项目：在团队主页点击「New project」，输入项目名称（如「移动端 App 设计」）
- 创建文件：在项目中点击「New file」，双击文件名可重命名
基础设计工作流
画布基本操作
进入设计文件后，熟悉以下基本操作：
| 快捷键 | 功能 |
|---|---|
F |
创建 Frame（画板，类似 Figma 的 Frame） |
R |
矩形工具 |
O |
椭圆工具 |
T |
文字工具 |
P |
钢笔工具（矢量路径） |
Ctrl+G |
编组选中元素 |
Ctrl+Z |
撤销 |
创建基础界面元素
1. 按 F 选择 Frame 工具，在画布拖拽创建 375×812 的 Frame（iPhone 尺寸）
2. 在右侧面板选择 Frame 预设（iPhone 14、Android 等）
3. 按 R 在 Frame 内创建矩形作为导航栏背景
4. 在右侧「Fill」面板设置颜色（#1A73E8）
5. 按 T 添加文字，设置字体为 PingFang SC、字号 18、颜色白色
6. 使用「Constraints」面板设置元素的响应式约束组件系统
Penpot 的组件系统类似 Figma 的 Components：
- 选中一个已设计好的按钮元素
- 右键 → 「Create main component」
- 组件出现在左侧「Assets」面板的「Components」分类下
- 将组件从 Assets 面板拖入画布即可创建实例
- 双击组件实例可进入编辑模式，修改会同步到所有实例
原型链接
切换到顶部工具栏的「Prototype」标签：
- 选中一个按钮元素
- 点击右侧「Prototype」面板中的「+」
- 将连线拖到目标 Frame
- 设置交互类型（Click、Hover 等）和动画效果
- 点击右上角「Play」按钮进入预览模式，即可测试交互流程
开发者标注面板
Penpot 内置「Inspect」面板，无需导出即可给开发者提供标注信息：
- 打开设计文件分享链接（右上角「Share」）
- 查看者可在右侧切换到「Inspect」标签
- 点击任意元素即可查看：
- 精确的宽高、位置坐标
- 颜色（HEX/RGB/HSL）
- 字体属性（字号、行高、字重）
- 自动生成的 CSS 样式代码
邀请团队成员
- 进入团队设置页（团队名旁的「...」菜单）
- 点击「Members」→「Invite people」
- 输入成员邮箱，选择角色（Admin / Editor / Viewer）
- 点击「Send invitation」，对方收到邮件后点击链接即可加入
注意：邀请功能必须配置 SMTP 才能正常使用。
版本历史
Penpot 支持类似 Git 的版本历史功能：
- 右键文件名 → 「Show history」可查看所有自动保存的版本
- 点击任意历史版本可预览该版本的设计状态
- 支持从历史版本恢复
导出设计资产
选中任意元素或 Frame，在右侧「Design」面板底部：
- 点击「Export」区域的「+」按钮
- 选择格式：PNG、SVG、PDF
- 设置倍率（1x、2x、3x）
- 点击「Export」下载
常用运维命令
bash
# 查看所有服务状态
docker compose ps
# 备份 PostgreSQL 数据
docker exec penpot-postgres pg_dump -U penpot penpot > penpot-backup-$(date +%Y%m%d).sql
# 恢复备份
docker exec -i penpot-postgres psql -U penpot penpot < penpot-backup-20260517.sql
# 更新到最新版本
docker compose pull && docker compose up -d
# 查看后端日志
docker compose logs -f penpot-backend总结
Penpot 为团队提供了一个完全可控的设计协作环境，无需支付 Figma 的高额订阅费，且所有设计资产存储在自己的服务器上。4 核 8GB 的配置能够支撑 10-20 人的设计团队同时协作。无论是个人项目还是企业内网部署，Penpot 都是 Figma 的有力替代方案。