Penpot 安装与使用指南：Figma 开源替代方案
在设计领域，Figma 无疑是一个巨头，彻底改变了设计流程，将协作提升到新的高度。然而，随着 Adobe 收购 Figma 的消息传出，许多设计师和开发者不禁担忧：Figma 的未来会如何发展？那些深受喜爱的功能是否会被削减？
怀着对免费工具的期待，人们纷纷寻找一个强大而可靠的 Figma 替代品。在众多候选者中，Penpot 正迅速崭露头角。
Penpot 不仅仅是一个设计工具，它还引领了一种全新的设计理念。作为第一个真正开源的设计和原型工具，Penpot 正在重新定义设计师与开发人员之间的协作方式。它不仅保留了 Figma 的许多优秀特性，还在某些方面实现了超越。
本文将全面介绍 Penpot 的核心功能、技术架构，以及安装和使用的具体步骤。
Penpot 介绍
Penpot 是一款专注于设计与代码协作的开源神器，由西班牙公司 Kaleidos 在 2015 年推出。作为一款浏览器设计工具，Penpot 不仅能让你愉快地画矢量图、做原型，还能整出一个组件库，最绝的是它还会“和代码谈恋爱”。
Penpot 的核心哲学是 “Design with Code in Mind”（设计时记得代码在看着你）。它用开放标准（比如 SVG、CSS 和 HTML）做底层技术，成果直接甩给开发者就能用，简直是程序员的贴心小棉袄。这种操作大幅缩短了从“设计师脑洞”到“开发者头痛”的时间，团队效率直接起飞。
目前，Penpot 在 GitHub 上已经收割了近 32000 颗星星，还有 160 多位贡献者纷纷为它打 call。
最新发布的 Penpot 2.0 版本引入了众多重要更新，显著增强了设计与开发之间的协作效率和体验：
- CSS Grid 布局：引入了强大的 CSS Grid 布局功能，使设计师能够创建更灵活、响应式的布局，同时生成符合现代 Web 标准的代码。
- 全新 UI 设计：经过重新设计的用户界面不仅提升了美观度，更重要的是优化了工作流程，提高了操作效率。
- 改进的组件系统：新的组件系统使创建、管理和重用设计元素变得更加简单，有助于保持设计的一致性和可维护性。
- 性能优化：整体性能得到显著提升，特别是在处理大型复杂项目时，响应更快，操作更流畅。
- 增强的可访问性：新版本在可访问性方面做了很多改进，使得更多用户能够方便地使用 Penpot。
Penpot 的技术架构
要全面领略 Penpot 的强大功能，我们需要深入剖析其技术架构。
Penpot 基于典型的 SPA 架构设计。前端采用 ClojureScript 和 React 框架开发，由静态网络服务器提供支持。前端与后端应用程序进行交互，后端负责将数据持久化到 PostgreSQL 数据库中。
后端使用 Clojure 编写，这使得前后端能够轻松共享代码和数据结构。最终，代码被编译为 JVM 字节码，并运行在 JVM 环境中。
整体架构如下：
下面我们一起来探索各个组件的架构。
后端架构
Penpot 的后端由 Clojure 编写，这是一种基于 JVM 的函数式编程语言，优雅且高效。后端的核心职责包括数据的 CRUD 操作、完整性校验以及数据持久化，确保系统的稳定性和可靠性。
主要组件包括：
- HTTP 服务器：处理 API 请求和路由。
- RPC 系统：允许前端安全地调用后端函数。
- 数据库：使用 PostgreSQL 存储核心数据。
- 文件存储：用于存储媒体附件。
- 异步任务系统：处理耗时操作，如发送邮件和遥测数据收集。
- WebSocket：实现实时协作和通知。
前端架构
Penpot 的前端采用 ClojureScript 开发，这是 Clojure 编译到 JavaScript 的实现版本。它基于 React 框架，并通过 rumext 库进行了封装。
主要模块包括：
- 全局状态管理：使用类似 Redux 的事件循环范式。
- UI 组件：包括仪表板、工作区、查看器等核心功能模块。
- 渲染引擎：负责将设计转换为 SVG 元素。
- Web Worker：处理耗时操作，如生成缩略图和维护几何索引。
导出器
Penpot 还有一个神奇的导出器应用，靠无头浏览器 (headless browser) 确保导出的内容跟屏幕上的一模一样，绝不跑偏。这个神器能生成位图、PDF 或 SVG 格式的导出文件，简直是设计师的贴心小棉袄。
Penpot 的核心功能
在深入了解 Penpot 的技术架构之后，让我们来探讨它能为设计师和开发人员带来的实际价值：
为设计师打造
- 直观的设计界面：Penpot 提供了一个熟悉而强大的设计环境，设计师可以轻松创建复杂的设计。
- 响应式设计：借助 CSS Grid 布局，设计师可以轻松创建适应各种屏幕尺寸的设计。
- 组件和设计系统：Penpot 的组件系统允许创建可重用的设计元素，极大提高了效率和一致性。
- 交互原型：设计师可以添加交互和动画，创建高保真原型。
- 实时协作：多个设计师可以同时在一个文件上工作，提高团队效率。
为开发人员设计
- 检查模式：开发人员可以轻松获取设计的 CSS、HTML 和 SVG 代码。
- 精确规格：Penpot 提供准确的尺寸、颜色和其他设计规格，减少猜测工作。
- 设计令牌：开发人员可以直接使用设计中定义的颜色、字体和其他样式变量。
- 版本控制：Penpot 支持版本历史，便于跟踪设计变更。
- API 和 Webhooks：允许将 Penpot 集成到现有的开发工作流中。
团队协作
- 实时评论：团队成员可以直接在设计上添加评论，促进有效沟通。
- 权限管理：灵活的权限系统确保正确的人员访问正确的内容。
- 共享库：团队可以创建和共享设计资源，保持一致性。
- 导出选项：支持多种格式的导出，满足不同场景需求。
安装 Penpot
Penpot 提供多种安装方式，技术能力较强的用户可以通过 Docker 镜像部署。部署过程中需要配置多个组件，包括前端、后端、导出器，以及两个数据库 PostgreSQL 和 Redis。如果需要实现高可用，还需引入对象存储。
对于没有技术背景的用户也不用担心，Sealos 应用商店提供了一键部署的模板，只需点击鼠标即可完成，非常顺畅。而且无需额外购买具有公网 IP 的服务器，按量付费即可，经济又方便。
如果你想快速部署 Penpot，又不想被繁琐的安装和配置过程困扰，Sealos 是一个绝佳选择。打开 Penpot 应用模板，点击右上角的“去 Sealos 部署”，即可轻松完成部署。
首次使用 Sealos 时，您需要先注册并登录 Sealos 公有云账号。成功登录后，系统将立即引导您进入模板部署页面，快速开启您的使用之旅！
什么都不用填，直接点击右上角的 “部署应用” 开始部署。部署完成后，直接点击前端应用的 “详情” 进入前端应用的详情页面。
等待应用状态变成 running 之后，直接点击外网地址便可打开 Penpot 的 Web 界面。
首先点击 “创建账户” 注册一个账号：
填一下问卷，总共有五步：
填完之后就可以开始正式使用了，你可以选择创建团队，也可以自己独立使用。
除此之外，还有另外一种打开方式，先刷新 Sealos 桌面 (也就是在 cloud.sealos.run 界面刷新浏览器)，然后你就会发现 Sealos 桌面多了个图标：
直接点击这个图标就可以打开 Penpot 的 Web 界面。
是不是觉得眼熟？没错，这和 Windows 的快捷方式非常相似！
单机操作系统能做到的，Sealos 云操作系统同样能够轻松实现
Penpot 的基本使用
正式开始使用 Penpot 之前，首先要掌握一些基本概念和操作方法。
画板
画板是 Penpot 中最基本的容器对象，通常用于创建特定尺寸的设计。你可以根据你的需要，选择一个特定的屏幕或打印用的尺寸。
- 创建画板：使用工具栏中的画板工具，或按快捷键 B。
- 选择画板：点击画板名称或 Ctrl/⌘ + 点击画板区域。
- 设置缩略图：选中画板，右键选择 “Set as thumbnail” 或按 Shift + T。
- 剪裁内容：画板可以选择是否剪裁其内容。
- 在查看模式显示：控制画板是否作为单独屏幕在查看模式中显示。
色盘
Penpot 提供了强大的颜色管理工具，包括颜色选择器和颜色面板。
颜色选择器
- 吸管工具：从视窗中的任何对象拾取颜色。
- 颜色配置：在 RGB、色轮或 HSV 之间切换。
- 颜色类型：纯色、线性渐变、径向渐变或图像。
- 滑块：调整亮度、饱和度或不透明度。
- 数值：精确设置红 (R)、绿 (G)、蓝 (B) 和透明度 (A) 值。
- 库：在最近使用的颜色和库之间切换。
颜色面板
- 可以通过主菜单、工具栏按钮或颜色选择器中的启动器显示/隐藏。
- 使用菜单在库之间切换。
- 可以切换大小缩略图大小。
组件
组件是可以在多个文件中重复使用的对象或对象组，有助于保持设计的一致性。
创建组件
- 选择一个对象或一组对象。
- 按 Ctrl + K 或右键选择 “Create component”。
组件操作
- 复制组件：创建链接到主组件的组件副本。
- 复制为主组件：从资产侧边栏复制为新的主组件。
- 删除主组件：谨慎操作，会同时删除资产库中的组件。
- 恢复主组件：可以从组件副本恢复已删除的主组件。
- 组件分组：使用斜杠 (/) 命名或使用 “Group” 选项创建组件组。
- 查找组件：可以在资产面板和设计视口中查找组件。
组件覆盖
- 允许在保持与主组件同步的同时修改特定副本。
- 可以重置覆盖以恢复到主组件状态。
组件交换
允许轻松替换组件副本：
- 选择一个组件副本。
- 在右侧边栏中点击组件名称启动交换菜单。
- 选择要交换的组件并点击。
原型设计
Penpot 允许通过连接画板来创建交互原型，模拟用户如何在屏幕间导航。
连接画板
- 打开至少包含两个画板的文件。
- 在右侧边栏激活 “Prototype mode”。
- 选择触发交互的图层。
- 从选中图层拖动连接到目标画板。
- 自动创建流程起点。
- 在查看模式中启动交互原型。
交互触发器
定义启动交互的用户动作，包括：
- 点击 (On click)
- 鼠标进入 (Mouse enter)
- 鼠标离开 (Mouse leave)
- 延迟后 (After delay)
交互动作
定义触发交互后发生的事件，包括：
- 导航到 (Navigate to)
- 打开叠加层 (Open overlay)
- 切换叠加层 (Toggle overlay)
- 关闭叠加层 (Close overlay)
- 上一屏幕 (Previous screen)
- 打开 URL(Open URL)
交互动画
定义触发交互时画板之间的过渡效果，包括：
- 溶解 (Dissolve)
- 滑动 (Slide)
- 推送 (Push)
流 (Flows)
允许在同一页面内定义多个起点，以更好地组织和展示原型：
- 自动创建起点
- 从原型侧边栏添加起点
- 从画板菜单添加起点
- 在查看模式中切换不同流程
固定元素
可以固定对象在滚动时的位置，适用于原型设计中的固定头部、导航栏和浮动按钮等元素。
Figma 导出
Penpot 提供了一款 Figma 插件，可以用于导出 Figma 设计稿，支持导出基本形状、面板、组和填充功能，同时对文本和图像也有基础功能的支持。然而，目前仍然缺乏对自动布局、组件等关键功能的支持。
