Penpot vs Figma: what the open-source alternative really changes
Figma and Penpot share the same paradigm: browser-based vector design, real-time collaboration, reusable components and integrated developer handoff. The fundamental difference lies in the data model: Figma stores everything on its servers in a proprietary format; Penpot uses standard SVG as its native format, meaning your design files are readable by any SVG editor and vendor-independent. For a team already self-hosting code on Gitea, documentation on Docmost and communication on Mattermost, hosting the design tool on ServOrbit is the logical conclusion.
What Penpot gives you out of the box
- Real-time vector design — multiple designers on the same file simultaneously, visible cursors, contextual comments on layers.
- Components & shared libraries — build design systems, publish them as shared libraries across projects.
- Native developer handoff — live CSS inspector, asset export, annotations, spacing guides generated automatically from designs.
- Interactive prototyping — link frames with transitions, simulate navigation in the prototype without leaving the tool.
- Flexible grids & constraints — auto layouts, native CSS grids, resize constraints identical to Figma.
- Open SVG format — your files are portable, importable into Inkscape, Illustrator or any vector editor.
- MCP integration — connect Penpot to your AI assistant to generate components from text descriptions (v2.17).
Architecture: 6 containers, one HTTP entry point
Penpot is a modern stack composed of: penpot-postgres (PostgreSQL 15, project and user persistence), penpot-valkey (Valkey 8, session cache and real-time pub/sub), penpot-backend (Clojure, API and business logic), penpot-exporter (PNG/PDF/SVG export engine via headless browser), penpot-mcp (MCP server for AI integration) and penpot-frontend (HTTP proxy on port 9001, serves the React app and routes requests to the backend). The architecture is designed for reverse-proxy exposure: a single port 9001 is sufficient, with the frontend acting as an internal router. On a 4 GB ServOrbit VPS, the full stack consumes around 800 MB at idle.
Deployment in 6 steps
Order a ServOrbit VPS
2 GB RAM is the absolute minimum; 4 GB is recommended in production so that exporting complex files (PDF, high-resolution PNG) doesn't saturate the exporter container. Ubuntu 24.04 LTS is the default template.
Point a subdomain at your VPS
Create an A record for
design.yourdomain.compointing to the VPS IP. The ServOrbit provisioner automatically generates a Let's Encrypt certificate. Penpot disables secure session cookies over HTTP — an HTTPS domain is required for multi-user collaboration in production.Install from the marketplace
In the ServOrbit console: Marketplace → Collaboration → Penpot → Deploy. The AWX job starts all 6 containers, generates
APP_SECRETand setsPENPOT_PUBLIC_URIto your domain. The interface is reachable athttps://design.yourdomain.comin 2–3 minutes.Create the first admin account
Registration is open by default (
enable-registration). Navigate tohttps://design.yourdomain.com, create your account — the first user created gets admin rights. From the admin panel, you can then disable public registration and invite collaborators by email.Import your Figma files
Penpot natively imports
.figfiles (exported from Figma). In a Penpot project, click Import → Figma file, select your export. Frames, components and styles are converted to Penpot elements — expect minor losses for Figma-specific plugins, but the overall structure is preserved.Logging in for the first time
Open the URL and click "Create an account": registration is open and email verification is disabled, so your account is active immediately. Do it straight away.
Integrating Penpot into your Git workflow
Penpot's native SVG format opens possibilities that Figma cannot offer: your designs are versionable text files. Export a component as SVG, commit it to your Gitea repo, and your CI pipeline can detect visual regressions via SVG diffs. Team developers can inspect design changes in a PR just like any code change. This 'design-as-code' approach is particularly powerful for design systems: a color token change in Penpot produces an immediately readable SVG diff in Gitea.
Penpot MCP: generate designs from your AI assistant
Since v2.17, Penpot ships an MCP server (penpot-mcp) that exposes your projects to any MCP-compatible client. Configure your assistant (Claude, Cursor, Continue) with your Penpot instance's MCP URL, and you can ask 'create a 40px primary button, color #6765A2, border-radius 8px' — the assistant generates the component directly in your open design file. It's the shortest design→code loop available in self-hosted.
