Penpot: eine offene Designplattform auf offenen Standards, mit Designvariablen in 2.18
Zusammenfassung
Eine offene Designplattform im Netz, gebaut auf offenen Standards. Die Oberflaeche oeffnet sich im Browser, das Layout nutzt das native Raster und Flex-Modell des Netzes, dazu Komponenten, Designvariablen und gemeinsame Bibliotheken, oder ein Betrieb auf einem eigenen Server. Die freie Stufe ist vollstaendig.
Empfehlen- Name
- Penpot
- Version
- 2.18.3
- Preis
- Kostenlos
- Open Source
- Open Source
- Betriebssystem
- WindowsmacOSLinux
- Webseite
- https://penpot.app/
- Aktualisiert
- 2026-10-12 11:00
Der Abstand zwischen einem Entwurf und der fertigen Seite steckt meist darin, ob beide dieselben Regeln fuer das Layout benutzen.
Browser oeffnen und loslegen
Penpot ist eine offene Designplattform. Die Startseite ordnet sie als offenes Designwerkzeug fuer Teams ein, die zusammenarbeiten muessen, und die Ueber-Seite ergaenzt, dass es ein webbasiertes Designwerkzeug ist, das Design und Entwicklung verbindet. In der Praxis ist der unmittelbarste Unterschied, dass ein Browser den Zugang zum Projekt oeffnet: kein schwerer Client, der zuerst installiert werden muss, und keine Umgebung, die auf einer anderen Maschine neu einzurichten waere.
Der Auftrag steht klar da: eine offene Plattform bieten, die offenen Standards folgt, und die Zusammenarbeit zwischen Design und Entwicklung weiterbringen. Dieser Satz erklaert die Entscheidungen zu Dateiformaten und Layoutregeln, denn ein Entwurf muss fuer die naechste Stufe leicht zu uebernehmen sein, bevor Zusammenarbeit etwas bedeutet.
Im Browser zu arbeiten hat auch einen Preis, und der gehoert benannt. Eine Flaeche mit hunderten Rahmen, Bildern und Komponenten lastet auf der Maschine und auf der Leitung, und ein Projekt, das den ganzen Tag offen bleibt, verhaelt sich anders als eines, das zur Durchsicht geoeffnet wird. Teams mit grossen Dateien lernen, sie zu teilen, und diese Gewohnheit ist eher eine Entwurfsentscheidung als eine technische.

Layout nach den Regeln des Netzes selbst
Beim Layoutmodell unterscheidet sich dieses Werkzeug. Die Startseite nennt Unterstuetzung dafuer, Oberflaechen mit CSS-Raster und Flex-Layout zu entwerfen, also mit den Regeln, die das Frontend tatsaechlich benutzt. Abstaende und Ausrichtung im Entwurf koennen damit zum fertigen Code passen, und eine Schicht manueller Umrechnung faellt bei der Uebergabe weg.
Beim Designsystem gibt es Komponenten, native Designvariablen und gemeinsame Bibliotheken. Designvariablen ziehen Werte wie Farbe und Schriftgroesse in wiederverwendbare Eintraege, sodass eine Aenderung an einer Stelle ueberall ankommt; Komponenten und Bibliotheken halten mehrere Seiten zusammen. Fuer eine ueber Jahre gepflegte Oberflaeche spart diese Kombination weit mehr als das Nachziehen Seite fuer Seite, und Drahtmodelle sowie interaktive Prototypen decken die Spanne von Struktur bis Vorfuehrung ab.
Faehigkeit | Offizielle Angabe |
|---|---|
Form | ein offenes Designwerkzeug, das im Netz laeuft |
Layout | CSS-Raster und Flex-Layout |
System | Komponenten, native Designvariablen, gemeinsame Bibliotheken |
Prototypen | Drahtmodelle und interaktive Prototypen |
Zusammenarbeit | Design und Entwicklung arbeiten gemeinsam |

Wo die Daten liegen, entscheidet der Nutzer
Die Bereitstellung ist der andere Punkt, den das Projekt immer wieder betont. Die Seite zum Selbstbetrieb schreibt, die Plattform laufe in einer privaten Wolke, auf eigener Hardware oder sogar in einem abgeschotteten Netz, wobei Ort der Designdaten und Zugriffsrechte ganz in der Hand der Nutzer liegen. Fuer ein Team, dessen Daten das interne Netz nicht verlassen sollen, wiegt das meist mehr als eine Funktionsliste, und es ist nur in offener Form moeglich.
Die Preisseite sagt dasselbe mit den Worten des Projekts: Die freie Stufe ist vollstaendig, ohne Begrenzung der Anzahl und ohne zurueckgehaltene Funktionen; bezahlte Stufen gibt es fuer grosse Organisationen und sie decken Lenkung und Ablaeufe ab. Der Code ist unter der Mozilla Public License 2.0 in einem oeffentlichen Repository veroeffentlicht, also laesst sich der Quelltext holen, bauen und bereitstellen, und die Entwuerfe gehoeren denen, die sie gemacht haben.
Aus dieser Kombination folgen zwei Dinge, eines gut und eines zum Vorausplanen. Niemand erzwingt einen Umzug, wenn ein Anbieter seine Bedingungen aendert, und niemand erzwingt auch ein Aktualisieren, was bedeutet, dass die Fassung einer Instanz eine Entscheidung wird, die jemand verantworten muss. Selbstbetrieb ist billig im Start und ist ein zu pflegender Dienst, also lohnt es sich, frueh zu klaeren, wer das uebernimmt.
Die Standards fuer Dateien und Layout in die Hand der Nutzer zu legen, gibt der Zusammenarbeit festen Grund.
Ein paar Hinweise. Zuerst die Grundeintraege der Designvariablen und der Komponentenbibliothek festlegen, dann laufen die spaeter hinzugefuegten Seiten viel runder. Beim Umzug eines alten Projekts zuerst pruefen, ob die Layoutregeln zum Frontend passen, damit die Uebergabe nicht alles wiederholt. Wenn Daten im Netz bleiben muessen, frueh einen Selbstbetrieb versuchen und Konten und Rechte gleich mitplanen.