UI/UX-Design mit Figma, Teil 3 Arbeiten mit Bibliotheken und Komponenten

Anbieter zum Thema

Windhoff Group

Vom kunterbunten Bonbon-Laden zum biederen Vektorgrafikeditor: Unser Figma-Workshop hat in den ersten beiden Teilen einen großen Sprung gemacht. Nun wollen wir beide Welten zusammenführen.

Man kann mit Figma bei Null anfangen und komplett eigene Designs, Mockups und Dialoge kreieren. Deutlich schneller und einfacher geht es jedoch mit bereits existierenden Komponenten.

UI- und UX-Design mit Figma

Auf dem Figma-Marktplatz existieren Hunderte von Bibliotheken. Mal beinhalten diese rudimentäre Design-Elemente wie Diagramme oder geometrische Formen, mal komplette, interaktive App-Prototypen für zum Beispiel Banking- oder Booking-Anwendungen, mal typische Komponenten für bestimmte Workflows wie etwa Abstimmungen oder Teamwork nach Scrum.

Besonders attraktiv dürften die Bibliotheken für komplette Design-Systeme sein, die von vielen Betriebssystemen beziehungsweise Desktop-Umgebungen vorgegeben werden. Also beispielsweise für eine Formensprache, wie es so schön auf Deutsch heißt, wie Googles Material Design, das in diesem Jahr 10-jähriges Jubiläum feiert.

Das Figma-Kit für Material 3 gehört mit 642.000 Nutzern auch zu den populärsten Bibliotheken. Anbieter ist übrigens Google selbst. Die Bibliothek steht unter der Creative-Commons-Lizenz CC-BY-4.0.

Man erkennt hier im Bild umgehend bekannte Elemente und möchte eigentlich sofort loslegen. Doch hier liegt die Tücke im Detail – besser zu zeigen am Beispiel Windows UI 3, bereitgestellt durch Microsoft und mit 28.900 angegebenen Nutzern diesbezüglich schon eine ganze Nummer kleiner als das Material-Kit.

Windows UI 3

Die Windows-UI-Bibliothek gehört zum Windows App SDK, auch zu finden im Microsoft-UI-XAML-Repository auf GitHub. Die Formensprache hört hier eigentlich auf den Namen Fluent – und mit Fluent 2 Web gibt es auch eine Figma-Sammlung für Web-Design.

Aber zurück zum Windows-Desktop und der Tücke – vorangestellt mal ein Screenshot. Hier sehen wir das Inhaltsverzeichnis der Bibliothek – und nicht absichtlich weit herausgezoomt, sondern in der Standardansicht. Figma ist eben kein Verwaltungswerkzeug für Designs. Es gibt keine Management-Funktionen für Bausteine, keine fertigen Inhaltsverzeichnisse, Bereiche für Meta-Informationen und dergleichen.

Tatsächlich ist Figma „nur“ ein Bildbearbeitungsprogramm für Vektorgrafiken inklusive grundlegender Funktionen, um sich durch miteinander verbundene Elemente zu klicken. Folgerichtig bestehen die Bibliotheken und Sammlungen schlicht aus ganz normalen Figma-Elementen. Das Inhaltsverzeichnis im Bild oben wurde manuell aus Dutzenden von Text-Ebenen und Trenn-Elementen aufgebaut. Im vorangestellten Bild ist das noch einmal deutlich zu erkennen.

Das Gleiche gilt für etwaige Anleitungen in den Sammlungen, Readmes, Change Logs und so weiter. In Windows UI 3 gibt es den Bereich „Guidance & Charts“, der endgültig Fragen aufwirft. Auch hier handelt es sich wieder schlicht um ein riesiges Canvas mit Hunderten verschachtelter Elemente. Das führt und zur folgenden praxisnahen Frage: Wie nutzt man denn nun die Bibliothek?

Bibliothek nutzen

Zunächst gilt es, die gewünschte Bibliothek in der Figma-Community zu finden und sie per „Open in Figma“-Button zu öffnen. Grundsätzlich gibt es mehrere Möglichkeiten, mit dieser oder sonst einer Design-Sammlung zu arbeiten. Die Standardvariante ist tatsächlich schlichtes Copy-and-Paste.

Im Bereich „Guidance & Charts“ wird also per Strg-Taste und Mausrad massiv gezoomt und mit gedrückter mittlerer Maustaste verschoben, bis das gewünschte Element in ausreichender Größe zu sehen ist. Mit all diesen Elementen ist es dann möglich, direkt an Ort und Stelle zu arbeiten; hier als Beispiel die Umwandlung in die Dark-Theme-Variante.

Alternativ ist es möglich, den Bereich „Assets“ zu nutzen, in dem alle zusammengestellten Elemente noch einmal auffindbar sind, wahlweise über die Hierarchie oder die Suchfunktion. Von hier aus lassen sich die Bausteine über einen eigenen Dialog als Instanz einfügen.

Die Arbeit direkt in der Bibliothek ist ja gut und schön, aber wie nutzt man sie nun in einem eigenen Projekt? Copy-and-Paste funktioniert Out-of-the-Box auch aus der Bibliothek in die eigene Figma-Datei hinein. Dort taucht die Bibliothek allerdings vorerst nicht auf.

Die Bibliothek ist im Figma-Kontext letztlich nur eine einzelne Design-Datei, die über „Open in Figma“ schlicht als Kopie im eigenen Arbeitsbereich landet – genauer gesagt als Draft. Um sie in anderen Design-Dateien auf traditionelle Art als Bibliothek nutzen zu können, muss sie zunächst aus dem Drafts-Bereich in den Projekt-/Teambereich verschoben und anschließend veröffentlicht werden. Wobei „veröffentlichen“ hier nur Ihren internen Bereich meint. Beide Aktionen werden über das Menü am Dateinamen ausgeführt.

In der kostenlosen Variante ist ein Veröffentlichen nicht möglich, Copy-and-Paste funktioniert aber. Im eigenen Projekt kann aus dem eingefügten Element erneut, via Kontextmenü, eine Komponente erzeugt werden, die sich dann zu etwaigen eigenen Komponenten gesellt.

Sofern die die Komponente in der Bibliothek Varianten hatte, bleiben auch diese erhalten und auswählbar. Tipp für Nutzer des kostenfreien Accounts: Um komfortabel mit einer Bibliothek zu arbeiten, bietet es sich an, eine neue Page einzufügen, das Design zu erstellen und anschließend bei Bedarf den gesamten Page-Inhalt per Copy-and-Paste in ein anderes Design-File zu bugsieren.

Die Arbeit mit Bibliotheken ist in Figma nicht immer wirklich intuitiv, weil Figma eben „nur“ ein Malkasten ist und nicht gleichzeitig Aktenschrank. Den haben Nutzer mit dieser Herangehensweise quasi „hineingehackt“. Man stelle sich ein Buch vor, komplett auf eine Seite gedruckt, lesbar nur mit Riesenlupe. Ja, irgendwie erinnert eine Figma-Bibliothek an Microfiches.

Spannende Bibliotheken

Bibliotheken für die Formsprachen von Microsoft, Google und Apple sind reichlich zu finden, von den Anbietern selbst, zudem Content aus der Community. Auch Branchengrößen wie Atlassian bieten Komponenten, meist jedoch nicht in dem Ausmaß wie die Betriebssystementwickler.

Eine große Auswahl gibt es im Bereich Wireframe-Design, beispielsweise das Paper Wireframe Kit, das abermals zeigt, dass hinter vielen Dingen in der Figma-Welt Handarbeit steckt – der häufig genutzte Avatar ist zum Beispiel eben kein einzelnes Element, keine Komponente, sondern eine Gruppe von Formen:

Ebenfalls zahlreich vertreten sind Bibliotheken mit Diagrammen, beispielsweise Full Charts Components, die sicherlich auch in keiner Manager-lastigen Umgebung fehlen sollten – die Klientel wird es freuen. Und speziell für Entwicklerinnen und Entwickler ist das Widget Code Editor von Dylan Freedman einen Blick wert: Das kleine Werkzeug rendert eingegebenen Code für die grafische, skalierbare Darstellung – inklusive Syntax-Highlighting für unter anderem HTML, JavaScript, Python und JSON.

Ein letzter Aspekt von Figma steht noch aus: Plug-ins. Und diese bringen zum Beispiel die Funktionen Figma-to-Code und Code-to-Figma ins Spiel – da wird der Rahmen eines Grafikeditors endgültig verlassen.

UI- und UX-Design mit Figma

(ID:49953078)