Figma vs Penpot - wann welches Tool?
Design
Nutzererlebnisse schaffen
Design-Tools praegen, wie digitale Produkte aussehen und sich anfuehlen. Von kollaborativem UI-Design und Prototyping ueber Motion-Design bis hin zu Barrierefreiheits-Werkzeugen – dieser Stack zeigt die Tools, die aus Konzepten erlebbare Interfaces machen.
Gutes Design ist kein Selbstzweck – es entscheidet, ob Nutzer ein Produkt verstehen, nutzen und empfehlen. Der Design-Prozess laeuft typischerweise in Phasen ab: Nutzerforschung und Requirements, Wireframing (Lo-Fi Sketches), interaktives Prototyping (Hi-Fi), Usability-Testing und schliesslich der Handoff an die Entwicklung.
Moderne Design-Tools wie Figma haben die Zusammenarbeit zwischen Design und Entwicklung transformiert. Multiplayer-Editing, Kommentar-Funktionen und Dev-Mode (direkte CSS-/Handoff-Werte) machen den Uebergabeprozess transparenter. Penpot als Open-Source-Alternative laeuft self-hosted und speichert Designs als SVG – kein proprietaeres Format.
Design Tokens sind der Schlussel zur konsistenten Skalierung von Design Systemen: Farben, Abstaende, Typografie und Border-Radien werden als benannte Variablen definiert und automatisch in Code-Artefakte (CSS Custom Properties, JavaScript-Objekte) transformiert. Aenderungen am Design System wirken sich sofort in allen Produkten aus.
Barrierefreiheit (Accessibility) ist eine Design-Verantwortung, keine reine Entwickleraufgabe. WCAG 2.1/2.2 definiert drei Konformitaetsstufen (A, AA, AAA). Der Accessibility Theme Builder hilft, Farbpaletten zu generieren, die WCAG-Kontrastanforderungen einhalten. Frueh im Design-Prozess auf Barrierefreiheit zu achten spart spaetere Redesigns.
Haeufige Fragen & Expertenwissen
Figma und Penpot sind heute die relevantesten Optionen fuer kollaboratives UI-Design. Beide koennen Prototypen erstellen, Design Systeme verwalten und Teams im Browser zusammenarbeiten lassen.
Figma ist der Industriestandard mit dem groesstem Oekosystem: Tausende Plugins, eine grosse Community, Dev-Mode fuer Entwickler-Handoff und fortgeschrittene Auto-Layout-Funktionen. Adobe hat Figma uebernommen – die Zukunft der Plattform bleibt zu beobachten. Nachteil: proprietaer, cloudbasiert, Daten bei Adobe/Figma.
Penpot ist die Open-Source-Alternative: self-hostbar, speichert im offenen SVG-Format, keine Vendor-Abhaengigkeit. Fuer Teams mit Datenschutzanforderungen oder der Praeferenz fuer Open Source ist Penpot die konsequente Wahl. Das Feature-Set waaechst schnell, ist aber noch nicht vollstaendig mit Figma gleichauf.
Empfehlung: Agenturen und produktgetriebene Unternehmen ohne Datenschutzbedenken: Figma. Self-hosting-affine Teams, oeffentliche Einrichtungen: Penpot.
Was sind Design Tokens und warum sind sie wichtig?
Design Tokens sind die atomaren Entscheidungen eines Design Systems: benannte Variablen, die visuelle Eigenschaften wie Farben, Abstaende, Schriftgroessen und Schatten beschreiben – und zwar einmal, systemweit.
Warum wichtig? Ohne Design Tokens ist ein Design System ein Wiederholungs-Problem: Der gleiche Blauton wird in 50 Komponenten als Hexwert hardgecoded. Eine Farbanpassung erfordert dann 50 Aenderungen – und irgendwo geht etwas vergessen.
Mit Design Tokens:
- Primaerf arbe ist
color-brand-primary, nicht#1E40AF - Aenderung der Primaarfarbe: einmal in der Token-Datei, wirkt sich ueberall aus
- Theming (Light/Dark Mode) durch Token-Mapping ohne Code-Aenderung
- Designentscheidungen sind dokumentiert und versioniert
Technische Umsetzung: Style Dictionary (Amazon) oder Token Pipeline transformiert Token-Dateien in CSS Custom Properties, SCSS-Variablen, iOS Swift-Konstanten und Android-Ressourcen gleichzeitig.
Figma Variables und Penpot Assets unterstuetzen Design Tokens nativ als Bruecke zwischen Design und Code.
Barrierefreiheit im Design: WCAG und praktische Umsetzung
Web Content Accessibility Guidelines (WCAG) definieren, wie digitale Inhalte fuer alle Menschen zugaenglich sein sollen – einschliesslich Personen mit Seh-, Hoer-, Motorik- oder kognitiven Einschraenkungen. In der EU ist WCAG 2.1 Level AA fuer viele oeffentliche Angebote gesetzlich vorgeschrieben.
Die vier WCAG-Prinzipien (POUR):
- Perceivable (Wahrnehmbar): Inhalte muessen fuer alle Sinne zugaenglich sein (Alt-Texte, Untertitel, ausreichender Kontrast)
- Operable (Bedienbar): Alle Funktionen per Tastatur bedienbar, kein Inhalt der Anfaelle ausloest, genuegend Zeit fuer Interaktionen
- Understandable (Verstaendlich): Klare Sprache, vorhersehbares Verhalten, hilfreiche Fehlermeldungen
- Robust: Kompatibel mit assistiven Technologien (Screenreader, Braille-Zeile)
Praktischer Einstieg: Farbkontrast mit dem Accessibility Theme Builder pruefen, alle interaktiven Elemente per Tab erreichbar machen, bedeutungsvolle Alt-Texte schreiben, Fokus-States designen.
Die wichtigsten Themen im Design-Stack ...
Design
UI
UX
Prototyping
Wireframing
Figma
Motion Design
Accessibility
Barrierefreiheit
Design System
Design Tokens
Kollaboration
Themenbereiche aus dem Design-Stack
UI/UX Design & Prototyping (3)
Visuelle Produktion & Barrierefreiheit (3)
UI/UX Design & Prototyping
Von der ersten Skizze bis zum klickbaren Prototyp: Diese Tools begleiten den gesamten Design-Prozess - von Wireframes über Designs bis hin zum Developer-Handoff mit exportierbaren Design Tokens.
Visuelle Produktion & Barrierefreiheit
Motion Design, professionelle Bildbearbeitung und Accessibility-Werkzeuge ergänzen den Design-Prozess um wichtige Dimensionen - von animierten UI-Elementen bis hin zur WCAG-konformen Farbgestaltung.
Genug vom Design-Stack?
Diese Stacks könnten dich auch interessieren ...