Penpot — Open Source Design & Prototyping Platform

What Penpot Does

Penpot provides a complete design workflow:

• Vector Design: Full vector editing with pen tool, boolean operations, gradients, and effects
• Components: Reusable design components with variants, overrides, and auto-layout
• Prototyping: Interactive prototypes with transitions, animations, and user flows
• Real-time Collaboration: Multiple designers working simultaneously with live cursors
• Design Tokens: Centralized color, typography, and spacing tokens synced across designs
• Developer Handoff: Inspect mode with CSS code generation, measurements, and SVG export
• Grid & Layout: CSS Grid and Flexbox-based auto-layout for responsive designs

Architecture

┌──────────────┐     ┌──────────────┐     ┌──────────────┐
│  Frontend    │────▶│  Backend     │────▶│  PostgreSQL  │
│  (ClojureScript)│  │  (Clojure)   │     │  (Data)      │
└──────────────┘     └──────┬───────┘     └──────────────┘
                            │
                  ┌─────────┼─────────┐
                  │         │         │
           ┌──────┴──┐ ┌───┴───┐ ┌───┴───┐
           │  Redis   │ │ MinIO │ │Exporter│
           │  (Cache) │ │(Files)│ │ (PDF)  │
           └──────────┘ └───────┘ └────────┘

Self-Hosting

Docker Compose

services:
  penpot-frontend:
    image: penpotapp/frontend:latest
    ports:
      - "9001:80"
    depends_on:
      - penpot-backend
      - penpot-exporter

  penpot-backend:
    image: penpotapp/backend:latest
    environment:
      PENPOT_FLAGS: enable-registration enable-login-with-password
      PENPOT_DATABASE_URI: postgresql://penpot-postgres/penpot
      PENPOT_DATABASE_USERNAME: penpot
      PENPOT_DATABASE_PASSWORD: penpot
      PENPOT_REDIS_URI: redis://penpot-redis/0
      PENPOT_ASSETS_STORAGE_BACKEND: assets-fs
      PENPOT_STORAGE_ASSETS_FS_DIRECTORY: /opt/data/assets
    depends_on:
      - penpot-postgres
      - penpot-redis

  penpot-exporter:
    image: penpotapp/exporter:latest
    environment:
      PENPOT_PUBLIC_URI: http://penpot-frontend

  penpot-postgres:
    image: postgres:16
    environment:
      POSTGRES_DB: penpot
      POSTGRES_USER: penpot
      POSTGRES_PASSWORD: penpot
    volumes:
      - pg-data:/var/lib/postgresql/data

  penpot-redis:
    image: redis:7-alpine

volumes:
  pg-data:

Key Features

SVG-Native Design

Every element in Penpot is an SVG node. This means:

• Pixel-perfect export to SVG format
• Developers can directly use design output in web projects
• No format conversion or proprietary file handling
• CSS properties map 1:1 to design properties

Component System

Main Component
├── Variant: Primary
│   ├── Size: Small
│   ├── Size: Medium
│   └── Size: Large
├── Variant: Secondary
└── Variant: Ghost

Components support:

• Multi-level variants
• Slot overrides (text, color, icon)
• Auto-layout (Flexbox-based)
• Responsive constraints

Design Tokens

Define tokens once, use everywhere:

• Colors: Brand palette, semantic colors, surface colors
• Typography: Font families, sizes, weights, line heights
• Spacing: Consistent spacing scale
• Shadows & Effects: Reusable shadow and blur definitions

Inspect Mode

Developers can inspect any element to get:

• Exact CSS code (position, size, colors, fonts)
• Measurements between elements
• SVG markup for icons and shapes
• Asset downloads in multiple formats

Penpot vs Alternatives

常见问题

Q: Penpot 能完全替代 Figma 吗？ A: 对于大多数 UI 设计和原型制作需求，Penpot 已经足够强大。但 Figma 在插件生态、Dev Mode、和 FigJam 白板方面仍有优势。Penpot 的核心优势是 SVG 原生、数据自主和无供应商锁定。

Q: 设计文件可以从 Figma 导入吗？ A: 可以。Penpot 支持从 Figma 导入设计文件（.fig 格式），包括图层结构、组件和样式。部分高级 Figma 特性可能需要手动调整。

Q: 自托管需要什么配置？ A: 最低 4GB RAM + 2 核 CPU。推荐 8GB+ RAM 用于多人协作场景。需要 PostgreSQL、Redis 和文件存储（本地或 MinIO/S3）。

来源与致谢

• GitHub: penpot/penpot — 45.3K+ ⭐ | MPL-2.0
• 官网: penpot.app