Figma 替代品 Penpot 安装和使用教程

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

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

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

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

Penpot 介绍

Penpot 是第一个面向设计和代码协作的开源设计工具。它由西班牙公司 Kaleidos 开发，于 2015 年正式发布。作为一个基于浏览器的设计工具，Penpot 支持矢量图形编辑、原型设计、组件库构建等核心功能，同时还提供了独特的代码协作能力。

Penpot 的核心理念是 “Design with Code in Mind” (以代码为中心的设计)。它使用开放标准 (如 SVG、CSS 和 HTML) 作为底层技术，确保设计输出可以直接被开发者使用。这种方式大大缩短了设计到开发的转换时间，提高了团队整体效率。

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

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

1. CSS Grid 布局：引入了强大的 CSS Grid 布局功能，使设计师能够创建更灵活、响应式的布局，同时生成符合现代 Web 标准的代码。
2. 全新 UI 设计：经过重新设计的用户界面不仅提升了美观度，更重要的是优化了工作流程，提高了操作效率。
3. 改进的组件系统：新的组件系统使创建、管理和重用设计元素变得更加简单，有助于保持设计的一致性和可维护性。
4. 性能优化：整体性能得到显著提升，特别是在处理大型复杂项目时，响应更快，操作更流畅。
5. 增强的可访问性：新版本在可访问性方面做了很多改进，使得更多用户能够方便地使用 Penpot。

Penpot 的技术架构

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

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

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

整体架构如下：

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

后端架构

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

主要组件包括：

• HTTP 服务器