Introduction: The Shift Toward Open-Source Design Infrastructure

In the modern digital product development lifecycle, user interface (UI) and user experience (UX) design tools serve as the operational bedrock for product teams. For years, proprietary cloud platforms like Figma have dominated this landscape. However, corporate shifts, pricing adjustments, and evolving data sovereignty regulations have compelled enterprise leaders and technology teams to seek alternative solutions. Security-conscious organizations require platform autonomy, predictable cost models, and complete control over their intellectual property.

Enter Penpot, the first open-source, collaborative design and prototyping platform built explicitly for cross-functional product teams. By leveraging native web standards like SVG and CSS Flexbox/Grid, Penpot bridges the traditional divide between designers and developers. More importantly, Penpot offers an enterprise-grade self-hosting model. Deploying Penpot on a private Virtual Private Server (VPS) allows organizations to retain full ownership of their design assets, ensure compliance with strict data privacy mandates, and eliminate user-based subscription bottlenecks.

Why Penpot is the Leading Alternative to Figma

While several prototyping tools exist, Penpot distinguishes itself through architectural choices that align perfectly with contemporary software engineering and design methodologies.

1. Native Web Standards: SVG as the Ground Truth

Unlike traditional design tools that use proprietary internal formats and convert them for the web, Penpot utilizes Scalable Vector Graphics (SVG) natively. Because Penpot's internal files are effectively structured SVG code, what you design is inherently compatible with the browser. This dramatically minimizes fidelity loss during handoffs and gives developers immediate access to clean, standard-compliant vector data.

2. True Open-Source Freedom and Data Sovereignty

Proprietary software vendors operate as black boxes regarding data storage and service availability. If a vendor changes its terms of service or suffers an outage, your operational velocity stalls. Penpot is published under the Mozilla Public License 2.0 (MPL 2.0). Self-hosting Penpot on a VPS guarantees that your proprietary design systems, wireframes, and user flows remain exclusively on your infrastructure, safe from unauthorized data mining or sudden access revocation.

3. Advanced CSS Layout Capabilities

Penpot includes native implementations of CSS Flexbox and CSS Grid layouts within its design canvas. Designers can construct layouts that behave exactly like real-world web components, responding predictably to varying screen dimensions. This drastically reduces communication friction during developer handoffs, as the design components inherently mimic code logic.

Prerequisites for VPS Deployment

Before initiating the technical installation, ensure your environment meets the minimum operational baselines required for a stable production instance of Penpot.

Server Hardware: A VPS with at least 2 vCPUs, 4GB of RAM (8GB recommended for larger teams), and 20GB of SSD/NVMe storage.
Operating System: A clean installation of a modern Linux distribution, preferably Ubuntu 22.04 LTS or Ubuntu 24.04 LTS.
Network Requirements: A static public IP address and a registered Domain Name (e.g., design.yourcompany.com) pointed via A Record to your VPS IP.
Software Core: Docker Engine (v20.10+) and Docker Compose (v2.0+) pre-installed on the host system.

Step-by-Step Technical Implementation Guide

Penpot relies on a microservices architecture consisting of a frontend interface, a backend API service, a frontend asset server, a PostgreSQL database, a Redis cache, and an asynchronous task runner. Utilizing Docker Compose is the industry standard for orchestrating these components efficiently.

Step 1: Environment Preparation

Establish a secure SSH connection to your VPS and update your system packages to their latest stable releases to patch any underlying vulnerabilities:

sudo apt update && sudo apt upgrade -y

Create a dedicated directory structure to store Penpot's configuration files and operational data volumes:

mkdir -p ~/penpot && cd ~/penpot

Step 2: Retrieving the Orchestration Manifest

Penpot provides an officially maintained docker-compose.yaml file along with an environment configuration file templates. Fetch these files directly from the official Penpot repository using curl or wget:

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 3: Configuring the Environment Variables

The config.env file governs database credentials, encryption keys, and application URLs. Open this file using a command-line text editor like nano or vim:

nano config.env

Modify the following critical fields to secure your infrastructure:

Important Security Mandate: Do not leave the default cryptographic keys or database passwords unchanged in a production environment. Generate strong, unique alphanumeric keys for these fields.

PENPOT_PUBLIC_URI: Set this to your fully qualified domain name (e.g., [https://design.yourcompany.com](https://design.yourcompany.com)).
PENPOT_DATABASE_PASSWORD: Establish a robust password for the PostgreSQL container.
PENPOT_SECRET_KEY: Generate a long random string used for cryptographic signing of user sessions.

Configure your outbound SMTP settings within the same file to enable user registration confirmations, team invitations, and password reset workflows.

Step 4: Launching the Application Infrastructure

With the environment variables finalized, instruct Docker Compose to pull the official microservice images and initialize the multi-container network in detached mode:

docker compose up -d

To verify that all essential services—including the database migrations, Redis caching layers, and the Penpot backend application—have initialized correctly, review the real-time log outputs:

docker compose logs -f

Step 5: Configuring an Nginx Reverse Proxy with TLS Encryption

To expose your Penpot instance securely over the web via HTTPS, configure Nginx as a reverse proxy to manage SSL termination.

Install Nginx and the Certbot client on your host operating system:

sudo apt install nginx certbot python3-certbot-nginx -y

Create a new Nginx server configuration block for Penpot:

sudo nano /etc/nginx/sites-available/penpot

Insert a clean reverse proxy block directing traffic from port 80 to Penpot's local port (typically 9001 by default):

server {
    listen 80;
    server_name design.yourcompany.com;

    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;
        
        # WebSockets support
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

Enable the site configuration by linking it to the active sites directory and validating Nginx syntax:

sudo ln -s /etc/nginx/sites-available/penpot /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl restart nginx

Execute Certbot to provision a free Let's Encrypt SSL certificate and automatically apply global HTTPS redirection rules:

sudo certbot --nginx -d design.yourcompany.com

Post-Deployment Best Practices for Business Operations

Deploying the software is only the first phase. Maintaining an enterprise-grade self-hosted design ecosystem requires ongoing adherence to operational best practices.

Automated Backup Strategies

Design files represent thousands of collective work hours. Implement a automated cron job script on your VPS that performs nightly backups of the PostgreSQL database and persistent storage volumes:

Utilize pg_dump inside the PostgreSQL container to output database states.
Archive the physical uploads folder (where user-uploaded imagery and assets reside).
Transfer these archives securely to an offsite, immutable cloud storage object (e.g., AWS S3 or Backblaze B2).

Resource and Performance Monitoring

Monitor your host CPU, memory metrics, and disk I/O regularly. As team sizes grow and concurrent real-time collaboration sessions increase, memory consumption within the Redis and backend containers will rise. Utilize utility tools like htop, docker stats, or specialized monitoring stacks such as Prometheus and Grafana to maintain comprehensive infrastructure visibility.

Conclusion: Embracing Open-Source Product Design

Migrating from a vendor-locked ecosystem to a self-hosted Penpot instance on a VPS gives your business complete infrastructure autonomy. By leveraging open web standards, avoiding arbitrary licensing tier inflation, and maintaining ironclad control over proprietary design data, you insulate your creative workflows from external platform volatility. Follow this deployment blueprint to empower your product, design, and engineering teams with a secure, highly scalable, and entirely self-contained collaboration environment.

Deploying Penpot on a VPS: The Ultimate Open-Source Figma Alternative for Real-Time UI/UX Collaboration