闲社

标题: 【教程】GitHub Trending开源项目Penpot：设计协作工具本地部署与团队使用指南 [打印本页]

作者: gue3004 时间: 3 小时前
标题: 【教程】GitHub Trending开源项目Penpot：设计协作工具本地部署与团队使用指南
【教程】GitHub Trending开源项目Penpot：设计协作工具本地部署与团队使用指南

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

一、前置条件

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

二、部署步骤

步骤1：克隆项目

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

复制代码

步骤2：配置环境变量

cp env.template .env

复制代码

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

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

复制代码

步骤3：启动服务

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

复制代码

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

步骤4：创建管理员账号

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端口：

sudo ufw allow 9001/tcp

复制代码

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

server {
listen 443 ssl;
server_name penpot.你的域名.com;
location / {
proxy_pass http://localhost:9001;
proxy_set_header Host $host;
}
}

复制代码

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

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

复制代码

Q4：如何更新版本？

cd penpot/docker
git pull
docker compose pull
docker compose up -d

复制代码

六、总结

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

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

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

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

欢迎光临闲社 (https://fzgmgmantis.xianshe.com/)