Penpot: Self-Hosted Open-Source Design Tool (Figma Alternative)

Figma is the dominant UI design tool, but it comes with limitations: subscription costs, data stored on Adobe's servers, and export restrictions that can complicate open-source projects.

Photo by Levart_Photographer on Unsplash

Penpot is the open-source alternative. It's a browser-based design and prototyping tool with real-time collaboration, vector editing, CSS properties, and an inspection panel — all self-hostable on your own server.

What Makes Penpot Different

Most Figma alternatives are either proprietary or desktop-only. Penpot stands out:

• Native SVG: Penpot files are SVG under the hood. This means designs are interoperable with other tools and easy to export.
• Open standards: Uses CSS for styling — properties shown in the panel map directly to CSS you can use in code
• Real-time collaboration: Multiple users can edit simultaneously, with cursors and presence indicators
• Self-hosted: Full control over your data, no vendor lock-in
• Free forever: No seat limits, no feature tiers on the self-hosted version

Penpot is built with Clojure/ClojureScript and PostgreSQL, which is an unusual stack but results in excellent stability.

Key Features

Design tools:

• Vector editing with bezier curves, boolean operations, masks
• Component library with variants and overrides
• Auto-layout (similar to Figma's constraint system)
• Grids, guides, and responsive design constraints
• Text styles and color palettes

Prototyping:

• Click-through prototypes with transitions and animations
• Hotspot linking between frames
• Shareable prototype links

Developer handoff:

• Inspect panel shows CSS, spacing, typography, and colors
• Export as SVG, PNG, JPEG, or PDF
• Shared design tokens

Installation with Docker Compose

Penpot provides an official Docker Compose configuration. The full stack runs several containers: the frontend app, backend API, exporter (for PDF/image exports), and PostgreSQL with Redis.

Download the official config:

curl -L https://raw.githubusercontent.com/penpot/penpot/main/docker/images/docker-compose.yaml -o docker-compose.yml
curl -L https://raw.githubusercontent.com/penpot/penpot/main/docker/images/config.env -o config.env

The config.env file contains key configuration options. At minimum, set:

# Disable registration if this is private
PENPOT_FLAGS=enable-login-with-password disable-registration

# SMTP for email (needed for invitations and password reset)
PENPOT_SMTP_ENABLED=true
PENPOT_SMTP_HOST=smtp.yourprovider.com
PENPOT_SMTP_PORT=587
PENPOT_SMTP_USERNAME=your-smtp-user
PENPOT_SMTP_PASSWORD=your-smtp-password
PENPOT_SMTP_TLS=true
[email protected]

# Public URI (important for sharing links and OAuth callbacks)
PENPOT_PUBLIC_URI=https://penpot.yourdomain.com

Start the stack:

docker compose up -d

Create your first admin user:

docker exec -ti penpot-penpot-backend-1 \
  ./manage.py create-profile \
  --email [email protected] \
  --fullname "Admin" \
  --password yourpassword

Access Penpot at http://localhost:9001.

Reverse Proxy Configuration

Penpot needs a proper domain name for sharing links to work. Configure your reverse proxy:

Caddy:

penpot.yourdomain.com {
    reverse_proxy localhost:9001
}

Nginx:

server {
    listen 443 ssl;
    server_name penpot.yourdomain.com;

    location / {
        proxy_pass http://localhost:9001;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

WebSocket support (Upgrade header) is required for real-time collaboration.

Managing Teams and Projects

Penpot uses a team/project hierarchy:

• Teams: A workspace shared by multiple users. You can have personal projects and team projects.
• Projects: A folder within a team. Contains design files.
• Files: Individual design documents.

Invite users to your team via the team settings. If you disabled registration (recommended for private instances), invited users will receive a magic link to set a password.

Components and Design Systems

Penpot's component system lets you build reusable UI elements:

1. Create a component: Select any group or frame → Right-click → "Create main component"
2. Add to library: Main components in a file are automatically part of that file's library
3. Share libraries: Enable "Add as Shared Library" in File menu to share components across projects
4. Use components: Open the Assets panel → Components → drag onto canvas

Penpot supports component variants (similar to Figma variants), letting you create multiple states of a component (default, hover, disabled) as a single organized set.

Auto-layout

Auto-layout makes frames resize dynamically based on content — essential for designing responsive components.

Select a frame and press Ctrl+Alt+A (or use the Design panel) to enable auto-layout. You can set:

• Direction: horizontal or vertical
• Spacing between children
• Padding
• Alignment

Nested auto-layout frames let you create complex responsive components like navigation bars, cards, and form elements that resize naturally.

Exporting for Developers

The Inspect view (toggle in top-right) shows:

• CSS properties for selected elements
• Exact dimensions, spacing, colors in HEX/RGB/HSL
• Typography: font family, size, weight, line height
• Export assets as PNG, SVG, or PDF

For design tokens, Penpot supports a JSON-based token system (in beta) that maps design decisions to exportable values.

Penpot vs Figma

Penpot's plugin ecosystem is smaller than Figma's, and the UI has some rough edges compared to a polished commercial product. But for teams prioritizing data ownership or working on open-source projects, Penpot is a compelling choice.

Hardware Requirements

Penpot runs multiple containers and needs reasonable resources:

A VM with 4GB RAM and 2 cores is sufficient for a small team (5–10 users).

Summary

Penpot delivers most of what teams need from a design tool: vector editing, components, prototyping, and real-time collaboration — all on infrastructure you control. The SVG-native format and CSS-mapped properties make it particularly well-suited to teams with developers who want accurate handoff.

It's not a perfect Figma replacement for heavy design system work or plugin-dependent workflows. But for most teams, it covers the essentials and does it without licensing fees or data sovereignty concerns.