Building a Self-Hosted Design Ecosystem: Deploying Penpot on a VPS as a Figma Alternative for Agencies

Introduction: The Shift Toward Design Sovereignty

In the digital agency landscape, design tools are the lifeblood of daily operations. For years, proprietary SaaS platforms like Figma have been the industry standard. However, recent shifts in pricing models, data privacy concerns, and the inherent risks of relying entirely on third-party cloud infrastructure have forced agency leaders to rethink their tech stacks. For agencies managing sensitive client data or looking to optimize operational costs, Penpot has emerged as a powerful, open-source alternative.

Penpot is the first open-source, web-based design and prototyping platform built natively for cross-disciplinary teams. By utilizing open standards like SVG, Penpot bridges the gap between designers and developers. This comprehensive guide will walk you through the strategic advantages of self-hosting Penpot on a Virtual Private Server (VPS) and provide a step-by-step deployment blueprint tailored for agencies.

Why Agencies Are Replacing Figma with Self-Hosted Penpot

Transitioning from a well-established tool like Figma is a strategic decision that requires clear business justification. Here is why forward-thinking agencies are making the switch:

Zero Seat-Based Licensing Fees: Scaling an agency often means adding freelancers, developers, and clients to design files. SaaS platforms penalize this growth with expensive per-seat pricing. With a self-hosted Penpot instance, you pay only for your underlying VPS infrastructure, allowing you to add unlimited users at no extra cost.
Absolute Data Privacy and Compliance: Agencies handling enterprise clients often sign strict Non-Disclosure Agreements (NDAs). Storing proprietary designs on third-party cloud servers can present compliance hurdles. Hosting Penpot on your own VPS ensures that your intellectual property and client assets remain entirely under your control.
Native Developer Collaboration: Penpot is built on SVG, meaning its output is clean, standards-compliant code. This minimizes friction during the design-to-production handoff, allowing developers to inspect elements and extract code seamlessly.

Pre-requisites for VPS Deployment

Before initiating the installation, ensure your infrastructure meets the minimum requirements to support a production-grade agency environment:

VPS Specifications: Minimum 2 vCPUs, 4GB RAM (8GB recommended for larger teams), and at least 40GB of SSD storage.
Operating System: Ubuntu 22.04 LTS or Ubuntu 24.04 LTS recommended for stability.
Domain Name: A dedicated subdomain (e.g., design.youragency.com) with A/AAAA records pointed to your VPS IP address.
Software: Docker and Docker Compose installed on the server.

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

Using Docker Compose is the most efficient and maintainable way to deploy Penpot. It encapsulates the application, its database (PostgreSQL), and its asynchronous task runners into isolated containers.

Step 1: System Update and Docker Installation

First, connect to your VPS via SSH and update the package index to ensure system security and stability:

sudo apt update && sudo apt upgrade -y

If Docker is not yet installed, execute the following commands to install the Docker engine and Docker Compose plugin:

sudo apt install docker.io docker-compose-plugin -y sudo systemctl enable --now docker

Step 2: Downloading the Penpot Configuration

Create a dedicated directory for your Penpot deployment to keep your server organized:

mkdir -p /opt/penpot && cd /opt/penpot

Download the official Docker Compose file provided by the Penpot team:

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)

Step 3: Configuring Environment Variables

Penpot requires configuration for secure user authentication, database access, and email notifications (SMTP). Open the downloaded file or create a separate .env file to customize your settings:

nano docker-compose.yaml

Ensure you modify the following critical environmental variables under the penpot-frontend and penpot-backend sections:

PENPOT_PUBLIC_URI: Set this to your secure domain, e.g., [https://design.youragency.com](https://design.youragency.com)
PENPOT_SECRET_KEY: Generate a long, secure alphanumeric string to secure user sessions.
SMTP Configuration: Configure your agency’s mail server settings (Host, Port, User, Password) to allow Penpot to send user invitations, password resets, and notifications.

Step 4: Launching the Application

With configurations in place, initialize the container ecosystem in detached mode:

sudo docker compose up -d

Verify that all services (Penpot frontend, backend, database, and Redis cache) are running correctly:

sudo docker compose ps

Securing Your Penpot Instance with Nginx and SSL

Running a design platform over unencrypted HTTP exposes client data to interception. It is imperative to set up a reverse proxy with an SSL certificate.

Step 1: Install Nginx

sudo apt install nginx -y

Step 2: Configure the Reverse Proxy

Create a new Nginx configuration block for your Penpot subdomain:

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

Insert the configuration to route external traffic from port 80/443 to Penpot’s internal port (typically localhost:9001). Save the file, create a symbolic link to enable the site, and restart Nginx:

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

Step 3: Obtain a Free SSL Certificate via Let's Encrypt

Use Certbot to automate the generation and renewal of an SSL certificate:

sudo apt install certbot python3-certbot-nginx -y sudo certbot --nginx -d design.youragency.com

Follow the on-screen prompts to enforce HTTPS redirection, securing all data transmitted between your team and the VPS.

Optimizing Penpot for Agency Workflows

Once your instance is live at your custom domain, take the following steps to mirror the efficiency of a Figma ecosystem:

1. Structuring Projects and Teams

Organize your Penpot workspace by creating separate "Teams" for each major client. Within these teams, use "Projects" to separate individual campaigns, website redesigns, or brand identity packages. This structure mirrors enterprise-level organization and keeps assets strictly segregated.

2. Migrating Assets from Figma

Transitioning doesn't mean starting from scratch. Since Penpot natively respects open web standards, you can export your Figma components, icons, and layouts as SVGs and import them directly into Penpot. Standardized text formatting, vector paths, and layers will remain intact.

3. Setting up Automated Backups

As an agency, data loss equates to lost billable hours and damaged client trust. Set up a automated cron job on your VPS to regularly back up the PostgreSQL database volume and your asset storage directory to an offsite location, such as AWS S3 or an institutional backup server.

Conclusion

Deploying Penpot on a private VPS provides modern agencies with an unbeatable combination of cost efficiency, absolute data control, and open-source flexibility. By moving away from vendor lock-in and seat-based pricing, your agency retains its competitive edge while fostering a collaborative environment where designers, developers, and clients can co-create seamlessly. Take control of your design ecosystem today by initiating your own Penpot deployment.