Penpot：开源设计协作神器，Figma的最佳替代方案

用户699622880605
6 阅读8分钟

Penpot：开源设计协作神器，Figma的最佳替代方案

背景

说到 UI 设计工具，Figma 无疑是行业标准。但 Figma 存在一些问题：

  • 价格昂贵：专业版每个编辑者 45/月，团队版45/月，团队版 75/人/月
  • 网络问题：国内访问经常卡顿，同步不稳定
  • 数据隐私：设计文件存储在第三方服务器
  • 格式锁定：使用自有文件格式，导出受限

当 Adobe 收购 Figma 的消息传出后，许多设计师和开发者开始寻找开源替代方案。

Penpot 应运而生——这是一款开源的 Web UI/UX 设计工具，专为设计师和开发者协作设计，在 GitHub 上已获得 37K+ Star。

什么是 Penpot？

Penpot 是一款开源的设计与原型制作平台，由 Kaleidos 公司开发和维护。

核心特性：

特性说明
开源免费MPL 2.0 许可证，完全免费
Web 端运行基于浏览器，无需安装，跨平台
SVG 标准基于开放 Web 标准 (SVG)，导出方便
实时协作团队成员同时编辑，即时同步
组件系统创建可复用的设计组件和图标库
原型交互支持页面跳转、过渡动画等交互原型
自托管可部署在自己的服务器，数据完全可控

GitHub 地址： github.com/penpot/penp…

官网： penpot.app

在线使用： design.penpot.app

Penpot vs Figma

对比项PenpotFigma
价格完全免费$45-75/人/月
开源✅ MPL 2.0❌ 闭源
部署方式Web / 自托管仅云服务
文件格式SVG, JSON (开放格式)自有格式
平台浏览器全平台浏览器/桌面端
网络依赖可完全离线自托管必须联网
插件生态发展中成熟丰富
原型交互✅ 支持✅ 支持
组件系统✅ 支持✅ 支持
开发 handoffCSS/JSON 导出代码片段复制

Penpot 的独特优势：

  • 数据完全可控，可自托管
  • 基于开放标准，不被锁定
  • 设计师和开发者可以协作处理开放格式
  • 完全免费，无使用限制

快速上手

方式一：在线使用

直接访问 design.penpot.app，使用邮箱注册即可免费使用。

方式二：Docker 部署（推荐）

# 创建目录
mkdir penpot && cd penpot

# 下载 docker-compose.yml
curl -L https://raw.githubusercontent.com/penpot/penpot/main/docker/docker-compose.yml -o docker-compose.yml

# 启动服务
docker-compose up -d

# 访问
# http://localhost:9001

方式三：一键部署到 Sealos

# 使用 Sealos 一键部署
# 访问 https://cloud.sealos.run
# 输入邀请码: oUJyhzghFE
# 选择 Penpot 模板即可

基础界面介绍

Penpot 的界面与 Figma 类似：

┌──────────────────────────────────────────────────────────┐
│  顶部工具栏 (工具、缩放、分享、团队管理)                    │
├──────────┬───────────────────────────────────────────────┤
│          │                                               │
│  左侧    │              画布区域                           │
│  侧边栏  │         (设计工作区)                          │
│          │                                               │
│  - 资产  │                                               │
│  - 组件  │                                               │
│  - 页面  │                                               │
│          │                                               │
├──────────┴───────────────────────────────────────────────┤
│  右侧属性面板 (位置、大小、颜色、样式、交互)                  │
└──────────────────────────────────────────────────────────┘

核心功能详解

1. 矢量设计工具

Penpot 提供完整的矢量设计功能：

绘图工具：

工具用途
矩形创建方形和矩形元素
椭圆创建圆形和椭圆
文字添加文本和排版
路径自由绘制矢量形状
钢笔贝塞尔曲线绘制
铅笔手绘风格路径
图片导入位图图像

排版功能：

  • 支持 Google Fonts 字体库
  • 丰富的文本样式（字重、字距、行高、对齐）
  • 文字图层遮罩
  • 多语言支持

2. 组件系统

Penpot 的组件系统非常强大：

创建组件：

1. 选择设计元素
2. 右键 → "创建组件" (快捷键: Ctrl+Alt+K)
3. 输入组件名称
4. 组件出现在"资产"面板的"组件"区域

组件变体：

1. 创建多个组件变体
2. 选中所有变体
3. 右键 → "创建组件组"
4. 在设计时可通过下拉切换变体

组件状态：

支持为组件设置不同状态：

  • Default（默认）
  • Hover（悬停）
  • Active（按下）
  • Disabled（禁用）
  • Focused（聚焦）

3. 样式系统

Penpot 支持多种可复用样式：

颜色样式：

1. 创建颜色
2. 在"资产"面板添加"颜色"
3. 命名并保存
4. 在设计中应用

文字样式：

1. 设置文字属性（字体、大小、颜色等）
2. 在"资产"面板添加"文字样式"
3. 命名并保存
4. 统一修改所有应用此样式的文字

描边与填充样式：

  • 可复用的描边样式
  • 可复用的渐变填充
  • 可复用的投影效果

4. 原型交互

Penpot 支持创建交互原型：

添加交互：

1. 选中元素
2. 右侧面板 → "交互"选项卡
3. 点击"添加交互"
4. 配置触发条件和动作

交互类型：

交互说明
点击元素被点击时触发
悬停鼠标悬停时触发
按下鼠标按下时触发
拖动拖动元素时触发
加载时页面加载时触发
定时器延迟后触发

动作类型：

动作说明
打开页面跳转到指定页面
打开链接在新标签打开 URL
返回返回上一页
切换可见性显示/隐藏元素
切换组件状态切换组件变体

过渡动画：

动画说明
淡入/淡出透明度变化
滑入/滑出位置移动
缩放大小变化
即时无动画

5. 团队协作

Penpot 提供完整的团队协作功能：

邀请团队成员：

1. 点击右上角"分享"
2. 输入成员邮箱
3. 选择角色权限
4. 发送邀请

角色权限：

角色权限
Owner完全控制，可删除团队
Admin管理成员和项目设置
Editor可编辑项目
Viewer仅可查看

实时协作：

  • 团队成员同时编辑
  • 头像显示当前编辑者
  • 即时同步，无冲突

6. 开发 Handoff

Penpot 专为开发者提供便利：

导出代码：

1. 选中设计元素
2. 右侧面板 → "代码"选项卡
3. 查看 CSS 属性
4. 点击复制按钮

导出格式：

格式用途
SVG矢量图形，可直接用于 Web
PNG位图图像
JSON设计数据，可程序化处理
CSS样式代码片段

开发者视角：

- 右侧面板显示完整 CSS 属性
- 可查看颜色 HEX/RGB 值
- 可查看字体和字号
- 可复制 SVG 代码

自托管部署

Docker Compose 完整配置

version: '3.8'

services:
  penpot:
    image: penpotapp/penpot:latest
    container_name: penpot
    restart: unless-stopped
    ports:
      - "9001:9001"
    environment:
      - PENPOT_FLAGS=enable-registration enable-smtp
      - PENPOT_DATABASE_URI=postgresql://postgres:penpot@db:5432/penpot
      - PENPOT_REDIS_URI=redis://redis:6379/0
      - PENPOT_SECRET_KEY=your-secret-key-here
      - PENPOT_ADMIN_EMAIL=admin@example.com
      - PENPOT_SMTP_HOST=smtp.example.com
      - PENPOT_SMTP_PORT=587
      - PENPOT_SMTP_USER=smtp_user
      - PENPOT_SMTP_PASSWORD=smtp_password
      - PENPOT_SMTP_FROM=penpot@example.com
    depends_on:
      - db
      - redis

  db:
    image: postgres:15-alpine
    container_name: penpot-db
    restart: unless-stopped
    environment:
      - POSTGRES_USER=postgres
      - POSTGRES_PASSWORD=penpot
      - POSTGRES_DB=penpot
    volumes:
      - postgres_data:/var/lib/postgresql/data

  redis:
    image: redis:7-alpine
    container_name: penpot-redis
    restart: unless-stopped
    volumes:
      - redis_data:/data

volumes:
  postgres_data:
  redis_data:

# 启动服务
docker-compose up -d

# 首次访问需要创建管理员账号
# http://localhost:9001

环境变量说明

变量说明必需
PENPOT_DATABASE_URIPostgreSQL 连接地址✅
PENPOT_REDIS_URIRedis 连接地址✅
PENPOT_SECRET_KEY加密密钥（随机字符串）✅
PENPOT_ADMIN_EMAIL管理员邮箱✅
PENPOT_FLAGS特性开关❌
PENPOT_SMTP_*邮件服务配置❌

实战技巧

技巧1：使用网格系统

1. 右侧面板 → 画布设置
2. 添加网格 (Grid)
3. 设置列数、间距、边距
4. 开启"显示网格"便于对齐

技巧2：快速复制样式

1. 选中元素
2. 按住 Alt 键
3. 拖动到目标元素
4. 样式被复制

技巧3：批量重命名

1. 在图层面板选中多个图层
2. 右键 → "重命名"
3. 输入名称模式，如 "Frame {n}"
4. 批量生成 Frame 1, Frame 2, Frame 3...

技巧4：利用约束布局

1. 选中帧或组件
2. 右侧面板 → "约束" (Constraints)
3. 设置相对父容器的定位
4. 如：固定底部、左右撑满

技巧5：设计系统工作流

1. 创建"设计系统"项目
2. 定义颜色样式、文字样式、组件
3. 在各项目中复用
4. 更新设计系统时，所有引用自动更新

常见问题

Q：Penpot 能否完全替代 Figma？

A：对于大多数设计场景，Penpot 可以满足需求。但 Figma 的插件生态非常成熟，某些专业功能（如高级自动布局）Penpot 还在完善中。建议根据团队具体需求选择。

Q：国内访问速度如何？

A：

  • 在线版：可能有卡顿，建议使用自托管
  • 自托管：部署在国内服务器访问流畅

Q：设计文件如何迁移？

A：Penpot 支持导入 Figma 的导出文件（需 Figma 导出为 .fig 或 .zip）。

Q：支持哪些浏览器？

A：Chrome、Firefox、Safari、Edge 等现代浏览器。

Q：是否支持离线使用？

A：自托管版本可在内网使用，完全离线。但设计功能本身需要浏览器在线操作。

适用场景

推荐使用：

  • 个人设计师和独立开发者
  • 小型设计团队
  • 需要数据隐私控制的团队
  • 追求成本控制的项目
  • 有自托管需求的企业

不推荐使用：

  • 需要复杂插件生态的场景
  • 对高级自动布局有强需求
  • 超大规模团队协作

总结

Penpot 用"开源 + Web + 协作"的组合，为 UI 设计提供了一个免费且可自托管的解决方案。

核心优势回顾：

  • 完全免费：无任何功能限制
  • 开源透明：代码可审计，可定制
  • 自托管可控：数据完全在己方服务器
  • 开放格式：SVG、JSON 等标准格式
  • 开发者友好：内置代码导出，协作顺畅
  • 跨平台：浏览器即可使用

对于追求免费、数据可控、不想被锁定的设计师和团队，Penpot 是 Figma 的最佳开源替代选择。

本文由无边界科技技术团队分享，专注软件开发与技术解决方案。

官网：wubianj.com

© 版权归无边界科技所有，版权所有。

avatar
文章
阅读
粉丝