00:00:00Dies ist Penpot, ein Open-Source-Design-Tool, das mit Programmen wie Figma konkurriert.
00:00:05Zuerst sieht es zwar aus wie Figma, aber es verhält sich ganz anders.
00:00:10Denn unter der Haube nutzt es echtes CSS, das man nicht später noch konvertieren muss.
00:00:15Und das verändert das Handoff-Problem grundlegend.
00:00:18Lassen Sie mich zeigen, was ich meine.
00:00:20Penpot ist ein browserbasiertes UI-Design- und Prototyping-Tool.
00:00:29Oberflächlich betrachtet klingt es wie Figma oder Sketch.
00:00:32Aber hier ist der entscheidende Unterschied.
00:00:35Penpot ist zu 100 % Open-Source und basiert auf echten Webstandards.
00:00:40SVG, CSS Flexbox, Grid und HTML.
00:00:43Anstatt in etwas zu entwerfen, das man später erst dekodieren und umbauen muss,
00:00:49ist man bereits näher an der tatsächlichen Arbeitsweise des Webs.
00:00:52Man kann es mit Docker mit einem einzigen Befehl selbst hosten,
00:00:54was ich in diesem Video tun werde, da das genau mein Ding ist.
00:00:58Open-Source-Versionen von Tools und der Vergleich untereinander.
00:01:01In Penpot erhalten Designer weiterhin Komponenten, Layouts und Prototypen.
00:01:06Aber Entwickler bekommen das, was wirklich zählt: einen Output, der wie echter Code aussieht.
00:01:11Es gibt keine seltsame Zwischenschicht und kein Rätselraten darüber, was passiert.
00:01:14Und es ist kostenlos.
00:01:15Unbegrenzte Dateien, unbegrenzte Mitarbeiter – deshalb interessiert sich die Community dafür.
00:01:20Wenn Sie Open-Source-Tools und Coding-Tipps mögen, die Ihren Workflow beschleunigen,
00:01:23abonnieren Sie den Kanal.
00:01:25Wir veröffentlichen ständig neue Videos.
00:01:27Nun, Penpot ist ein Design-Tool.
00:01:28Warum sollten Sie sich dafür interessieren, besonders als Entwickler?
00:01:31Weil es ein ganz spezifisches Problem löst.
00:01:34Das Problem der Übergabe eines Projekts oder der Umwandlung von Design in echten Code.
00:01:39Penpot macht Design nativ für das Web.
00:01:42Wenn man also etwas inspiziert, muss man nicht raten, man kann es direkt ablesen.
00:01:46Lassen Sie es mich zeigen.
00:01:48Alles klar, Zeit für eine kurze Demo.
00:01:50Das hier läuft live auf meiner selbst gehosteten Penpot-Instanz.
00:01:54Ich habe dies mit einem einzigen "Docker Compose up"-Befehl gestartet,
00:01:58unter Verwendung der offiziellen Docker Compose-Datei, die wir gerade konfiguriert haben.
00:02:00Das war ein großer Schritt.
00:02:02Es hat zwar etwas Zeit gebraucht, es aufzusetzen, aber jetzt, wo es läuft, funktioniert es großartig.
00:02:07Wir haben hier eine schöne Landingpage, einen sauberen Look, wo ich ein neues Projekt erstellen kann.
00:02:12Lassen Sie uns etwas bauen, nur eine einfache Karte, nichts Ausgefallenes.
00:02:16Einfach ein Container, Flexbox aktivieren, etwas Padding hinzufügen.
00:02:21Ich füge einen Titel, etwas Text und einen Button hinzu.
00:02:24Vielleicht noch etwas mehr hier, noch eine Karte, ich kann es kopieren und einfügen.
00:02:28Ich nehme ein paar schnelle Anpassungen vor.
00:02:30Wir wechseln in den Inspect-Modus.
00:02:32Und das ist der wichtige Teil.
00:02:33Man erhält eine saubere Struktur im tatsächlichen CSS: Flexbox-Eigenschaften, Abstände, Layout.
00:02:39Keine grobe Übersetzung, sondern etwas, das man bereits versteht.
00:02:42Man kann dies kopieren und direkt in das eigene Projekt einfügen.
00:02:46Man hat auch Varianten, Tokens, Prototypen-Abläufe und Export als SVG.
00:02:51Das ist das Wichtige hierbei.
00:02:52Dies beseitigt eine Menge Reibungsverluste für
00:02:54Entwicklerteams, besonders wenn man den gesamten Stack selbst besitzt.
00:02:58Lassen Sie uns nun über den Teil sprechen, bei dem die meisten Entwickler skeptisch werden.
00:03:02Zuerst klingt das wie "Cool, noch ein Design-Tool".
00:03:06Aber der Unterschied liegt nicht im Aussehen, sondern in der Funktionsweise.
00:03:09Figma simuliert Layouts.
00:03:12Auto-Layout ist von Flexbox inspiriert, aber man muss am Ende trotzdem alles im Kopf
00:03:16übersetzen.
00:03:17Penpot ist von Anfang an näher an echtem CSS, also
00:03:21gibt es weniger mentale Umrechnung zwischen Design und Code.
00:03:25Dann ist da noch der "Lock-in"-Effekt, richtig?
00:03:26Figma verwendet proprietäre Dateiformate.
00:03:29Wir kennen die Preismodelle pro Nutzer.
00:03:31Penpot ist Open-Source, man kann es also selbst hosten.
00:03:34Die Daten bleiben in SVG, CSS und JSON.
00:03:38Auch die Übergabe ist anders, denn in Figma fühlt es sich wie eine zusätzliche Ebene an, oder?
00:03:42Dev-Mode, Plugins, zusätzliche Schritte.
00:03:45In Penpot ist es direkt eingebaut.
00:03:47Die Inspect-Ansicht ist bereits näher an dem, was wir tatsächlich brauchen.
00:03:50Und um fair zu sein: Figma ist großartig.
00:03:53Ich benutze es, es ist riesig, es ist ein ausgereiftes Ökosystem.
00:03:56Aber Penpot wurde eindeutig von Anfang an mit Blick auf Entwickler gebaut.
00:04:00Was mögen Entwickler also eigentlich daran?
00:04:02Nun, die wichtigste Sache, die ich bereits erwähnt habe, oder?
00:04:04Es ist einfach, das Übergabeproblem wird kleiner.
00:04:07Das ist riesig für uns.
00:04:08Man muss keine Layouts mehr zurückentwickeln.
00:04:11Man liest etwas, das direkt in CSS umgesetzt werden kann.
00:04:15Das zeigt sich auch in Design-Tokens.
00:04:18Farben, Abstände, Typografie – alles ist so strukturiert, wie man
00:04:22bereits in Code denkt.
00:04:24Und Self-Hosting ist für manche Teams eine große Sache.
00:04:27Wenn einem Datenschutz, interne Tools oder CI/CD wichtig sind, zählt all das, oder?
00:04:33Aber Open-Source ist nicht perfekt, kein Tool ist perfekt, nicht einmal Figma, richtig?
00:04:37Penpot kann jedoch bei sehr großen Dateien zu kämpfen haben.
00:04:40Das Plugin-Ökosystem ist viel kleiner.
00:04:43Und wenn man tief in Figma steckt, gibt es eine gewisse Lernkurve,
00:04:47aber ehrlich gesagt ist es super einfach zu erlernen, weil es eine andere Denkweise ist.
00:04:51Also ja, in einigen Bereichen weniger ausgefeilt, aber eine viel kleinere Lücke zwischen Design und
00:04:56Entwicklung, was ehrlich gesagt genau das ist, wonach viele von uns suchen.
00:04:59Ist es also die Nutzung wert?
00:05:01Ich denke schon.
00:05:02Es hat viel Spaß gemacht.
00:05:02Ich mag solche Tools.
00:05:03Also für viele von euch Entwicklern: Ja.
00:05:06Wenn Sie an Nebenprojekten oder irgendetwas entwicklerlastigem arbeiten, ergibt das Sinn,
00:05:10vor allem, wenn es Ihnen darum geht, Geld zu sparen, richtig?
00:05:12Sie bauen ein MVP, Sie bauen so etwas wie das hier,
00:05:14Sie versuchen Lock-in-Effekte zu vermeiden und
00:05:16Sie möchten Designs, die sauber in Code übersetzt werden.
00:05:19Nun, wenn Sie in einem großen Unternehmen mit riesigen Designsystemen sind,
00:05:23dann sind Sie bereits auf Figma ausgerichtet.
00:05:24Daher werden Sie wahrscheinlich nicht umsteigen, zumindest nicht über Nacht, aber
00:05:28das ist nicht wirklich der Punkt.
00:05:29Penpot muss nicht alles ersetzen, um nützlich zu sein.
00:05:31Für viele Teams, für viele von Ihnen, deckt es den Großteil dessen ab, was Sie brauchen,
00:05:35es beschleunigt die Entwicklung.
00:05:36Und deshalb beginnen immer mehr Entwickler, es tatsächlich auszuprobieren.
00:05:39Es reduziert die gesamte Übergabezeit, die nötig ist, um ein Design in Code zu überführen.
00:05:45Wenn Sie es ausprobieren wollen, ist es ganz einfach.
00:05:46Gehen Sie auf die Penpot-App, nutzen Sie die Cloud-Version oder tun Sie, was ich tue.
00:05:50Hosten Sie es mit Docker selbst, wenn Sie mehr Kontrolle haben wollen, genau wie hier.
00:05:54Wenn Ihnen Open-Source-Tools und Coding-Tipps wie dieser gefallen,
00:05:57abonnieren Sie den Better-Stack-Kanal.
00:05:59Wir sehen uns im nächsten Video.