开源设计工具Penpot和Excalidraw：Figma的免费自托管替代方案
为什么设计师需要免费替代方案？
Figma是目前最流行的UI设计工具，但它并不便宜。每个编辑者每月$15，一个5人设计团队一年就要$900。更让人不安的是，2022年Adobe宣布以200亿美元收购Figma，这让很多设计师开始担心：免费版还能用多久？功能会不会继续缩减？
好消息是，开源社区已经给出了答案：Penpot和Excalidraw。这两款工具各有侧重，组合使用基本可以覆盖Figma 80%以上的使用场景。
付费工具定价分析
Figma：$15/月/编辑者
Figma的定价结构：
- 免费版：最多3个文件项目，无限查看者
- Professional版：$15/月/编辑者，无限文件项目，团队库，分支和合并
- Organization版：$45/月/编辑者，SSO、分析、私有插件
- Enterprise版：$75/月/编辑者，高级安全、专属支持
Figma的收费逻辑是按"编辑者"计费，查看者免费。这意味着如果你的设计团队有5个设计师+10个开发者查看，你只需付5个人的钱。但$15/月/人的价格对于小团队和自由职业者来说仍然不低。
Sketch：$12/月/编辑者
Sketch的定价：
- Standard版：$12/月/编辑者，包含Sketch Mac应用和Web查看器
- 只能在macOS上使用，这是最大的限制
- 需要额外付费购买第三方协作工具
Sketch曾经是设计界的标杆，但macOS独占和协作功能的缺失让它逐渐被Figma超越。
免费替代方案详解
方案一：Penpot — 最接近Figma的开源替代品
Penpot是由西班牙公司Kaleidos开发的开源设计和原型平台。它是最接近Figma功能的开源替代品，支持实时协作、矢量编辑、组件系统等核心功能。
安装步骤
# 方式一：使用Docker Compose（推荐）
git clone https://github.com/penpot/penpot.git
cd penpot/docker
cp env.example .env
# 编辑.env文件，配置域名和邮件
docker compose up -d
# 方式二：使用官方Docker镜像
# 下载docker-compose.yml
curl -O https://raw.githubusercontent.com/penpot/penpot/main/docker/docker-compose.yml
# 创建.env文件
cat > .env << 'EOF'
PENPOT_FLAGS=enable-registration enable-login-with-password disable-email-verification
PENPOT_PUBLIC_URI=http://localhost:9080
PENPOT_SECRET_KEY=my-super-secret-key-change-me
PENPOT_POSTGRES_PASSWORD=penpot-postgres-password
PENPOT_REDIS_URI=redis://redis/0
EOF
docker compose up -d
# 方式三：使用在线版（无需安装）
# 访问 https://design.penpot.app
使用示例
- 创建项目：登录后点击"Create new project"
- 设计页面：使用左侧工具栏创建矩形、圆形、文本等元素
- 创建组件：选中元素 → 右键 → Create component
- 原型交互：切换到Prototype模式，拖拽连接页面创建交互
- 团队协作：邀请团队成员，实时看到彼此的编辑
- 导出资源：支持SVG、PNG、PDF格式导出
核心优势
- 完全开源，可自托管，数据完全在你手中
- SVG原生支持，导出质量高
- 实时协作功能完整
- 支持组件系统和设计token
- 活跃的社区和持续更新
- 支持导入SVG文件
方案二：Excalidraw — 最适合白板和草图的工具
Excalidraw是一个开源的虚拟白板工具，以手绘风格著称。它特别适合头脑风暴、架构图、流程图等场景，但不适合精细的UI设计。
安装步骤
# 方式一：直接使用在线版（推荐）
# 访问 https://excalidraw.com
# 方式二：Docker自托管
git clone https://github.com/excalidraw/excalidraw.git
cd excalidraw
docker build -t excalidraw .
docker run -d -p 3000:3000 --name excalidraw excalidraw
# 方式三：npm本地运行
git clone https://github.com/excalidraw/excalidraw.git
cd excalidraw
yarn install
yarn start
# 访问 http://localhost:3000
# 方式四：嵌入到你的项目中
npm install @excalidraw/excalidraw
使用示例
- 基础绘图：打开 https://excalidraw.com，选择工具开始绘制
- 实时协作：点击"Live collaboration" → "Start session" → 分享链接
- 嵌入图片：直接拖拽图片到画布
- 导出：支持PNG、SVG、导出为Excalidraw JSON格式
- 集成使用：作为React组件嵌入到你的应用中
// 作为React组件使用
import { Excalidraw } from "@excalidraw/excalidraw";
function App() {
return (
<div style={{ height: "100vh" }}>
<Excalidraw />
</div>
);
}
核心优势
- 极致轻量，首屏加载几乎瞬间
- 手绘风格独特，适合头脑风暴和草图
- 实时协作功能完善
- 可嵌入到其他应用中
- 支持端到端加密的实时协作
- 支持离线使用（PWA）
方案三：Lunacy — 免费但不开源的设计工具
Lunacy是由Icons8开发的免费设计工具，定位是Sketch的替代品。虽然不开源，但完全免费使用。
安装步骤
# 下载安装包
# Windows: https://icons8.com/lunacy (MSIX安装包)
# macOS: App Store搜索Lunacy
# Linux: Snap安装
sudo snap install lunacy
# 或者直接从官网下载
# https://icons8.com/lunacy
使用示例
- 打开Lunacy，创建新文档
- 使用矢量工具设计界面
- 利用内置的Icons8素材库（免费图标、照片、插画）
- 使用AI功能自动布局
- 导出为Sketch、Figma或PNG格式
核心优势
- 完全免费，无功能限制
- 内置大量免费素材（图标、照片、插画）
- 支持Sketch文件格式
- AI辅助设计功能
- 支持Windows、macOS、Linux
功能对比表
| 功能 | Figma ($15/月) | Sketch ($12/月) | Penpot (免费) | Excalidraw (免费) | Lunacy (免费) |
|---|---|---|---|---|---|
| 矢量编辑 | ✅ | ✅ | ✅ | ✅ | ✅ |
| 实时协作 | ✅ | ❌(需第三方) | ✅ | ✅ | ✅ |
| 原型设计 | ✅ | ✅(需插件) | ✅ | ❌ | ✅ |
| 组件系统 | ✅ | ✅ | ✅ | ❌ | ✅ |
| 设计Token | ✅ | ❌ | ✅ | ❌ | ❌ |
| 手绘风格 | ❌ | ❌ | ❌ | ✅ | ❌ |
| 自托管 | ❌ | ❌ | ✅ | ✅ | ❌ |
| 跨平台 | Web | macOS | Web | Web | 全平台 |
| 离线使用 | ❌ | ✅ | ❌ | ✅(PWA) | ✅ |
| 插件生态 | 丰富 | 丰富 | 基础 | ❌ | 基础 |
| AI功能 | ✅ | ❌ | ❌ | ❌ | ✅ |
| 免费素材库 | ❌ | ❌ | ❌ | ❌ | ✅ |
| 导入Sketch文件 | ✅ | N/A | ❌ | ❌ | ✅ |
| SVG原生支持 | ✅ | ✅ | ✅ | ✅ | ✅ |
| 学习成本 | 中等 | 中等 | 中等 | 极低 | 低 |
我的推荐
根据不同的使用场景：
如果你需要完整的UI设计能力，选Penpot：它是最接近Figma的开源替代品，组件系统、实时协作、原型设计一应俱全。自托管后数据完全在你手中，不用担心Adobe收购后的变化。
如果你需要快速草图和头脑风暴，选Excalidraw：手绘风格独特，实时协作流畅，非常适合团队讨论和架构设计。它甚至可以嵌入到你的产品中作为白板功能。
如果你想要免费且不开源的全功能工具，选Lunacy：内置素材库是杀手级功能，AI辅助设计也很实用。适合独立设计师和小团队。
最佳组合方案：日常UI设计用Penpot，快速草图和头脑风暴用Excalidraw。两者都是开源免费的，可以覆盖绝大多数设计场景。
迁移指南：从Figma迁移到Penpot
- 导出Figma资源：在Figma中选择需要迁移的页面 → Export as SVG
- 导入Penpot：在Penpot中创建新项目 → File → Import SVG
- 重建组件系统：Penpot的组件系统与Figma类似，但需要手动重建
- 迁移设计Token：使用Penpot的Design Token功能重新定义颜色、字体等
- 迁移原型：在Penpot的Prototype模式中重新创建交互
- 团队协作设置：邀请团队成员，配置权限
自托管Penpot生产环境部署建议
如果你决定在生产环境使用Penpot，以下是一些建议：
# 推荐的服务器配置
# - CPU: 4核以上
# - 内存: 8GB以上
# - 存储: 50GB以上SSD
# - 操作系统: Ubuntu 22.04 LTS
# 使用Nginx反向代理
sudo apt install nginx
sudo nano /etc/nginx/sites-available/penpot
# 添加以下配置
server {
listen 80;
server_name penpot.yourdomain.com;
location / {
proxy_pass http://localhost:9080;
proxy_set_header Host \;
proxy_set_header X-Real-IP \;
proxy_set_header X-Forwarded-For \;
proxy_set_header X-Forwarded-Proto \;
}
}
# 启用SSL
sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d penpot.yourdomain.com
总结
Figma的商业化和Adobe的收购让设计师们开始寻找替代方案。Penpot和Excalidraw这两款开源工具各有特色，组合使用可以覆盖Figma 80%以上的使用场景。
最重要的是：它们都是免费的。与其每年花$180（个人）到$900（5人团队）在Figma上，不如把这些钱省下来，投资在真正能提升设计效率的工具上。
开源设计工具的时代已经到来，现在是最好的迁移时机。
评论