UI/UX-Design mit Figma, Teil 2 Die Arbeit im Figma-Editor

Ein paar Gehversuche im Editor-Modus von Figma zeigen wohl am besten, wie das kollaborative Design-Tool funktioniert und was sich damit anstellen lässt. Dabei wird auch ersichtlich, warum die Anwendung anfänglich etwas verworren erscheint.

Figma kann beides: Auf den ersten Blick begeistern und (v)erschrecken. Die bunte Fassade, die Demo-Projekte, das umfangreiche Angebot an Erweiterungen und Design-Elementen aus der Community schaffen schnell das gewisse Haben-Wollen-Gefühl.

UI- und UX-Design mit Figma

Für Verwirrung sorgen im Figma-Kontext vor allem zwei Aspekte: Öffnet man zum Beispiel ein größere Community-Vorlage, landet man bisweilen in einer schier unendlich herausgezoomten Ansicht, bei der man sich zunächst fragen muss, wie diese denn zu nutzen ist –Erwartungskonformität steht hier jedenfalls nicht im Vordergrund. Auf der anderen Seite steht die Sprache.

Figma setzt im Grunde auf ein sehr simples Konzept was den Aufbau eines App-Designs angeht. In Artikeln, der Dokumentation, Erweiterungen, Foren usw. werden die simplen Editor-Elemente jedoch häufig mit generischen Begrifflichkeiten aus der Designwelt ersetzt. Beispielsweise ist häufig von Containern die Rede, die es als Element aber gar nicht gibt – gemeint ist hier eine jedwede Gruppe von Elementen, dort ein übergeordneter Rahmen.

Im Folgenden ist praktisch nachvollziehbar, wie sich Figma-Projekte grundsätzlich zusammensetzen. Wichtig dabei: Figma gibt nicht wirklich vor, wie Assets, Screens, Styles etc. letztlich zu einem App-Prototypen, einer Bibliothek oder einer Website zusammenwachsen müssen. Vielmehr liefert es einen Werkzeugkasten und eine Leinwand. Die Basics dabei lauten:

• Styles anlegen und anwenden

• Komponenten, Varianten und Instanzen

• Gliederung in Section und Frames

• Prototyping

Das Ganze ist ein wenig kleinteilig, abstrakt und nicht unbedingt ästhetisch ansprechend, illustriert aber den oder zumindest einen Arbeitsansatz – eben durch Verzicht auf alles Überflüssige oder Optionale.

Damit klar wird, warum ein Einstieg über die Basics hilfreicher ist, als direkt mit einem Framework anzufangen, hier ein Screenshot der Community-Erweiterung zu Windows UI. Diese Art der Präsentation ist üblich, etwas gewöhnungsbedürftig, muss aber nicht zwangsläufig auch so genutzt werden. Für erste Schritte ist so ein Mammutprojekt sicherlich nicht optimal.

Styles in Figma

Die Arbeit mit Styles ist einfach und für den Einstieg ein guter erster Schritt. Styles gibt es separat für Farben, Texte, Effekte und Raster. Für unser Beispiel sollen zunächst zwei Farb-Stile genügen: „CompanyBlue“ und „CompanyRed“ als Standardfarben. Styles lassen sich über den Punkt „Local styles“ in der rechten Toolbar erstellen.

Wenn Sie nun ein beliebiges Objekt anwählen oder zeichnen, hier etwa ein Rechteck, lassen sich die Stile über das 4-Punkte-Symbol darauf anwenden. Stile funktionieren also wie vereinfachtes CSS.

Komponenten, Varianten, Instanzen

Eben wurde noch ein simples Rechteck mit einem Style verknüpft. Möchte man erreichen, dass ein solches Objekt nun mehrfach im Projekt vorkommt, sollte es wiederverwendbar sein. In Figma heißt das: Es muss zu einer Komponente gemacht werden. Komponenten lassen sich dann auch mit anderen geteilt werden.

Als Beispiel soll hier ein Stern herhalten, der schlicht via Kontextmenü zu einer Komponente gemacht wird. Hier im Bild links findet sich dann auch direkt die nun hierarchische Darstellung, quasi „Stern 1 in Komponente 1“.

Freilich dürfen Komponenten auch mehrere Elemente beinhalten, aber dazu später mehr. Wenn Sie diese Komponente nun an einigen Stellen platzieren wollen, geht das wahlweise per Copy-and-Paste oder per Alt+Drag mit der Maus. Dabei werden allerdings keine wirklichen Kopien der Komponenten erzeugt, sondern Instanzen. Ändert sich die Hauptkomponente, ändert sich die Instanz. Hier besteht eine Abhängigkeit.

Nun ist es üblich, derlei Bausteine in Varianten einzusetzen, die sich ein wenig unterscheiden. Varianten lassen sich auf zwei Wegen anlegen. Die sichere Variante besteht darin, über das Kontextmenü „Main component/Add variant“ auszuwählen. Alternativ kann man zunächst manuell die gewünschten Objekte erstellen und jedes einzelne in eine Komponente konvertieren, alle Komponenten-Varianten markieren und dann auf „Combine as variants“ in der rechten Werkzeugleiste klicken.

Im Bild sind nun drei Sterne zu sehen, die bereits als Varianten kombiniert wurden, sowie drei ausgewählte Ellipsen-Komponenten, die noch kombiniert werden müssen. Erneut links im Bild die hierarchische Darstellung: Alle Komponenten-Varianten landen unter einem gemeinsamen Dach. Das macht auch die Verwaltung langfristig deutlich übersichtlicher.

Bevor Varianten nun „angewandt“ werden, erhöhen wir die Komplexität etwas: Gewünscht ist ein Gebilde aus Stern und Ellipse oben drauf. Ziehen Sie also beispielsweise mit gedrückter ALT-Taste beliebige Stern- und Ellipsen-Komponenten-Varianten an die gewünschte Stelle und arrangieren Sie die beiden Ebenen – zum Beispiel mit den Ausrichtungswerkzeugen oben rechts in der Toolbar.

Diese Kombination aus Stern und Kreis wird nun, wie vorne zu sehen, abermals zu einer Komponente konvertiert. Nun ist es an der Zeit, alle bisherigen Elemente zu kombinieren. Sterne und Ellipsen sind bislang händisch eingefärbt – besser wären natürlich die anfangs erstellten Stile. Also werden Variante 3 der Stern-Komponente und Variante 3 der Ellipsen-Komponente auf unser Standard-Blau beziehungsweise Standard-Rot gesetzt.

Markiert man nun die neue Komponente (Ellipse auf Stern), lassen sich die Varianten von Ellipse und Stern beliebig verändern. Hier im Bild wurde entsprechend die jeweils dritte Variante ausgewählt, die über die zugeordneten Stile nun Blau und Rot zeigen.

Diese neue, finale Komponente lässt sich nun verändern, indem entweder andere Varianten gewählt oder die Varianten der Hauptkomponenten selbst verändert werden – oder die zugeordneten Stile. Über Variablen statt Styles ließe sich all dies noch komplexer gestalten, um etwa Abhängigkeiten zwischen Einstellungen zu schaffen. Relevant wird das allerdings erst bei größeren Projekten, zudem sind Variablen derzeit noch ein Beta-Feature.

Section und Frames

Nun wird es bündig und simpel. Bislang liegen alle Elemente auf dem Canvas, der nackten Leinwand, auf Seite 1 – für ein zweites Canvas bräuchte es dann eine Seite 2.

Auf dem Canvas selbst gibt es zwei wesentliche Elemente für die Strukturierung: Frame und Section. Die Section dient vor allem für die eigene Planung und Übersicht. In unserem simplen Beispiel könnten zum Beispiel die Komponenten und Varianten in eine eigene Sektion gepackt werden. Diese lässt sich einfach um die vorhandenen Elemente ziehen.

Ein Frame wiederum steht – in der Regel – für die einzelnen Screens einer App oder Webseite. Daher stehen bei Klick auf das Frame-Tool auch Voreinstellungen wie „Desktop“ oder „MacBook Air“ mit entsprechenden Ausmaßen zur Verfügung. Die endgültige blau-rote Komponente landet daher in einem solchen Frame – die Basis für das Prototyping.

Prototyping

Ein einzelner Frame/Screen macht natürlich noch keine App, der Aufruf des Prototyping würde lediglich genau diesen Frame anzeigen. Für eine simple Demo genügt es, den Frame ein paarmal zu duplizieren und die Varianten ein wenig durcheinander zu würfeln – hier der Übersicht halber alles verpackt in einer neuen Section.

Sobald der Prototyping-Modus oben rechts in der Toolbar aktiviert ist, können per Maus Verbindungen zwischen den einzelnen Frames beziehungsweise Komponenten gezogen werden. Alternativ können Sie die Interaktionen ebenfalls über die Toolbar definieren. Neben der reinen Navigation zwischen den Komponenten lassen sich an dieser Stelle auch Variablen manipulieren, Abfragen starten, Links aufrufen und so weiter.

Nun fehlt nur noch ein letzter Schritt: Ausprobieren! Über das kleine Play-Icon direkt bei „Frame 1“ lässt sich der eben erstellte Flow, wie derlei Klick-Interaktionen in Figma heißen, starten. Sie landen also in einem interaktiven Vorschaufenster. In diesem Beispiel-Flow führt schlicht Frame 1 zu Frame 2, dieser zu Frame 3 und der wieder zu Frame 1.

Freilich gibt es noch etliche Funktionen zu entdecken, aber die Basics sind damit erledigt. Im nächsten und letzten Teil der Serie geht es dann an den Community-Content: Eine kleine Entdeckungsreise und Tipps zum Umgang mit den Erweiterungen.

UI- und UX-Design mit Figma

(ID:49923319)