UI-Design mit Figma
Komponenten und klickbare Prototypen in Figma dienen zugleich als Grundlage für die Freigabe und für die Entwicklung.
Ausgangslage
Figma ist das Standardwerkzeug für UI-Design. Alle Beteiligten arbeiten im Browser in derselben Datei und sehen jederzeit den aktuellen Stand.
Prototypen vor der Entwicklung
Klickbare Prototypen zeigen, wie sich eine Anwendung anfühlt, bevor Code entsteht. Abläufe lassen sich so mit Nutzern testen, und Schwächen fallen auf, solange Änderungen noch günstig sind. Per Link geteilt, erreichen die Prototypen auch Beteiligte ohne Figma-Zugang.
Arbeiten mit Komponenten
Komponenten mit Varianten: Buttons, Formulare und Karten in allen Zuständen.
Auto Layout: Elemente passen sich an Inhalt und Bildschirmbreite an.
Variablen: Farben, Abstände und Typografie als Design-Tokens, auch für einen dunklen Modus.
Bibliotheken: gemeinsame Komponenten für mehrere Projekte oder Marken.
Übergabe an die Entwicklung
Im Dev Mode lesen Entwickler Maße, Design-Tokens und Grafiken direkt aus der Datei. Designer und Entwickler arbeiten bei uns im selben Team, deshalb entsprechen die Figma-Komponenten denen im Code. Die Figma-Dateien bleiben die Grundlage für spätere Erweiterungen.