在設計領域，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 版本帶來了一系列重大改進，進一步提升了設計和開發的協作體驗：
- 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 設計稿匯出，可支援基本形狀、皮膚、組、填充的匯出，文字、影像具有基本功能支援。但目前自動佈局、元件等關鍵的的功能都未能得到支援。
總結
雖然目前商業設計軟體如 Figma 在市場上佔據主導地位，但 Penpot 這樣的開源工具正在快速崛起，並可能在未來超越商業軟體。開源模式允許更多開發者參與，能夠帶來更快的創新速度和更強的功能適應性。同時，開源工具的透明性和可定製性，可能更好地滿足不同團隊的需求，最終成為行業新標準。