9.1k Star，面向跨领域团队的开源设计和原型平台

【导语】：第一个面向跨领域团队的开源设计和原型平台。

简介

Penpot 是第一个面向跨领域团队的开源设计和原型平台。不依赖于操作系统，基于 Web，使用开放 Web 标准（SVG），可以使用 Penpot 同设计、PD 人员进行协作，也可以使用他人上传到 Penpot 的设计。

项目地址：

https://github.com/penpot/penpot

安装

Penpot 有很多种安装安装方式，但其中最简单，也是官方推荐的方式是 docker 和 docker-compose。

启动 Penpot

需要先获取 docker-compose.yaml 文件，或者自行创建也可以；配置是使用文件中的环境变量定义的 config.env，下载的文件已经附带了设置好的默认变量：

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

启动 Penpot，访问 http://localhost:9001 即可：

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

更新

要更新最新版本的 penpot 也很简单，只需要执行以下命令即可：

docker-compose -f docker-compose.yaml pull

界面

可以通过私有安装部署 Penpot 进行使用，或者访问他们的在线网站：

https://design.penpot.app

Penpot 界面具有三个主要区域，分别是仪表板、工作空间和视图模式。

仪表板

仪表板是组织文件、库、项目和团队的地方，包括 11 个功能，团队、搜索文件、项目 、草稿、共享库、自定义字体、固定项目、用户区、评论通知、创建项目、文件卡。

工作空间

工作空间是实际创建设计的地方，有一个无限的画布，可以在其中直接工作，同时也可以在画板中创建和工作。工作空间包含 15 个功能，主菜单、用户、文件状态、历史面板、缩放、视图模式、图层面板、资产面板、工具栏、排版调色板、调色板、规则、设计属性、原型模式、视图。

视图模式

视图模式可以展示和分享在工作空间的设计结果，还有一个代码模式，可以在其中获取对象规范和代码片段，包含 11 个功能，页面选择器、画板选择器、画板计数器、播放模式、评论模式、代码模式、交互设置、缩放选项、全屏、共享原型选项、文件编辑。

架构

Penpot 具有典型 SPA 的架构。有一个前端应用程序，用 ClojureScript 编写并使用 React 框架，与后端服务通信，该服务将数据保存在 PosgreSQL 数据库中。

后端是用 Clojure 编写的，所以前后可以毫无问题地共享代码和数据结构。然后，将代码编译成 JVM 字节码并在 JVM 环境中运行。