🎨 Setup Penpot — Self-Hosted Figma Alternative for UI/UX Design
Deploy Penpot on Ubuntu with Docker — the open-source, self-hosted Figma alternative with real-time collaboration, vector design tools, components, prototyping, and SVG-native export.
📦 Resources & Setup Scripts
Before starting, please make sure to grab the required scripts from our GitHub repository.
Quick Install:
wget https://raw.githubusercontent.com/mhmdali94/Docker/refs/heads/main/tools/penpot/penpot-ubuntu.sh
chmod +x penpot-ubuntu.sh
sudo bash penpot-ubuntu.shTutorial Steps
1 Download the Script
wget https://raw.githubusercontent.com/mhmdali94/Docker/refs/heads/main/tools/penpot/penpot-ubuntu.sh2 Make it Executable
chmod +x penpot-ubuntu.sh3 Run the Installer
The script installs Docker Compose, deploys all 5 Penpot containers (frontend, backend, exporter, PostgreSQL, Redis), sets required environment variables including PENPOT_PUBLIC_URI, PENPOT_SECRET_KEY, and flags, and starts the web UI on port 9001.
sudo bash penpot-ubuntu.sh4 Access the Web UI
Open your browser and navigate to Penpot:
http://<your-server-ip>:9001Ports Used
| Port | Purpose |
|---|---|
| 9001 | Penpot Frontend (Web UI) |
| 6379 | Redis (internal only) |
| 5432 | PostgreSQL (internal only) |
Overview
Penpot is an open-source design and prototyping tool built for product teams. It is the leading self-hosted alternative to Figma, providing a browser-based vector design canvas with components, real-time multiplayer collaboration, interactive prototyping, CSS-accurate design inspection, and SVG-native file format. Penpot is built with Clojure/ClojureScript and requires a multi-container deployment: penpot-frontend (the React/ClojureScript UI), penpot-backend (the API server), penpot-exporter (Puppeteer-based PNG/PDF rendering), PostgreSQL (persistent storage), and Redis (sessions and pub/sub). All design data is stored in open SVG format — no proprietary lock-in.
Why Use It
Figma moved to subscription-only pricing after Adobe acquisition plans, making it prohibitively expensive for independent designers and agencies. Penpot is entirely free and self-hosted — unlimited projects, unlimited team members, on your own server. Because it uses open SVG as the storage format, your design files are never locked into a proprietary format. The browser-based interface means no desktop app installation — any team member can design from a browser on any OS.
When You Need It
Who Should Use It
Real Use Cases
Main Features
How to Use After Installation
Security Best Practices
Ports and Firewall Notes
Penpot exposes port 9001 for the frontend web UI. All other containers (backend, exporter, PostgreSQL, Redis) communicate over the internal Docker network and must never be exposed publicly. Set PENPOT_PUBLIC_URI to your production HTTPS domain before first launch. Firewall: ufw allow from 192.168.1.0/24 to any port 9001.
Backup and Maintenance
Common Mistakes
Troubleshooting
Alternatives
Figma is the industry-standard commercial alternative. Inkscape is a free desktop SVG editor without collaboration features. Penpot is the only open-source browser-based collaborative design tool with a feature set comparable to Figma. For wireframing only, Excalidraw (covered in this academy) is simpler. draw.io (also in this academy) is suited for diagrams and flowcharts rather than UI design.
When Not to Use It
Penpot is resource-intensive — the multi-container stack requires at least 2 GB RAM for comfortable use with a small team. For solo designers on low-spec servers, Penpot may feel slow. Penpot does not yet support all Figma plugin APIs, so teams that rely heavily on Figma plugins may face gaps. Font rendering in Penpot relies on fonts loaded server-side — custom font management requires uploading fonts to the platform.
Frequently Asked Questions
How many containers does Penpot need?
Penpot requires 5 containers: penpot-frontend, penpot-backend, penpot-exporter, PostgreSQL, and Redis. The install script deploys all five via Docker Compose automatically.
Can Penpot import Figma files?
Yes. Use the Penpot Figma plugin — install it in Figma, export your file, then import the resulting .penpot bundle into your self-hosted instance.
What is the default port for Penpot?
The Penpot frontend is accessible on port 9001. Set PENPOT_PUBLIC_URI to your HTTPS domain and put Penpot behind Nginx Proxy Manager for production.
Does Penpot support real-time collaboration?
Yes. Multiple designers can work on the same file simultaneously with live cursor positions and change visibility, similar to Figma's multiplayer mode.
Does Penpot export to SVG and PDF?
Yes. Penpot exports to SVG, PNG, JPEG, PDF, and its own .penpot format. The penpot-exporter container handles PDF and PNG rendering using headless Chromium via Puppeteer.