说到 UI 设计工具，Figma 现在基本是一统江湖。

产品经理用它画原型，设计师用它做 UI，开发用它看标注，基本没有对手。2022 年 Adobe 宁可砸下 200 亿美元也要收购它，足以看出它在数字产品设计领域的统治力。

但天下没有免费的午餐，垄断的下一步就是精准收割。这两年 Figma 的“吸金”手段让不少团队直呼肉疼，算下来，一个 20 人的产品研发团队，光是给设计师和开发配齐席位，一年就要多掏大几万元的工具费。这笔订阅费就像流水一样，只要团队在运转，就得永远交下去。

价格是一方面，对国内很多特定行业来说，更致命的是安全红线。金融、医疗、智能制造等行业有严格的合规要求，核心设计资产是绝对不能托管在海外云端服务器上的。

在“高昂订阅制”与“数据云端化”的夹击下，有没有第三种选择？

有。这就是今天想和大家分享的开源设计工具——Penpot。

先说说 Penpot 是什么。简单讲，它是一个开源的设计平台，支持原型设计、UI 设计、设计系统管理，核心功能跟 Figma 这类工具差不多。

但它是开源的，你可以部署在自己的服务器上，也可以用它的云端版本，但不管哪种方式，你的项目都是你自己的。

而且它支持的全是开放标准——SVG、CSS、HTML、JSON。你导出来的设计稿，不是什么私有格式，而是业界通用的东西。SVG 是矢量图标准，CSS 是样式表标准，JSON 是数据交换标准。这些东西不会过时，不会因为某个公司倒闭就变成废纸。

还有就是实时协作功能。

在说 Figma 之前，得先提一下 Sketch。Sketch 是 macOS 上的一款设计工具，在 Figma 出现之前，它是 UI 设计领域的标配。设计师用它画界面、做组件库、开发再对照着写代码，这套流程延续了好几年。Sketch 很好，但有一个根本问题——它是桌面软件，文件传过来传过去，版本一多就乱套。

其实 Figma 真正打败 Sketch 的，就是实时协作这一招。以前用 Sketch，设计师画完了得导出文件发给开发，开发再对照着写代码，版本一多就乱套。Figma 出来之后，大家发现卧槽可以多人同时在一个画板里工作，你能看见我的光标，我能看见你画的图，有问题直接评论框里聊，这效率差的不是一点半点。

Penpot 也有这个能力。它是实时的，多个人可以同时编辑同一个项目。 而且因为它是开源的，你在自己服务器上跑的话，这个协作体验完完全全是你的，不存在什么数据经过别人服务器的概念。

你说这重要吗？对于小团队可能还好，对于中大型团队来说，设计稿里有多少机密信息、协作过程有多少数据，这些东西放在别人平台上，多少还是有点膈应。

说到这儿，可能有些做开发的朋友要问了：开放标准是挺好，但设计工具这东西，关键还是得跟开发流程打通啊。

这就说到了 Penpot 另一个让我觉得有意思的地方——它跟代码的结合程度。

它有个东西叫 Design Tokens，这东西是干啥的呢？就是你设计系统里的颜色、字体、间距、阴影这些元素，用一种统一的方式定义出来，然后设计师和开发者共用同一套数据。换句话说，设计师在 Penpot 里定义的蓝色，开发者那边拿到的代码也是同一个蓝色，不存在什么"设计稿是一个色，代码跑出来是另一个色"的尴尬。

它还有个 MCP 服务器。设计师在 Penpot 里画的图，AI 工具能直接理解里面的元素、层级、属性，然后生成对应的代码。这听着好像没什么，但实际操作过设计-开发对接的人都知道，传统流程里这部分信息损耗有多大。

另外，Penpot 支持 CSS Grid 和 Flex Layout。这两种布局方式是现代前端开发的主流，Penpot 能在设计阶段就让你用这些方式画界面，等于说设计稿从一开始就跟代码的思路对齐了。

说了这么多，怎么上手用起来？

方式一：直接用云端版

最简单的方式，是去 design.penpot.app 注册一个免费账号。邮箱、Google、GitHub 都能注册，不用填信用卡。注册完之后界面和 Figma 非常像，画板、图层、组件、导出，基本不需要额外学习成本。

方式二：自己部署

如果你想完全掌控数据，需要自己搭一套。官方推荐的方式是 Docker 部署，你需要准备：

• 一台服务器（或者自己的电脑），内存 4GB 起，建议 8GB
• 20GB 左右的硬盘空间
• 装了 Docker 和 docker compose具体步骤：第一步，在服务器上新建一个目录：mkdir penpot && cd penpot第二步，下载官方写好的配置文件：curl -o docker-compose.yaml https://raw.githubusercontent.com/penpot/penpot/main/docker/images/docker-compose.yaml第三步，启动：docker compose -p penpot -f docker-compose.yaml up -d等待几分钟镜像下载和容器启动，完成后浏览器访问 http://localhost:9001 就能看到界面了。

部署后怎么初始设置？

第一次打开会进入注册页面，默认可以直接创建账号（邮件验证默认是关闭的，适合内网使用）。

如果你想用域名访问（比如 penpot.yourcompany.com），而不是 IP 加端口，需要在配置里改一下 PENPOT_PUBLIC_URI，然后配一个 Nginx 或者 Caddy 做反向代理和 HTTPS。整个过程跟部署其他 Web 服务差不多，有经验的话不难。

方式三：一键部署（最懒人）

如果不想自己折腾服务器，可以走官方合作平台 Elestio，他们提供一键部署服务，DNS、SSL、备份都帮你搞定，适合没有运维团队但又想自托管的团队。

最后说两句。

在这个越来越强调"自主可控"的时代，设计工具这块，其实也需要考虑一下开源选项。

不是说要现在就切换过去，把整个团队的流程都改一遍，这不现实。

但如果你的团队正在评估设计工具、如果你对现有方案的某些方面不太满意、如果你对"把设计命脉放在别人手里"这件事有点膈应——可以了解一下 Penpot 这个项目，给自己多一个选择。

开源的好处就在这儿——它不会消失。只要有人在用，就有人维护，你不用担心哪天它突然就没了。这种安心感，可能是比任何功能特性都值钱的东西。

好了，今天就聊到这儿，如果有朋友用过 Penpot，或者对这个工具有什么想吐槽的，欢迎在评论区聊聊。