在设计领域,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这样的开源工具正在快速崛起,并可能在未来超越商业软件。开源模式允许更多开发者参与,能够带来更快的创新速度和更强的功能适应性。同时,开源工具的透明性和可定制性,可能更好地满足不同团队的需求,最终成为行业新标准。