Penpot：开源 Figma 替代，自建设计协作工具
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：
curl-fsSLhttps://get.docker.com|shsudousermod-aGdocker$USERnewgrpdockerdocker--version&&dockercompose version获取官方 Docker Compose 配置
Penpot 官方在 GitHub 提供了完整的 Docker Compose 配置，直接使用官方配置是最稳妥的部署方式：
mkdir-p/opt/penpotcd/opt/penpot# 下载官方 docker-compose.yamlcurl-odocker-compose.yaml\https://raw.githubusercontent.com/penpot/penpot/main/docker/images/docker-compose.yaml# 下载配置文件curl-oconfig.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关键部分如下：
version:"3.5"networks:penpot:volumes:penpot_postgres_v15:penpot_assets:services:penpot-frontend:image:penpotapp/frontend:latestrestart:alwaysports:-9001:80volumes:-penpot_assets:/opt/data/assetsdepends_on:-penpot-backend-penpot-exporternetworks:-penpotenvironment:-PENPOT_FLAGS=enable-login-with-passwordpenpot-backend:image:penpotapp/backend:latestrestart:alwaysvolumes:-penpot_assets:/opt/data/assetsdepends_on:-penpot-postgres-penpot-redisnetworks:-penpotenvironment:-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=falsepenpot-exporter:image:penpotapp/exporter:latestrestart:alwaysnetworks:-penpotenvironment:-PENPOT_PUBLIC_URI=http://penpot-frontend-PENPOT_REDIS_URI=redis://penpot-redis/0penpot-redis:image:redis:7restart:alwaysnetworks:-penpotpenpot-postgres:image:postgres:15restart:alwaysvolumes:-penpot_postgres_v15:/var/lib/postgresql/datanetworks:-penpotenvironment:-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 反向代理配置
mkdir-p/opt/penpot/caddy创建/opt/penpot/caddy/Caddyfile：
penpot.yourdomain.com { reverse_proxy penpot-frontend:80 }在docker-compose.yaml中追加 Caddy 服务：
caddy:image:caddy:2-alpinerestart:unless-stoppedports:-"80:80"-"443:443"volumes:-./caddy/Caddyfile:/etc/caddy/Caddyfile-caddy_data:/data-caddy_config:/confignetworks:-penpotdepends_on:-penpot-frontend同时在 volumes 块添加：
volumes:caddy_data:caddy_config:启动服务
cd/opt/penpotdockercompose up-d# 监控启动过程（后端启动较慢，约 60-90 秒）dockercompose logs-fpenpot-backend出现Server started日志后，访问https://penpot.yourdomain.com即可看到登录界面。
初始设置
注册管理员账号
首次访问时，点击「Create new account」注册账号。由于我们设置了disable-email-verification，注册后无需邮件验证即可直接登录（生产环境建议配置 SMTP 并移除此 flag）。
配置 SMTP（团队邀请必需）
若需要通过邮件邀请团队成员，需在penpot-backend中配置 SMTP：
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」下载
常用运维命令
# 查看所有服务状态dockercomposeps# 备份 PostgreSQL 数据dockerexecpenpot-postgres pg_dump-Upenpot penpot>penpot-backup-$(date+%Y%m%d).sql# 恢复备份dockerexec-ipenpot-postgres psql-Upenpot penpot<penpot-backup-20260517.sql# 更新到最新版本dockercompose pull&&dockercompose up-d# 查看后端日志dockercompose logs-fpenpot-backend总结
Penpot 为团队提供了一个完全可控的设计协作环境，无需支付 Figma 的高额订阅费，且所有设计资产存储在自己的服务器上。4 核 8GB 的配置能够支撑 10-20 人的设计团队同时协作。无论是个人项目还是企业内网部署，Penpot 都是 Figma 的有力替代方案。