Deploying Penpot 2.0 on Docker: The Ultimate Open-Source, Real-Time Collaborative UI/UX Alternative to Figma for Agencies

Introduction: The Changing Landscape of Agency Design Tools

In the competitive ecosystem of digital agencies, agility, collaboration, and cost-efficiency are the cornerstones of success. For years, proprietary platforms like Figma have dominated the UI/UX design landscape. However, recent industry shifts, evolving pricing models, and increasing corporate demands for data sovereignty have compelled agency leaders to look for robust alternatives. Enter Penpot 2.0.

Penpot 2.0 represents a massive leap forward as the first open-source, web-based UI/UX design and prototyping platform built inherently for cross-disciplinary teams. Utilizing open standards like SVG, Penpot bridges the traditional gap between designers and developers. By deploying Penpot 2.0 via Docker, your agency can gain full control over its design infrastructure, eliminate per-seat licensing bottlenecks, and guarantee absolute data privacy for high-profile clients.

Why Agencies Are Migrating from Figma to Penpot 2.0

While Figma remains a capable tool, it presents structural challenges for scaling agencies. Penpot 2.0 addresses these pain points directly through several disruptive advantages:

Absolute Data Sovereignty: Agencies handling sensitive client data or operating under strict NDA requirements can self-host Penpot on local servers or private clouds, ensuring no third-party vendor has access to proprietary intellectual property.
Elimination of Seat-Based Costs: Traditional SaaS tools penalize growth by charging per user. With a self-hosted Penpot instance, you can add unlimited designers, developers, clients, and stakeholders to the platform without increasing your monthly software overhead.
Native SVG and Web Standards: Unlike closed ecosystems that use proprietary rendering engines, Penpot uses SVG natively. What you design is fundamentally closer to how it will render on the web, significantly reducing friction during developer handoffs.
Advanced CSS Layouts (Grid and Flexbox): Penpot 2.0 introduces revolutionary layout engines that mirror real CSS Grid and Flexbox behaviors, allowing designers to create highly responsive, production-ready layouts seamlessly.

Prerequisites for Docker Deployment

Before initiating the deployment process, ensure your infrastructure meets the following baseline requirements to guarantee optimal performance for real-time collaboration:

Operating System: Linux-based server (Ubuntu 22.04 LTS or later recommended) or a stable Docker-compatible environment.
Hardware Specifications: Minimum 2 vCPUs, 4GB RAM, and 20GB of SSD storage (scale according to the size of your design team and file assets).
Software: Docker Engine (v20.10+) and Docker Compose (v2.0+) installed and verified.
Networking: A fully qualified domain name (FQDN) pointed to your server IP, with ports 80 and 443 open for HTTP/HTTPS traffic.

Step-by-Step Guide: Deploying Penpot 2.0 via Docker Compose

Deploying Penpot 2.0 with Docker Compose is highly efficient, as the platform is broken down into microservices including the frontend, backend, database (PostgreSQL), asynchronous task runner (Celery), and Redis for caching.

Step 1: Fetching the Official Configuration

First, establish a dedicated directory on your server for Penpot and download the official Docker Compose configuration files provided by the Penpot core team:

mkdir -p /opt/penpot
cd /opt/penpot
wget [https://raw.githubusercontent.com/penpot/penpot/main/docker/images/docker-compose.yaml](https://raw.githubusercontent.com/penpot/penpot/main/docker/images/docker-compose.yaml)
wget [https://raw.githubusercontent.com/penpot/penpot/main/docker/images/config.env](https://raw.githubusercontent.com/penpot/penpot/main/docker/images/config.env)

Step 2: Configuring the Environment Variables

Open the config.env file using your preferred text editor (such as Nano or Vim). This file dictates critical operational parameters. You must modify the following lines to ensure your instance is secure and functional:

PENPOT_PUBLIC_URI: Set this to your agency's designated domain (e.g., [https://design.youragency.com](https://design.youragency.com)).
PENPOT_DATABASE_PASSWORD: Replace the default value with a cryptographically secure, unique password string.
PENPOT_SECRET_KEY: Generate a secure random string to sign application sessions and tokens.

Additionally, configure your SMTP credentials within the file to enable essential features like user invitations, password resets, and team notifications:

[email protected]
PENPOT_SMTP_HOST=smtp.yourprovider.com
PENPOT_SMTP_PORT=587
PENPOT_SMTP_USERNAME=your_username
PENPOT_SMTP_PASSWORD=your_password

Step 3: Launching the Microservices

With your configurations securely in place, initiate the container download and execution process in detached mode:

docker compose up -d

Verify that all containers (penpot-frontend, penpot-backend, penpot-postgres, penpot-redis) are running successfully by executing:

docker compose ps

Securing Your Instance with a Reverse Proxy and SSL

Operating a real-time collaborative workspace over unencrypted HTTP poses severe security threats. It is imperative to place Penpot behind a reverse proxy like Nginx or Caddy to manage SSL termination.

Below is an optimized Nginx server block configuration designed to handle Penpot's WebSocket requirements for real-time multi-user editing:

server {
    listen 80;
    server_name design.youragency.com;
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name design.youragency.com;

    ssl_certificate /etc/letsencrypt/live/[design.youragency.com/fullchain.pem](https://design.youragency.com/fullchain.pem);
    ssl_certificate_key /etc/letsencrypt/live/[design.youragency.com/privkey.pem](https://design.youragency.com/privkey.pem);

    location / {
        proxy_pass http://localhost:9001;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        # WebSocket support for real-time collaboration
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

Best Practices for Agency Optimization and Maintenance

Deploying the software is only the first phase. To guarantee enterprise-grade reliability and continuity for your agency workflow, implement these ongoing maintenance strategies:

1. Automated Backup Protocols

Your design assets are invaluable assets. Schedule daily automated backups of your PostgreSQL database and the physical volumes assigned to asset storage. Use a simple cron job to export database dumps to a remote storage solution like AWS S3 or an isolated secure NAS:

docker exec -t penpot-postgres pg_dumpall -c -U penpot_user > /backups/penpot_backup_$(date +%F).sql

2. Regular Container Updates

The Penpot open-source community updates the software frequently, rolling out new features, bug fixes, and security patches. To update your instance, run the following sequence during a scheduled maintenance window:

docker compose pull
docker compose up -d

3. Performance Monitoring

Monitor your host system's CPU, memory usage, and disk I/O metrics. Real-time collaboration over WebSockets can become memory-intensive as concurrent active user counts grow. Implement tools like Prometheus and Grafana for precise infrastructure visibility.

Conclusion: Empowering Your Agency’s Future

Migrating to Penpot 2.0 via Docker provides your agency with a competitive, scalable, and independent design environment. By combining the flexibility of modern web layouts like CSS Grid with the financial and security benefits of open-source self-hosting, Penpot breaks down the operational barriers imposed by closed, proprietary design ecosystems. Take command of your creative pipeline, secure your client assets, and elevate your agency workflows by deploying Penpot 2.0 today.