开源设计和原型制作平台Penpot

发表于 更新于 分类于 Waline： 阅读次数： 本文字数： 2.2k 阅读时长 ≈ 2 分钟
Penpot 是第一个面向跨域团队的开源设计和原型制作平台。

什么是 Penpot ？

Penpot 是第一个面向跨域团队的开源设计和原型制作平台。 Penpot 是基于 Web 的，不依赖于操作系统，使用开放式 Web 标准（SVG）。为所有人提供服务并由开源社区授权。

官网地址：https://penpot.app/

安装

在 docker 文件夹中，创建一个新文件夹，并将其命名为 penpot，SSH 客户端登录到群晖，在 penpot 目录中执行下面的命令下载文件

老苏常用的SSH 客户端主要是 Finalshell 和 PuTTY

1
2
3
4
5
# 下载 docker-compose.yaml
wget https://raw.githubusercontent.com/penpot/penpot/main/docker/images/docker-compose.yaml

# 下载 config.env
wget https://raw.githubusercontent.com/penpot/penpot/main/docker/images/config.env

docker-compose.yaml

docker-compose.yaml 主要就是看看要不要改端口，虽然涉及到 5 个容器，但是只有前端对外暴露了端口 9001，如果这个端口没有冲突的话，这个文件就不用改了

1
2
3
4
5
services:
  penpot-frontend:
    image: "penpotapp/frontend:latest"
    ports:
      - 9001:80

config.env

config.env 是设置文件，跑起来的话只要修改 PENPOT_PUBLIC_URI

当然可以配置的内容很多，包括 SMTP、用户、演示帐户，以及第三方认证等

原始的是下面👇这样的

1
2
3
# Should be set to the public domain when penpot is going to be
# served.
PENPOT_PUBLIC_URI=http://localhost:9001

老苏根据群晖的 IP 改成了👇这样

如果前面改了端口，这里也要跟着改

1
2
3
# Should be set to the public domain when penpot is going to be
# served.
PENPOT_PUBLIC_URI=http://192.168.0.197:9001

在 penpot 目录中执行一键启动

1
2
3
4
5
# 进入 penpot 目录
cd /volume2/docker/penpot

# 一键启动
docker-compose up -d

不出意外的话，你会看到 5 个 done

容器都处于正常运行中

其他可能用到的命令

1
2
3
4
5
6
7
8
# 一键停止
docker-compose stop

# 一键重启
docker-compose restart

# 一键删除
docker-compose down

反向代理

老苏没有公网 IP，用 frp 做的内网穿透，但做了泛域名解析，不了解的可以翻翻老苏以前的文章

进入 自定义标题，新增 WebSocket

运行

创建用户

老苏尝试过用 88 邮箱配置 SMTP，虽然老苏之前在很多项目都成功配置过 SMTP，但是这一次失败了，所以没办法通过网页注册用户。

大家有兴趣可以试试在 config.env 配置其他的邮箱

如果在未配置 SMTP 的情况下启动应用程序，需要创建一个用户才能登录到该应用程序。

1
2
# 创建用户
docker exec -ti penpot_penpot-backend_1 ./manage.sh create-profile

开始运行

在浏览器中输入 http://群晖IP:9001，就能看到主界面了

输入创建好的用户邮件和密码

但是怎么也登不进去，浏览器一直返回 401 错误

1
Failed to load resource: the server responded with a status of 401 (Unauthorized)

需要改为域名登录，也就是 https://pp.laosu.ml 才行

老苏自己用，所以选择了 Fly solo，如果是团队使用，那就选 Team up

界面是中文的，不需要特别设置

导入模板

可以在这里找到库和模板：https://penpot.app/libraries-templates.html

老苏导入了 Ant-Design-UI-Kit-Lite 和 Interactive-music-app

进入编辑状态

原型演示，还支持交互

小结

Penpot 拥有多款 UI 组件与样式、交互式原型以及项目设计示例与模板，帮你更快完成项目设计工作。此外，该平台还支持团队多人实时协作编辑，设计稿添加注释等多种团队协作工具。老苏觉得对于产品设计人员而言，是非常有用。

参考文档

Penpot - Design Freedom for Teams
地址：https://penpot.app/

penpot/penpot: Penpot - The Open-Source design & prototyping platform
地址：https://github.com/penpot/penpot

Getting Started.
地址：https://help.penpot.app/technical-guide/getting-started/

Penpot: an open-source Prototyping and design platform for teams
地址：https://medevel.com/penpot/