Published: Last updated:

Penpot

Penpot is an open-source design and prototyping tool that runs in the browser, can be self-hosted, and is built natively on the open standards SVG, HTML and CSS. It is the sovereign counter-proposal to the cloud standard Figma, not a line-for-line clone of it.

The moment a team designs digital products, a quiet structural decision is made: on which tool chain do the designs come into being, and who owns the files in the end? The market standard Figma answers that with a cloud that bundles the tool, the data and the file format in one hand. Penpot answers the same question differently: open source code under the Mozilla Public License 2.0, an open file format, and the choice between a hosted variant and running it on the organisation's own infrastructure. This page describes what makes Penpot what it is, where its limits against Figma lie, and why it works as a building block of a sovereign design tool chain.

Core concept

Penpot is a web application maintained by the developer company Kaleidos in Madrid and released entirely under the MPL 2.0. Three properties define the tool:

  • Open standards as the format. Penpot does not store designs in a closed binary format; it builds on SVG, HTML and CSS plus an open, documented file format. Penpot therefore builds on the same web standards that later form the surface, rather than on a tool-specific intermediate format.
  • Self-hostable. Alongside the cloud instance operated by Kaleidos, Penpot can be run on the organisation's own infrastructure via Docker Compose, behind existing reverse proxies and VPNs. The functionality is largely the same in both operating modes.
  • Proximity to implementation. Layout mechanics such as CSS Grid and Flexbox are mapped natively, not rebuilt as an approximation. That narrows the gap between design and code, because the layout in the tool follows the same rules it will later follow in the browser.

These three points are the core. Everything else, from component libraries to design tokens, builds on them.

Penpot is not a Figma clone

Penpot competes with Figma on function, but it is deliberately not a line-for-line copy. Anyone expecting full feature parity is mistaken. Individual areas that Figma has offered in mature form for years are younger in Penpot or still in development; the vendor itself labels certain functions as upcoming rather than present. Conversely, Penpot solves some things more elegantly, such as the direct mapping of CSS Grid and Flexbox. The honest assessment is therefore: a standalone tool with its own philosophy that keeps pace with Figma in many everyday tasks, but not yet in individual specialist disciplines. The decision between the two is thus not a pure feature question but a make-or-buy decision between vendor lock-in and control.

A sovereign tool chain instead of vendor lock-in

The real lever of Penpot lies not in its feature set but in the ownership question. A hosted cloud tool moves designs, component structures and unreleased product mockups onto foreign infrastructure. Design artefacts in particular are sensitive: a depicted product is recognisable long before it officially exists. Penpot addresses exactly that by keeping the tool and the data on the organisation's own infrastructure, and thereby counters vendor lock-in. In doing so it sits in line with local-first tools such as Obsidian, while the proprietary Adobe Creative Cloud marks the other end of the spectrum. The strategic bracket behind it, why control over tools and data keeps an organisation capable of acting in the long run, is described by digital sovereignty.

Where Penpot fits in the tool chain

Penpot is not an isolated tool but a node in the chain from design to a running product. The sequence below shows where it starts and what it connects to:

flowchart TD
    A["Idea, wireframe"] --> B["Design in Penpot<br/>native SVG, HTML, CSS"]
    B --> C["Interactive prototype<br/>in the browser"]
    C --> D["Open handoff<br/>code directly inspectable"]
    D --> E["Implementation"]

The decisive advantage sits at the right edge of the sequence: because Penpot internally uses the same web standards that later form the surface, code inspection stays close to the later implementation. The generated code is meant as guidance, not as a finished implementation. Self-hosting in turn is not an afterthought but keeps the entire sequence inside the organisation's own boundaries.

What to watch when adopting it

  • Self-hosting has operating costs. A self-hosted instance needs upkeep: updates, backups, authentication. The Docker images for self-operation follow the hosted updates with some lag; this is configuration- and version-dependent.
  • Migration is not push-button. Existing Figma files can be imported, but not every peculiarity carries over without loss. A migration is a project, not an export.
  • Check maturity instead of assuming it. Which function is production-ready today is a question of the concrete need. The maturity of individual areas changes continuously, which is why the check belongs at the start, not the end.
  • AI features remain a decision. Penpot integrates AI features via an MCP server that runs inside the organisation's own infrastructure; which models get a connection is configurable. That is an option, not an automatism.

Control over design data

In choosing the tool an organisation also decides who ends up with access to its designs. As soon as designs with a personal reference or a protectable business secret move into a cloud outside the organisation's own control, the question of law and access arises. A self-hosted Penpot keeps these artefacts inside the organisation's own perimeter and thereby takes the edge off the question before it arises. For Swiss organisations this choice additionally coincides with the data protection question. Whether a self-operated open-source tool or a cloud variant fits the organisation better remains a make-or-buy decision; which artefacts may leave the organisation's own network at all is a question of digital sovereignty.

References

Related topics

Ask AI

These links open external AI services, the conversation and its content are sent to their providers.