Als Adobe 2022 die Übernahme von Figma ankündigte, suchten viele Designteams nach Alternativen, die ihnen nicht wieder in einen proprietären Vendor-Lock-in führen würden. Penpot war zu diesem Zeitpunkt bereits in der Entwicklung und hat seitdem enorm an Reife gewonnen. Das spanische Unternehmen Kaleidos entwickelt mit Penpot ein vollständig quelloffenes Design-Tool, das auf offenen Webstandards basiert und sich selbst hosten lässt.
Was ist Penpot und was macht es besonders?
Penpot ist ein browserbasietes Design- und Prototyping-Tool, das vollständig auf SVG aufbaut. Im Gegensatz zu Figma, das ein proprietäres Dateiformat verwendet, speichert Penpot alle Designs als valides SVG – inklusive aller Vektorpfade, Textelemente und Layoutinformationen. Das hat einen entscheidenden Vorteil: Die Dateien sind ohne proprietäre Software lesbar, lassen sich mit einem Texteditor öffnen und in andere SVG-Workflows integrieren.
Der Quellcode ist auf GitHub unter der MPL 2.0-Lizenz verfügbar. Die Community kann aktiv zur Entwicklung beitragen, und das Projekt ist nicht von kommerziellen Entscheidungen eines einzelnen Unternehmens abhängig.
Design und Prototyping in einem Tool
Penpot vereint Design und Prototyping in einer einzigen Oberfläche, ähnlich wie Figma. Im Design-Modus arbeitest du mit Frames, Vektoren, Texten, Bildern und Booleschen Operationen. Im Prototype-Modus verlinkst du Frames miteinander und definierst Übergänge sowie Animationen, um interaktive Klick-Demos zu erstellen.
Die Layout-Engine unterstützt Flex-Layout und seit Version 2.0 auch ein Grid-Layout, das sich eng an CSS Grid orientiert. Das macht es einfacher, Designs zu erstellen, die direkt in CSS übersetzbar sind – was den Übergabeprozess an Entwicklerinnen und Entwickler vereinfacht.
Komponenten und geteilte Bibliotheken
Wie in Figma kannst du in Penpot Komponenten erstellen und als Bibliotheken verwalten. Änderungen an einer Hauptkomponente werden automatisch auf alle Instanzen übertragen. Geteilte Bibliotheken lassen sich projektübergreifend verwenden, sodass Design-Teams ein konsistentes Design-System aufbauen können.
Penpot unterstützt außerdem Assets wie wiederverwendbare Farben, Typografie-Stile und Grafiken, die projektübergreifend synchronisiert werden können.
Developer Handoff und CSS-Export
Einer der stärksten Aspekte von Penpot ist der Developer Handoff. Im Inspect-Modus sehen Entwicklerinnen und Entwickler alle relevanten Werte eines selektierten Elements: Abstände, Farben, Schriftgrößen, Opazitäten und – besonders nützlich – den generierten CSS-Code. Da Penpot intern SVG und CSS-nahe Konzepte verwendet, ist der exportierte CSS-Code oft direkt einsatzbereit, statt nur als Näherung zu dienen.
Zusätzlich lassen sich Designs als SVG, PNG oder PDF exportieren. Für Entwickler gibt es außerdem eine öffentliche API, über die Design-Tokens und Asset-Informationen programmatisch abgerufen werden können.
Self-Hosting: Eigene Instanz betreiben
Das Alleinstellungsmerkmal von Penpot gegenüber allen kommerziellen Alternativen ist die Self-Hosting-Option. Mit Docker lässt sich eine eigene Penpot-Instanz in wenigen Schritten aufsetzen:
curl -o docker-compose.yaml https://raw.githubusercontent.com/penpot/penpot/main/docker/images/docker-compose.yaml
docker compose -p penpot -f docker-compose.yaml up -dNach dem Start ist die Instanz unter http://localhost:9001 erreichbar. Alle Daten – Designs, Nutzerkonten, Assets – bleiben auf der eigenen Infrastruktur. Das ist ideal für Agenturen, Bildungseinrichtungen und Unternehmen, die keine Design-Daten in externe Clouds übertragen dürfen.
Vergleich: Penpot vs. Figma vs. Sketch vs. Adobe XD
| Merkmal | Penpot | Figma | Sketch | Adobe XD |
|---|---|---|---|---|
| Preis | Kostenlos (Open Source) | Ab $15/Monat/Editor | Ab $10/Monat | In Creative Cloud enthalten |
| Self-Hosting | Ja (Docker) | Nein | Nein | Nein |
| Dateiformat | Offenes SVG | Proprietär (.fig) | Proprietär (.sketch) | Proprietär (.xd) |
| Echtzeit-Kollaboration | Ja | Ja | Eingeschränkt (via Plugin) | Eingeschränkt |
| Prototyping | Ja (integriert) | Ja (integriert) | Ja (integriert) | Ja (integriert) |
| Plugin-Ökosystem | Wachsend | Sehr groß | Groß | Eingestellt (2023) |
| Betriebssystem | Browser (plattformunabhängig) | Browser + Desktop-App | Nur macOS | Windows + macOS |
Aktuelle Grenzen gegenüber Figma
Penpot hat in den letzten Jahren große Fortschritte gemacht, kommt aber in einigen Bereichen noch nicht ganz an Figma heran. Das Plugin-Ökosystem ist deutlich kleiner, was z. B. bei Design-Token-Management oder Barrierefreiheitsprüfungen spürbar ist. Komplexe Prototyping-Features wie conditional flows oder erweiterte Scroll-Animationen sind in Penpot noch in der Entwicklung. Außerdem fehlt eine native Desktop-App; die Anwendung läuft ausschließlich im Browser.
Für viele Standard-Design-Workflows ist Penpot jedoch bereits heute eine vollwertige Alternative – insbesondere wenn Self-Hosting oder Datensouveränität oberste Priorität haben.
Häufige Fragen zu Penpot
- Kann ich Penpot kostenlos nutzen?
- Ja, vollständig. Penpot ist Open Source und kostenlos, sowohl in der gehosteten Cloud-Version auf penpot.app als auch als selbst gehostete Instanz. Es gibt keine Funktionsbeschränkungen im Free-Tier.
- Kann ich bestehende Figma-Dateien nach Penpot importieren?
- Penpot bietet einen Figma-Import über die Figma REST API. Dabei werden viele Elemente korrekt übertragen, aber komplexe Figma-spezifische Features wie bestimmte Auto-Layout-Konfigurationen können beim Import leicht abweichen. Ein manuelles Nacharbeiten ist bei komplexen Designs oft erforderlich.
- Wie gut funktioniert die Echtzeit-Kollaboration in Penpot?
- Die Echtzeitkollaboration ist in Penpot voll funktionsfähig – mehrere Nutzer können gleichzeitig an einem Dokument arbeiten und sehen die Änderungen der anderen in Echtzeit. Das gilt sowohl für die Cloud-Version als auch für selbst gehostete Instanzen.
- Läuft Penpot auch ohne Internetverbindung?
- In der gehosteten Version nicht. Bei einer selbst gehosteten Instanz im lokalen Netzwerk ist Penpot auch ohne externe Internetverbindung nutzbar, solange der Server erreichbar ist.