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 5 steps
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.
