别再花钱买Figma了！手把手教你用Docker在NAS上部署开源设计神器Penpot
私有化部署Penpot：零成本打造团队专属设计协作平台
在数字创意领域，设计工具的选择往往陷入两难：商业软件功能强大但价格不菲，免费方案又常伴有限制或隐私顾虑。当Figma的订阅费用成为小型团队难以承受之重，一款名为Penpot的开源解决方案正在改变游戏规则。作为首个基于SVG标准的跨平台设计工具，Penpot不仅提供媲美商业软件的功能体验，更通过Docker容器化技术实现完全自主的数据掌控。
1. 为什么选择Penpot替代商业设计工具
设计领域长期被Sketch、Figma等商业工具主导，但近年来开源生态的成熟催生了真正可用的替代方案。Penpot的核心优势在于其完全开放的技术栈：
- 无供应商锁定风险：所有设计文件以标准SVG格式存储，即使未来迁移其他平台也能保持编辑能力
- 团队协作零成本：无限项目、无限协作者、无限版本历史，彻底摆脱按人头收费的商业模式
- 数据主权保障：私有化部署确保敏感设计资产不会离开自有服务器
- 跨平台兼容性：基于Web技术构建，Windows/macOS/Linux均可通过浏览器直接使用
与主流工具的功能对比：
| 功能维度 | Figma专业版 | Penpot 2.0 |
|---|---|---|
| 矢量编辑 | ✔️ | ✔️ |
| 原型交互 | ✔️ | ✔️ |
| 团队实时协作 | ✔️ | ✔️ |
| 设计系统管理 | ✔️ | ✔️ |
| 私有化部署 | ❌ | ✔️ |
| 年度使用成本 | $12,000+ | $0 |
实际测试显示，Penpot在响应速度和渲染精度上已接近商业工具水平，其独有的"布局约束"功能甚至为响应式设计提供了更直观的工作流。
2. 部署准备：NAS环境配置指南
在群晖DSM7.0及以上系统的NAS中部署Penpot，需要确保满足以下基础条件：
硬件要求：
- 双核x86处理器（ARM架构需特殊镜像）
- 4GB以上内存（团队使用建议8GB+）
- 20GB可用存储空间
软件依赖：
# 检查Docker版本 docker --version # 应输出 Docker version 20.10.17 或更高 # 检查docker-compose可用性 docker-compose --version # 应输出 Docker Compose version v2.6.0 或更高网络配置：
- 在DSM控制面板开启SSH服务（端口建议修改默认22）
- 配置DDNS或固定内网IP（如192.168.1.100）
- 如需外网访问，需在路由器配置端口转发（默认9001）
常见部署问题排查：
- 若遇到权限错误，尝试在SSH中执行：
sudo chmod -R 775 /volume1/docker/penpot - 存储空间不足时可挂载额外卷：
docker volume create penpot_data
3. 容器化部署实战步骤
通过SSH连接到NAS后，按以下流程完成部署：
创建专用目录：
mkdir -p /volume1/docker/penpot cd /volume1/docker/penpot获取配置文件：
wget https://raw.githubusercontent.com/penpot/penpot/main/docker/images/docker-compose.yaml wget https://raw.githubusercontent.com/penpot/penpot/main/docker/images/config.env关键配置修改：
- 编辑
docker-compose.yaml确保端口映射正确：services: penpot-frontend: image: "penpotapp/frontend:latest" ports: - "9001:80" # 左侧可改为其他未被占用的端口 - 修改
config.env中的公开访问地址：PENPOT_PUBLIC_URI=http://your-nas-ip:9001
- 编辑
启动服务：
docker-compose up -d正常启动后将创建5个容器：
- penpot-frontend（前端界面）
- penpot-backend（核心逻辑）
- penpot-exporter（导出服务）
- postgres（数据库）
- redis（缓存服务）
首次启动可能耗时3-5分钟，可通过
docker logs penpot_penpot-backend_1查看进度。
4. 高级配置与团队协作
基础部署完成后，这些增强配置能让Penpot更贴合实际工作场景：
用户管理系统（二选一）：
SMTP邮件验证：
# 在config.env中添加 PENPOT_EMAIL_SMTP_HOST=smtp.yourmail.com PENPOT_EMAIL_SMTP_PORT=587 PENPOT_EMAIL_SMTP_USER=your@email.com PENPOT_EMAIL_SMTP_PASSWORD=your-password PENPOT_EMAIL_SMTP_SSL=true命令行创建用户：
docker exec -ti penpot_penpot-backend_1 ./manage.sh create-profile # 按提示输入邮箱、密码、姓名等信息
域名与HTTPS配置：
在NAS控制面板配置反向代理：
- 源URL：
https://yourdomain.com - 目标URL：
http://localhost:9001
- 源URL：
添加WebSocket支持：
# 在反向代理高级设置中添加 proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade";
性能优化建议：
- 增加后端实例数：
# 在docker-compose.yaml中修改 penpot-backend: deploy: replicas: 2 - 定期备份数据库：
docker exec penpot_postgres_1 pg_dump -U penpot > /path/to/backup.sql
5. 设计资产迁移与模板应用
Penpot支持直接导入Figma/Sketch文件，但需注意：
格式转换技巧：
- Figma文件需通过社区插件导出为SVG
- Sketch文档建议先转换为PDF再导入
官方模板库应用：
# 下载社区模板到本地 wget https://github.com/penpot/community-templates/releases/download/latest/templates.zip # 解压后通过web界面上传设计系统搭建：
- 创建颜色变量库：
{ "primary": "#4F46E5", "secondary": "#10B981", "error": "#EF4444" } - 组件库支持自动同步更新，修改主组件后所有实例同步变更
- 创建颜色变量库：
实际使用中发现，Penpot的自动布局功能虽然不及Figma成熟，但其节点式原型交互编辑器为复杂动效提供了更直观的可视化编程体验。一个3层嵌套的菜单原型，在Penpot中通过5个连接节点即可完成，而传统工具需要设置多个交互热区。