Zurück

Konkurrenz für Figma? – Ein kurzer Blick auf Penpot 2.0

Was ist Penpot?

Penpot ist ein Prototyping und Designtool, mit welchem sich digitale Produkte wie Webseiten, Applikationen, Handy-Apps, etc. designen und testen lassen.

Im Gegensatz zu ähnlichen Tools wie Figma, ist Penpot eine Open-Source-Software und wird von Kaleidos entwickelt, einem spanischen Opensource-Unternehmen.

Alle können Penpot gratis verwenden.

Welche Vorteile bietet Penpot?

Open-Source

Der Markt der Design-Software wird dominiert von einigen grossen Playern wie Adobe, Figma und Canva.

Insbesondere Adobe nutzt dabei seine marktbeherrschende Stellung aus und verlangt stolze Preise für ihre zugegebenermassen sehr mächtige und umfangreiche Software-Suite.

Auf der anderen Seite steht Penpot, welches als Open-Source-Software von der kleinen spanischen Softwareschmiede Kaleidos entwickelt wird und für alle als Open-Source zur Verfügung gestellt wird.

Mozilla Public License 2.0

Die Mozilla Public License 2.0 (MPL 2.0) erlaubt freie Nutzung, Modifikation und Verteilung des Quellcodes, wobei Änderungen unter derselben Lizenz veröffentlicht werden müssen. Jede Person kann also Penpot herunterladen, installieren, benutzen, oder sogar selber mitentwickeln.

Offenes Dateisystem

Penpot basiert auf dem offenen Dateiformat SVG (Scalable Vector-Graphics) und stellt so sicher, dass die in Penpot erstellten Inhalte problemlos auch in anderen Programmen verwendet können. So wird auch gewährleistet, dass die Inhalte auch weiterverwendet werden können, sollte es Penpot mal nicht mehr geben.

HTML/CSS-Kompatibilität

Im Gegensatz zu Figma, welches mit ihrem Auto-Layout ein an Flexbox angelehntes, aber leicht vereinfachtes Layout-System umgesetzt haben, bringt Penpot gleich zwei Layout-Systeme mit, die auf dem aktuellen CSS-Standard basieren: Flex-Layout und Grid-Layout.

Im Unterschied zu Figma, welches mit ihrem Auto-Layout ein eigenes System für die Anordnung von Elementen eingeführt hat, hält sich Penpot genau an die CSS-Vorbilder Flex-Box/Grid-Layout. Dies setzt voraus, dass sich der Designer ein bisschen in die Funktionsweise von CSS eindenkt. Im Gegenzug ergibt sich eine nahtlose Übergabe ans Entwicklungsteam.

Figma Auto-Layout

Das Auto-Layout von Figma ist sehr simpel und richtet sich an Designer mit wenig Entwicklungs-Background. Damit ist Auto-Layout sehr einfach zu lernen.

Flex-Layout

Das Flex-Layout von Penpot basiert auf Flex-Box, welches von CSS bekannt ist. Im Vergleich zum Auto-Layout von Figma gibt es hier also z.B. die Möglichkeit, mittels “Justify Content” zu definieren, wie die verschiedenen Elemente innerhalb des Layouts verteilen.

Justify-Content von CSS

Dies gibt dem Flex-Layout deutlich mehr Flexibilität gegenüber Figma. Diese zusätzlichen Einstellungen können auf den ersten Blick etwas verwirrend wirken, bieten den Designern aber einige weitere Möglichkeiten.

Grid-Layout

Mit dem Grid-Layout hat Penpot in der Version 2.0 einen neuen Meilenstein lanciert, welcher die Zusammenarbeit zwischen Designer und Entwickler:innen bei komplexeren Layouts massiv verbessert. Mit dem Grid-Layout kann ein flexibles Tabellensystem erstellt werden, welches dem Designer kaum Wünsche offen lässt.

Custom Fonts

In Penpot können die User eigene Fonts hochladen, welche dann für alle Teammembers zur Verfügung stehen. So entfällt die lästige Installation der Schriften auf jedem Computer/Laptop.

Pricing von Penpot

Penpot gibt es in zwei Varianten:

• als SaaS-Lösung in der Cloud von Kaleidos
• als On-Premise-Lösung, welche Firmen oder Einzelpersonen auf ihren hauseigenen Servern betreiben können.

SaaS-Lösung

Die SaaS-Lösung kann ganz einfach unter https://penpot.app als Software-as-a-Service-Lösung verwendet werden. Einfach registrieren, einloggen und loslegen.

Diese Variante ist für alle kostenlos zugänglich, was auch in Zukunft für Einzelpersonen so bleiben soll.

Bezahlmodell für Firmen geplant

Für das Jahr 2025 plant Penpot für Firmen weitere kostenpflichtige Kollaborationsmöglichkeiten hinzuzufügen. Unter welchen Bedingungen dieses Modell auf den Markt gebracht wird, ist noch unklar.

On-Premise Lösung

Da Penpot als Open-Source unter der MPL 2.0 (Mozilla Public License) veröffentlicht wurde, können alle Penpot herunterladen und selber betreiben, völlig frei von jeglichen Kosten und Lizenzgebüren.

Diese Version wird immer kostenlos zur Verfügung stehen, selbst falls sich Penpot entscheiden sollte, bei einer zukünftigen Version auf ein anderes Lizenzmodell umzuschwenken.

Dies gibt eine zusätzliche Sicherheit, da so sichergestellt ist, dass Penpot selbst bei einem Konkurs von Kaleidos weiter existiert.

Was ist neu an Penpot 2.0?

Bei Penpot 2.0 hat Kaleidos folgende Funktionen neu eingeführt:

• Grid-Layout (siehe oben)
• Neues Komponenten-System
• UI-Redesign
• HTML Markup Code

Neues Komponenten-System

Das Komponenten-System von Penpot wurde komplett neu entwickelt. In der aktuellen Version 2.0 können zum Beispiel Komponenten einfach ausgewechselt werden.

Zusammen mit der Vererbung von Eigenschaften können so sehr flexibel verschiedene Varianten einer Komponente kreiert werden.

Dieser Ansatz unterscheidet sich von den Varianten, welche z. B. Figma einsetzt, bietet aber eine grosse Flexibilität.

UI-Redesign

Der ersten Version von Penpot konnte man das junge Alter noch sehr gut anmerken. Mit der Version 2.0 wurde das gesamte UI von Grund auf neu gestaltet und programmiert, was sich in einem deutlich aufgeräumten Layout zeigt.

HTML Markup Code

Penpot setzt neue Standards beim Export von Designs in HTML und CSS. Durch die Implementierung von Flex/Grid-Layouts, können Designs erstellt werden, welche 1:1 von den Entwickler:innen übernommen werden können.

Was fehlt noch im Vergleich zur Konkurrenz (Figma)?

Im Gegensatz zu Figma ist Penpot noch ein relativ junges Projekt, welches noch nicht ganz mit dem Platzhirschen Figma mithalten. Folgende Features fehlen Penpot aktuell noch, die Figma bereits erfolgreich eingeführt hat.

Properties

Bei der Konkurrenz gibt es die Möglichkeit, Komponenten mit Properties zu manipulieren.

So lässt sich beispielsweise bei Figma ein Icon in einem Button ein/ausblenden, mithilfe des entsprechenden Properties.

Insgesamt bietet Figma 4 verschiedene Property-Typen an:

• Boolean: zum Ein-/Ausblenden
• Text: um Texte dynamisch ändern zu können (auch per Variablen, dazu später)
• Object Swap: um Objekte innerhalb einer Komponente einfach austauschen zu können.
• Varianten: Verschiedene Varianten einer Komponente.

Diese Flexibilität bietet das Komponenten-System von Penpot aktuell leider noch nicht an, mit Penpot 2.0 wurde aber die technische Basis geschaffen, in Zukunft zur Konkurrenz aufzuschliessen.

Variablen

Mit den kürzlich hinzugefügten Variablen erlaubt Figma insbesondere im Prototyping-Bereich weitergehende Möglichkeiten. So lassen sich mit Variablen verschiedene Einstellungen manipulieren, zum Beispiel Farben oder Texte. Dies erlaubt sehr einfach, umfangreichere Anpassungen zur “Laufzeit” des Prototyps vorzunehmen.

Prototyping

Im Vergleich mit Figma sind die Prototyping-Möglichkeiten von Penpot noch sehr eingeschränkt.

So lassen sich zwar einfache Klick-Prototypen realisieren, komplexere Animationen und Interaktionen lassen sich bedauerlicherweise aber noch nicht durchführen.

Für wen eignet sich Penpot?

Einsteiger

Wer erste Schritte in einem Design/Prototyping-Tool machen möchte, ist mit Penpot gut bedient. Es ist kostenlos und bietet die wichtigsten Tools für simple Designs und einfache Prototypen.

Open-Source-Enthusiasten

Penpot bietet als Open-Source-Tool viele Vorteile, so muss sich der/die Benutzer:in keine Sorgen machen, dass Penpot eines Tages eingestellt wird. Durch die offene Quelle, ist es jederzeit möglich, das Programm selber zu betreiben. Durch das offene Dateiformat SVG können die Designs auch in anderen Design-Tools geöffnet werden.

Warum wir Penpot bei We Are Cube (noch) nicht einsetzen

Bei We are Cube haben wir ein Herz für Open-Source. Entsprechend würden wir gerne auf Penpot setzen, statt auf den Branchenführer Figma, welcher mit einem proprietären System agiert.

Leider fehlen uns bei Penpot noch einige Funktionen, welche wir bei Figma kennen und schätzen gelernt haben. Ausserdem setzen viele unserer Auftraggeber auf Figma, somit ist es für uns am einfachsten, dasselbe Tool zu nutzen.

Wir verfolgen die Entwicklung von Penpot aber aufmerksam und werden uns sicher auch die kommende Version 3.0 genauer anschauen.

Fazit und Empfehlung

Penpot ist im Vergleich zur Konkurrenz ein sehr junges Produkt, entsprechend erreicht es noch nicht denselben Funktionsumfang, welchen zum Beispiel ein Figma anbietet.

Für einfache Designs ist Penpot bereits heute eine hervorragende Wahl und als freie Alternative ein sehr schönes Produkt.

Sobald aber etwas komplexere Prototypen erstellt werden sollen, kommt man mit Penpot leider noch sehr schnell an seine Grenzen, hier empfiehlt es sich, die Konkurrenz um Figma oder auch Axure genauer anzuschauen, welche hier deutlich mehr Möglichkeiten bieten.

Erfreulicherweise entwickelt sich Penpot sehr schnell weiter und holt gegenüber der Konkurrenz auf. Ich werde die Entwicklung von Penpot weiterhin verfolgen und bin auf künftige Updates gespannt.