Figma太贵?这个开源设计平台,支持自托管,设计即代码

朋友们!设计工具太贵还被绑定?
你是不是经常遇到这些困扰:
- Figma太贵:团队协作需要付费,而且价格越来越高
- 数据不安全:设计稿存放在第三方云端,担心数据泄露
- 设计开发脱节:设计师设计的效果,开发还原不出来
- 无法自托管:想在公司内网部署,却没有合适的方案
- 设计系统难维护:设计令牌、组件库难以统一管理
- AI集成困难:想让AI参与设计流程,却没有合适的接口
今天我要给大家分享一个 GitHub 上的宝藏项目——Penpot!这是一款面向团队的开源设计平台,支持实时协作、设计即代码、设计令牌、MCP服务器,可自建部署,完全免费开源!
✨ 什么是 Penpot?
Penpot 是一款面向团队的开源设计平台,专为大规模构建数字产品而设计。它的核心优势在于让您完全拥有设计基础设施的所有权,基于开源技术构建,支持自托管部署,让团队完全控制设计环境,满足严格的合规和治理要求。
核心特点:
- 🔓 开源免费:完全开源,无任何隐藏费用
- 🏠 支持自托管:可部署在自己的服务器上,数据完全自主可控
- 🎨 设计即代码:设计以代码形式表达,开发者可以直接理解和使用
- 🔄 实时协作:多人实时协作设计,支持团队协作
- 🎯 设计令牌:原生设计令牌支持,确保设计一致性
- 🔌 MCP服务器:支持设计和代码之间的双向工作流
- 📡 开放API:强大的开放API和插件系统,支持自动化和AI工作流
- 📱 响应式设计:支持 CSS Grid 和 Flex Layout,设计响应式界面
- 🌐 开放标准:支持 SVG、CSS、HTML、JSON 等开放标准

🎯 核心功能
1. 实时协作设计
Penpot 支持多人实时协作,团队成员可以同时编辑同一个设计文件:
- 多人实时编辑- 实时光标显示- 评论和标注- 版本历史- 设计评审
2. 设计即代码
Penpot 最大的特色之一就是设计以代码形式表达,这让开发者可以直接理解和使用设计:
- 设计以 JSON 格式存储- 支持 SVG、CSS、HTML 导出- Inspect 模式提供即时代码访问- 设计可以直接转换为代码- 开发者可以轻松理解设计意图
3. 设计令牌(Design Tokens)
原生设计令牌支持,提供设计和开发之间的单一事实来源:
- 原生设计令牌支持- 确保设计一致性- 简化设计系统管理- 支持复杂设计系统- 设计和开发共享同一来源
4. MCP 服务器
MCP(Model Context Protocol)服务器实现设计和代码之间的双向工作流:
- 支持设计到代码的转换- 支持代码到设计的更新- AI可以读取和理解设计- 实现自动化工作流- 集成现有工具和系统
5. 响应式设计
支持 CSS Grid 和 Flex Layout,从一开始就设计出像真实代码一样响应的界面:
- CSS Grid 布局支持- Flex Layout 支持- 响应式断点设置- 设计真实的响应式界面- 从设计到代码无缝转换
🚀 部署方式
方式一:使用 SAAS 版本
方式二:Docker 部署(推荐)
# 创建目录mkdir penpot && cd penpot
# 创建 docker-compose.yamlcurl -o docker-compose.yaml https://raw.githubusercontent.com/penpot/penpot/main/docker/images/docker-compose.yaml# 启动服务docker compose up -d# ============================== Penpot 配置说明 ==============================# 功能开关标识列表(可在PENPOT_FLAGS中按需增删)# demo-users: 内置演示账号# email-verification: 注册邮箱验证# log-emails: 打印邮件日志# log-invitation-tokens: 打印邀请链接Token日志# login-with-github: GitHub第三方登录# login-with-gitlab: GitLab第三方登录# login-with-google: Google第三方登录# login-with-ldap: LDAP登录# login-with-oidc: OIDC统一身份登录# login-with-password: 账号密码登录# prepl-server: 开启调试PREPL服务# registration: 允许自助注册账号# secure-session-cookies: 会话Cookie启用安全加密(公网部署必须开启)# smtp: 启用邮件发送服务# smtp-debug: SMTP通信调试日志# telemetry: 匿名使用数据上报# webhooks: WebHook回调能力# 官方完整配置文档:https://help.penpot.app/technical-guide/configuration/#penpot-configuration# 安全警告:公网对外部署务必删除 disable-secure-session-cookies、disable-email-verification 关闭项# ============================================================================
# 全局功能开关配置x-flags: &penpot-flags PENPOT_FLAGS: disable-email-verification enable-smtp enable-prepl-server disable-secure-session-cookies enable-mcp
# Penpot前端访问公网地址x-uri: &penpot-public-uri PENPOT_PUBLIC_URI: http://localhost:9001
# HTTP请求体大小限制(上传大设计文件使用)x-body-size: &penpot-http-body-size # 最大单请求Body上限 PENPOT_HTTP_SERVER_MAX_BODY_SIZE: 367001600 # 兼容旧版变量(已废弃,仅做向下兼容保留) PENPOT_HTTP_SERVER_MAX_MULTIPART_BODY_SIZE: 367001600
# Penpot主密钥,用于会话、邀请链接等子密钥派生# 推荐使用512位Base64随机字符串生成,生成命令:python3 -c "import secrets; print(secrets.token_urlsafe(64))"x-secret-key: &penpot-secret-key PENPOT_SECRET_KEY: change-this-insecure-key
# 自定义Docker网络,所有服务互通networks: penpot:
# 持久化数据卷volumes: penpot_postgres_v15: # PostgreSQL数据库存储卷 penpot_assets: # 上传素材、设计文件存储卷
services: # 前端页面服务,用户访问入口 penpot-frontend: image: "penpotapp/frontend:${PENPOT_VERSION:-2.16}" restart: always ports: - 9001:8080 volumes: - penpot_assets:/opt/data/assets # 依赖服务启动完成后再启动前端 depends_on: - penpot-backend - penpot-exporter - penpot-mcp networks: - penpot environment: << : [*penpot-flags, *penpot-http-body-size, *penpot-public-uri]
# Penpot后端核心业务服务 penpot-backend: image: "penpotapp/backend:${PENPOT_VERSION:-2.16}" restart: always volumes: - penpot_assets:/opt/data/assets # 等待数据库、缓存健康就绪再启动 depends_on: penpot-postgres: condition: service_healthy penpot-valkey: condition: service_healthy networks: - penpot environment: << : [*penpot-flags, *penpot-public-uri, *penpot-http-body-size, *penpot-secret-key] # PostgreSQL数据库连接配置 PENPOT_DATABASE_URI: postgresql://penpot-postgres/penpot PENPOT_DATABASE_USERNAME: penpot PENPOT_DATABASE_PASSWORD: penpot # Valkey缓存(原Redis),用于WebSocket实时通知 PENPOT_REDIS_URI: redis://penpot-valkey/0 # 文件存储配置:本地文件系统模式 PENPOT_OBJECTS_STORAGE_BACKEND: fs PENPOT_OBJECTS_STORAGE_FS_DIRECTORY: /opt/data/assets # 匿名使用数据上报 PENPOT_TELEMETRY_ENABLED: "true" PENPOT_TELEMETRY_REFERER: compose # SMTP邮件发送配置(当前使用内置邮件捕获容器) PENPOT_SMTP_HOST: penpot-mailcatch PENPOT_SMTP_PORT: 1025 PENPOT_SMTP_USERNAME: PENPOT_SMTP_PASSWORD: PENPOT_SMTP_TLS: "false" PENPOT_SMTP_SSL: "false"
# MCP服务扩展组件 penpot-mcp: image: "penpotapp/mcp:${PENPOT_VERSION:-2.16}" restart: always networks: - penpot
# 图纸导出服务(生成图片/PDF等导出能力) penpot-exporter: image: "penpotapp/exporter:${PENPOT_VERSION:-2.16}" restart: always depends_on: penpot-valkey: condition: service_healthy networks: - penpot environment: << : [*penpot-secret-key] # 内部网络访问前端地址,用于渲染导出 PENPOT_PUBLIC_URI: http://penpot-frontend:8080 # 连接Valkey缓存 PENPOT_REDIS_URI: redis://penpot-valkey/0
# PostgreSQL 数据库存储业务数据 penpot-postgres: image: "postgres:15" restart: always stop_signal: SIGINT # 数据库健康检测,等待就绪再提供服务 healthcheck: test: ["CMD-SHELL", "pg_isready -U penpot"] interval: 2s timeout: 10s retries: 5 start_period: 2s volumes: - penpot_postgres_v15:/var/lib/postgresql/data networks: - penpot environment: - POSTGRES_INITDB_ARGS=--data-checksums - POSTGRES_DB=penpot - POSTGRES_USER=penpot - POSTGRES_PASSWORD=penpot
# Valkey缓存服务(兼容Redis协议),实时消息、会话缓存 penpot-valkey: image: valkey/valkey:8.1 restart: always # 缓存健康检测 healthcheck: test: ["CMD-SHELL", "valkey-cli ping | grep PONG"] interval: 1s timeout: 3s retries: 5 start_period: 3s networks: - penpot environment: # 限制最大内存及淘汰策略 - VALKEY_EXTRA_FLAGS=--maxmemory 128mb --maxmemory-policy volatile-lfu
# 测试用邮件捕获服务,接收所有系统发送邮件,1080端口网页查看 # 生产环境请替换为真实SMTP服务器 penpot-mailcatch: image: sj26/mailcatcher:latest restart: always expose: - '1025' ports: - "1080:1080" networks: - penpot访问 http://localhost:9001 即可使用。
📝 使用指南
快速开始
- 访问 Penpot(SAAS 版本或自建部署)
- 注册账户,创建团队
- 创建新项目
- 开始设计
设计流程
1. 创建设计文件2. 使用设计令牌定义样式3. 创建组件和变体4. 设计响应式界面5. 团队协作评审6. 导出代码(SVG/CSS/HTML)7. 开发者实现8. 通过 MCP 更新设计开发者工作流
1. 使用 Inspect 模式查看代码2. 导出 SVG/CSS/HTML3. 理解设计令牌4. 实现设计5. 通过 API 更新设计6. 保持设计和代码同步📊 对比其他方案
| 方案 | 开源 | 自托管 | 设计即代码 | 设计令牌 | 团队协作 | 成本 |
|---|---|---|---|---|---|---|
| Penpot | ✅ | ✅ | ✅ | ✅ | ✅ | 🆓 |
| Figma | ❌ | ❌ | ❌ | ✅ | ✅ | 付费 |
| Sketch | ❌ | ❌ | ❌ | ✅ | ✅ | 付费 |
| Adobe XD | ❌ | ❌ | ❌ | ✅ | ✅ | 付费 |
| InVision | ❌ | ❌ | ❌ | ❌ | ✅ | 付费 |
📜 开源协议
Penpot 采用 MPL-2.0(Mozilla Public License 2.0)开源协议:
- 可以免费使用、修改和分发
- 修改后的代码需要开源
- 适合商业和非商业用途
📝 总结
Penpot 是一款功能强大的开源设计平台,特别适合需要自托管部署、设计开发协作的团队。它支持实时协作、设计即代码、设计令牌、MCP服务器等核心功能,让设计和开发之间的工作流更加顺畅。无论是初创团队还是大型企业,都能从中受益。如果你正在寻找一个替代 Figma 的开源方案,或者需要在公司内网部署设计工具,Penpot 绝对值得一试!
🌟 项目资源
官方网站: https://penpot.app
GitHub 地址: https://github.com/penpot/penpot
觉得项目不错的话,记得给作者点个 star 支持一下!
🎉 互动时间
你在团队协作设计中遇到过什么问题?最希望设计工具支持什么功能?欢迎在评论区和我交流分享!
我会定期分享更多好用的工具,记得关注我哦!
推荐阅读:
- GitHub热门项目!yantr:自托管应用商店,不占用系统资源,130+应用一键部署
- GitHub热门项目!BentoPDF:浏览器端隐私优先的PDF工具箱,50+工具一键搞定
- GitHub热门项目!PakePlus:网页秒变桌面应用
- 服务器到期宕机?域名过期被抢注?这个工具帮你守住所有服务
- GitHub 热门项目!DBX,15MB 搞定 40+ 数据库管理!
- 从Hexo到Astro Firefly:我的博客迁移之旅
- 自建图床又一选择?这个工具让你打造个人图片分享平台!
- 离线OCR神器!这个工具让图片文字轻松提取
- 保姆级教程!用PicList+GitHub搭建免费图床,超详细配置指南!
- 文件分发利器!这个工具让文件分享更安全
- Docker打包工具!这个Electron工具让镜像管理更高效!
- Redis管理神器!这个工具让你的数据操作更高效
- 又一个 Rust 神级编辑器!Fresh 让我放弃了 VS Code
如果您觉得这篇文章有帮助,请为小王点点推荐,谢谢!🌹
支持与分享
如果这篇文章对你有帮助,欢迎分享给更多人或打赏支持!
小王的博客














