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

FAQ

Q: Can Penpot fully replace Figma? A: For most UI design and prototyping needs, Penpot is already powerful enough. But Figma still has the edge in plugin ecosystem, Dev Mode, and FigJam whiteboards. Penpot's core advantages are SVG-native output, data ownership, and no vendor lock-in.

Q: Can design files be imported from Figma? A: Yes. Penpot supports importing Figma design files (.fig format), including layer structure, components, and styles. Some advanced Figma features may need manual adjustment.

Q: Self-hosting requirements? A: Minimum 4GB RAM + 2-core CPU. 8GB+ RAM is recommended for collaborative use. Requires PostgreSQL, Redis, and file storage (local or MinIO/S3).