Penpot

Penpot 是首个专注于设计与代码协作的开源工具，允许设计师创建精美设计、交互式原型和大规模设计系统，同时为开发者提供即用代码，简化工作流程。它支持浏览器使用和自托管，基于开放标准（SVG、CSS 和 HTML），且完全免费。最新版本 2.5 于 2025 年 3 月发布，增强了渐变 UI 和协作功能。

Penpot 由西班牙公司 Kaleidos 于 2021 年推出，最初作为一个 alpha 版本发布，目标是打造一个免费、开源的设计与代码协作平台。2023 年正式脱离 beta 阶段，发布稳定版，标志着其成熟。2024 年 4 月的 2.0 版本引入了突破性的 CSS 网格布局和 UI 重设计，而 2025 年 3 月的 2.5 版本进一步优化了功能。

核心功能

Penpot 的设计围绕设计师和开发者的无缝协作，提供以下关键特性：

• 设计与代码一体化：设计直接生成 SVG、CSS 和 HTML 代码，开发者可直接使用，消除传统交付中的摩擦。
• 跨平台与自托管：基于 Web，支持所有主流浏览器，并可通过 Docker 等方式自托管，适合个人和企业用户。
• 插件系统：允许用户扩展功能，与其他应用集成，或开发定制解决方案。
• 检查模式：提供即时访问代码的检查选项卡，简化从设计到开发的工作流程。
• 协作功能：支持实时协作，团队成员可同时编辑设计，类似 Figma 的多人编辑体验。
• 设计系统支持：提供组件、令牌和共享库，促进设计的一致性和可扩展性。
• 交互式原型：支持创建逼真的用户流程和交互，便于测试和展示。

Penpot 2.5 更新亮点

2025 年 3 月 5 日发布的 2.5 版本带来了多项增强功能：

• 重新设计的渐变 UI：支持多点渐变和径向渐变，提升设计灵活性。
• 可共享画板链接：用户可生成指向特定画板的链接，便于团队协作和反馈。
• 复制 CSS 和形状样式：支持复制填充、描边、阴影等样式，优化工作效率。
• 用户交互改进：包括侧边栏过滤器、视觉调整，以及评论和提及通知的增强。
• 画板调整与重命名：可调整画板大小以适应内容，并使用画板名称重命名选定图层。
• 错误修复：解决了媒体资产处理的内部 bug，并包含其他小幅改进。

这些更新表明 Penpot 在用户体验和协作功能上持续迭代，力求与 Figma 等商业工具竞争。

与 Figma 的比较

Penpot 和 Figma 都是 Web 设计与原型工具，但有显著差异：

Penpot 的优势在于免费和自托管选项，适合预算有限的团队或注重数据隐私的企业。Figma 则在功能深度和生态系统上领先，但其订阅模式和高成本可能让部分用户望而却步。

适用场景与用户群体

• 设计师：创建 UI/UX 设计、交互原型和设计系统，享受无限画布和组件复用。
• 开发者：直接获取代码，集成到开发流程，减少与设计师的沟通成本。
• 小型团队与初创公司：免费特性降低成本，自托管保障数据控制。
• 教育与开源社区：学生、教师和开源爱好者可利用其开放性和社区资源。

社会影响与市场地位

Penpot 的开源性质使其成为设计工具领域的颠覆者，尤其在 Figma 被 Adobe 收购（2022 年）后，用户对其潜在价格上涨和功能限制的担忧推动了 Penpot 的流行。2022 年设计工具调查显示，Figma 占据主导地位，但 Penpot 的用户群在过去几年快速增长，尤其在开源社区和中小型企业中。

其意外优势在于插件系统和自托管能力，这不仅吸引个人用户，还可能吸引企业客户寻求定制化解决方案。此外，社区贡献（插件、模板、翻译）加速了其发展，使其功能不断接近商业对手。

技术与实现

Penpot 使用 Clojure 和 ClojureScript 开发，基于 SVG 标准，支持矢量编辑和布尔运算。2.0 版引入的 Flex 布局和 CSS 网格布局使其设计更具响应性，而 Webhooks 和 API 支持增强了与开发工具链的集成。2.5 版的渐变 UI 和协作功能进一步优化了用户体验。

潜在挑战

尽管 Penpot 发展迅速，但仍面临挑战：

• 功能差距：与 Figma 相比，部分高级功能（如复杂动画）尚不完善。
• 社区依赖：开发进度依赖社区贡献，可能导致更新速度不稳定。
• 学习曲线：新用户可能需要适应其界面和代码导向的设计方式。