31万star！一款开源免费的原型设计软件开源界的Figma杀手！爱财有道

在设计领域，Figma无疑是一个巨人。它彻底改变了设计流程，将协作带到了一个全新的高度。然而，随着Adobe收购Figma的消息传出，许多设计师和开发者开始担心：Figma未来会如何演变？那些好用的特性会不会被砍掉？

出于白嫖的本能，大家都想寻找一个强大而可靠的Figma替代品。在众多候选者中，有一个名字正在迅速崛起，那就是Penpot。

Penpot不仅仅是一个设计工具，它还代表了一种全新的设计理念。作为第一个真正开源的设计和原型工具，Penpot正在重新定义设计师和开发人员之间的协作方式。它不仅继承了Figma的许多优秀特性，还在某些方面超越了Figma。

本文我们将详细介绍Penpot的核心特性、技术架构，以及安装和使用方法。

Sealos

Sealos是一款以Kubernetes为内核的云操作系统发行版，让企业能够像使用个人电脑一样简单地使用云

83篇原创内容

公众号

截至目前，Penpot在GitHub上已获得接近32000颗星，拥有超过160名贡献者。

最新发布的Penpot2.0版本带来了一系列重大改进，进一步提升了设计和开发的协作体验：

要充分理解Penpot的强大，我们需要深入了解其技术架构。

Penpot采用典型的SPA架构。前端使用ClojureScript和React框架编写，由静态网络服务器提供服务。它与后端应用程序对话，后端应用程序将数据持久保存在PostgreSQL数据库中。

后端使用Clojure编写，因此前后端可以很轻松地共享代码和数据结构。最后将代码编译成JVM字节码，并在JVM环境中运行。

整体架构如下：

下面我们分别来看看各个组件的架构。

Penpot的后端主要使用Clojure编写，这是一种运行在JVM上的函数式编程语言。后端负责数据的CRUD操作、完整性验证以及数据持久化。

主要组件包括：

Penpot的前端使用ClojureScript编写，这是Clojure语言编译到JavaScript的版本。它采用了React框架，通过rumext库进行封装。

主要模块包括：

Penpot还包含一个专门的导出器应用，使用无头浏览器(headlessbrowser)确保导出结果与屏幕上看到的完全一致。这个组件可以生成位图、PDF或SVG格式的导出文件。

Penpot的核心功能了解了Penpot的技术架构，我们再来看看它能为设计师和开发人员带来哪些实际的价值：

Penpot有多种安装方式，有技术能力的同学可以通过Docker镜像来部署。需要部署的组件比较多，除了前端、后端和导出器之外，还需要部署两个数据库PostgreSQL和Redis，如果你还想要实现高可用，那么对象存储也是必不可少的。

对于没有技术背景的同学而言，你也不用担心安装问题，Sealos应用商店[2]提供了一键部署的应用模板，点一下鼠标即可完成部署，非常丝滑。而且不需要再单独购买具有公网IP的服务器了，直接按量付费即可。

如果你想快速部署一个Penpot，又不想陷入繁琐的安装和配置过程，可以试试Sealos。

直接打开Penpot应用模板：

然后点击右上角的“去Sealos部署”。

什么都不用填，直接点击右上角的“部署应用”开始部署。部署完成后，直接点击前端应用的“详情”进入前端应用的详情页面。

等待应用状态变成running之后，直接点击外网地址便可打开Penpot的Web界面。

首先点击“创建账户”注册一个账号：

填一下问卷，总共有五步：

填完之后就可以开始正式使用了，你可以选择创建团队，也可以自己独立使用。

除此之外，还有另外一种打开方式，先刷新Sealos桌面(也就是在cloud.sealos.run界面刷新浏览器)，然后你就会发现Sealos桌面多了个图标：

直接点击这个图标就可以打开Penpot的Web界面。

是不是有点似曾相识？没错，很像Windows的快捷方式！

单机操作系统可以这么玩，Sealos云操作系统当然也可以这么玩。

要正式开始使用Penpot，首先需要了解一些基本概念和操作。

画板是Penpot中最基本的容器对象，通常用于创建特定尺寸的设计。你可以根据你的需要，选择一个特定的屏幕或打印用的尺寸。

色盘Penpot提供了强大的颜色管理工具，包括颜色选择器和颜色面板。

组件组件是可以在多个文件中重复使用的对象或对象组，有助于保持设计的一致性。

组件交换允许轻松替换组件副本：

Penpot允许通过连接画板来创建交互原型，模拟用户如何在屏幕间导航。

定义启动交互的用户动作，包括：

定义触发交互后发生的事件，包括：

定义触发交互时画板之间的过渡效果，包括：

允许在同一页面内定义多个起点，以更好地组织和展示原型：

可以固定对象在滚动时的位置，适用于原型设计中的固定头部、导航栏和浮动按钮等元素。

Figma导出Penpot还提供了一个Figma插件，用于将Figma设计稿导出，可支持基本形状、面板、组、填充的导出，文本、图像具有基本功能支持。但目前自动布局、组件等关键的的功能都未能得到支持。

虽然目前商业设计软件如Figma在市场上占据主导地位，但Penpot这样的开源工具正在快速崛起，并可能在未来超越商业软件。开源模式允许更多开发者参与，能够带来更快的创新速度和更强的功能适应性。同时，开源工具的透明性和可定制性，可能更好地满足不同团队的需求，最终成为行业新标准。