【教程】GitHub Trending开源项目Penpot：设计协作工具本地部署与团队使用指南

【教程】GitHub Trending开源项目Penpot：设计协作工具本地部署与团队使用指南

最近GitHub Trending上Penpot项目持续火爆（51K+ Stars），作为Figma的开源替代方案，它支持设计与代码的无缝协作。本文手把手教你本地部署并快速上手。

一、前置条件

• 一台Linux服务器（推荐Ubuntu 22.04，4核8G内存）
  
• 已安装Docker和Docker Compose
  
• 域名一个（可选，用于HTTPS）
  

二、部署步骤

步骤1：克隆项目

2. git clone https://github.com/penpot/penpot.git
3. cd penpot/docker

复制代码

步骤2：配置环境变量

2. cp env.template .env

复制代码

编辑.env文件，修改以下关键配置：

2. # 数据库配置
3. POSTGRES_DB=penpot
4. POSTGRES_USER=penpot
5. POSTGRES_PASSWORD=你的强密码
7. # 外部访问地址
8. PENPOT_PUBLIC_URI=http://你的服务器IP:9001
10. # 注册开关（团队内部使用建议关闭公开注册）
11. PENPOT_REGISTRATION_ENABLED=false

复制代码

步骤3：启动服务

2. docker compose -f docker-compose.yaml up -d

复制代码

等待约2-3分钟，访问 http://你的服务器IP:9001 即可看到登录界面。

步骤4：创建管理员账号

2. docker compose exec penpot-backend python manage.py create-profile

复制代码

按提示输入邮箱和密码，第一个创建的账号自动成为管理员。

三、核心功能使用

• 设计稿导入：支持直接导入Figma文件（.fig格式），迁移成本低
  
• 代码导出：选中设计元素，右侧面板自动生成CSS/SVG代码
  
• 组件库：创建可复用的设计组件，团队统一设计规范
  
• 实时协作：多人同时编辑，光标实时显示，类似Google Docs
  
• 设计令牌：统一管理颜色、字体、间距等设计变量
  

四、团队协作配置

1. 邀请成员

管理员登录后，进入团队设置 → 成员管理 → 发送邀请链接。支持设置角色（管理员/编辑/查看）。

2. 项目权限

每个项目可单独设置访问权限：

• 私有：仅项目成员可见
  
• 团队内：所有团队成员可查看
  
• 公开：无需登录即可查看（适合对外展示）
  

3. 与开发协作

设计师完成设计后，开发者可以直接：

• 导出CSS代码复制到项目
  
• 导出SVG图标直接使用
  
• 查看设计规范文档（自动生成的Design Spec）
  

五、常见问题

Q1：启动后无法访问？
检查防火墙是否放行9001端口：

2. sudo ufw allow 9001/tcp

复制代码

Q2：如何配置HTTPS？
推荐使用Nginx反向代理，配置示例如下：

2. server {
3.     listen 443 ssl;
4.     server_name penpot.你的域名.com;
5.     location / {
6.         proxy_pass http://localhost:9001;
7.         proxy_set_header Host $host;
8.     }
9. }

复制代码

Q3：数据备份？
数据库数据挂载在./postgres_data目录，定期备份该目录即可：

2. tar czvf penpot-backup-$(date +%Y%m%d).tar.gz ./postgres_data

复制代码

Q4：如何更新版本？

2. cd penpot/docker
3. git pull
4. docker compose pull
5. docker compose up -d

复制代码

六、总结

Penpot作为开源设计协作工具，在功能上已经能满足大部分团队的设计需求。相比Figma，它的优势在于：

• 数据自主可控，可私有化部署
  
• 开源免费，无用户数限制
  
• 原生支持代码导出，设计开发协作更顺畅
  

对于注重数据安全和成本控制的团队，Penpot是一个值得认真考虑的替代方案。部署过程约15分钟，上手门槛不高。

参考链接：
GitHub仓库
官方文档