UI- und UX-Design mit Figma, Teil 1 Figma – Design, Mockup, Prototyping und mehr

Willkommen in der bunten Welt von Figma – auf den zweiten Blick aber wohl eher im Rabbit Hole. Was steckt hinter der Plattform, was kann sie und vor allem: Wie funktioniert sie?

Figma taucht seit ein, zwei Jahren immer häufiger in der Welt des grafischen App- und Web-Designs auf. Aber auch, wenn es um Online-Meetings geht, um Hochzeitseinladungen oder die Präsentation von Jahresergebnissen. Erwähnungen finden sich in der Presse, in GitHub-Repositories, Foren und natürlich Social Media.

Im Gespräch mit IT-lern in der realen Welt fällt allerdings schnell auf, dass das junge Figma außerhalb der aktiven Community häufig gar nicht dermaßen präsent und bekannt ist. Eigentlich ein Wunder, wenn man bedenkt, dass Adobe im Jahr 2022 versucht hat, Figma für stolze 20 Milliarden Euro zu übernehmen. Solche Größenordnungen sollten Interesse wecken.

In dieser Mini-Serie lernen wir Figma deshalb etwas näher kennen. Das ist nämlich gar nicht so einfach. Der erste Blick auf Figma gleicht dem Antlitz eines Bonbon-Ladens in Kinderaugen – na klar, schließlich geht es bei Figma um Design. Beim zweiten Blick hinter die bunten Kulissen und vielversprechenden Demoprojekte ändert sich jedoch der Eindruck.

UI- und UX-Design mit Figma

Zum einen ist Figma deutlich komplexer als viele althergebrachte Mockup-Pixel-Schubser und zum anderen ist der Einstieg – unter anderem wegen dieser Komplexität – nicht gerade trivial. Mit hinein spielen aber auch die typische, leicht kryptische, Buzzword-lastige Sprache und nicht ganz alltägliche Usability-Ansätze spielen da eine Rolle.

In diesem ersten Teil gehen wir vor allem darauf ein, was Figma leistet und wie es grundsätzlich funktioniert. Auch für ein paar erste praktische Eindrücke ist noch Platz. Anschließend vollziehen wir in einem Mini-Projekt die Arbeitsschritte im Detail nach, um zuletzt die Arbeit mit Design-Systemen, beispielsweise der aktuellen Windows UI, kennenzulernen.

Was leistet Figma?

Gleich zu Beginn wichtig zu verstehen: Figma ist eine kollaborative, Cloud-basierte SaaS-Lösung, was natürlich sofort Sicherheitsbedenken auf den Plan ruft. Daher darf sich Figma auch mit den gängigen Zertifizierungen (ISO 27001, CSA etc.) schmücken und will auch reines EU-Hosting anbieten, die schrittweise Migration hat im dritten Quartal 2023 begonnen. Datenschutz sollte also zumindest kein Showstopper sein.

Mittlerweile bietet Figma neben der Design-Plattform, ebenfalls Figma genannt, FigJam an. Dabei handelt es sich um ein kollaboratives Whiteboard zur Unterstützung von Meetings mit umfangreichen Werkzeugen zum Gestalten, Kommentieren, Abstimmen und so weiter. Hier geht es aber explizit um das Produkt namens Figma.

Auf rein technischer Ebene könnte man Figma schlicht als kollaborativen Editor für Vektorgrafiken beschreiben, eine Art Mehrnutzer-Inkscape. In der Wikipedia zum Beispiel landet Figma durchaus in Listen mit solchen Editoren. Das wird der Plattform nicht gerecht, weil Vektorgrafiken hier schlicht Mittel zum Zweck sind und die Funktionalität über den reinen Grafikeditor hinaus deutlich interessanter ist. Dennoch: Es ist enorm hilfreich, bereits Erfahrungen mit Editoren wie Inkscape oder Adobe Illustrator zu haben. Das eigentliche Gestalten läuft nämlich auf genau dieser Ebene ab.

Darüber hinaus kümmert sich Figma um Workflows, Verwaltung und letztlich Dinge wie die Umsetzung einer Corporate Identity (CI). Ein wichtiger Aspekt ist hier, dass gestalterische Elemente – und sei es nur eine farbige Ellipse – zu wiederverwendbaren Komponenten deklariert werden können.

Eine solche Ellipsen-Komponente ließe sich so zentral verwalten und im ganzen Unternehmen zur Verfügung stellen, um beispielsweise CI-Vorgaben einzuhalten. Komponenten lassen sich zum Beispiel ganz einfach im Editor duplizieren. Sobald eine Instanz per Maus umgeformt wird, passt Figma auch alle anderen Instanzen in Echtzeit an.

Doch vielleicht benötigen wir eine CI-angepasste Ellipse mal in grün, mal in blau, mal hervorgehoben, mal ausgegraut. Dafür setzt Figma auf sogenannte Styles. Styles lassen sich zum Beispiel für Schriftarten oder Farben definieren und dann auf Komponenten anwenden. Der große Vorteil: Ändert sich das Firmen-Blau um ein paar Nuancen Richtung Lila, können alle Komponenten mit dem Style „Firmen-Blau“ zentral angepasst werden. Eine gewisse Ähnlichkeit zu CSS ist hier nicht zu leugnen.

Freilich beschränken sich Komponenten nicht auf einzelne Grafikelemente. In der Praxis könnte eine Komponente zum Beispiel ein fertiger Button sein, bestehen aus Ellipse, Text, Schlagschatten, zusätzlicher Grafik, vorgegebenen Seitenabständen und so weiter. Über Styles könnten dann etwa Status wie „gedrückt“ oder „inaktiv“ umgesetzt werden.

Es gibt noch deutlich komplexere Möglichkeiten, eigene Design-Systeme zu erstellen. Sollen Stile zum Beispiel hierarchisch voneinander abhängig sein, lässt sich dies in Figma mit Variablen umsetzen – unabhängig von den „Styles“. Im Detail wird es schnell kompliziert, wichtig ist hier vor allem der Aspekt, dass sich mit Figma auch umfangreiche CI-Regelwerke umsetzen lassen.

Der Editor selbst dürfte für SVG-Veteranen keinerlei Hürden darstellen, hier verbirgt sich keine sonderlich große Komplexität. Einsteigern, die aus der Pixel-Welt kommen, könnte der streng hierarchische Ansatz etwas Eingewöhnung abverlangen. Hierarchien sind aber nicht nur nützlich, um Komponenten wie „Kreis in einem übergeordneten Quadrat“ zu erstellen. Auch für das Prototyping ist das unabdingbar.

Prototyping und Logik

Bislang könnte Figma der Beschreibung nach auch ein General-Purpose-Editor sein. Aber der Schwerpunkt liegt auf UI/UX, also im weitesten Sinne auf App-Entwicklung. Und beim Prototyping ist nun wieder Hierarchie relevant. Figma setzt auf der obersten Ebene auf „Sections“, die man zum Beispiel als einzelne Screens einer App nutzen kann – eine erste Section wäre häufig also der Splash-Screen.

Das Prototyping beschreibt nur, welche Section bei Klick/Tap auf einen Button als nächstes gezeigt wird: Button wählen, per Drag-and-Drop eine Verbindung zur gewünschten Section beziehungsweise einem untergeordneten Element ziehen und schon ist der Prototyp interaktiv.

Für Mockup-Tools ist das durchaus üblich. Figma setzt mit Variablen und konditionalen Abfragen aber eins obendrauf – derzeit allerdings noch im Beta-Betrieb. So könnte ein Button etwa bei Erstaufruf nur eine Hilfe anzeigen und bei weiteren Aufrufen weiterleiten. Hier kommt dann auch etwas Code ins Spiel!

Über die Logik-Features lassen sich mit Figma interessanterweise eben nicht nur Prototypen, sondern tatsächliche, kleine Apps entwickeln – aus der Community gibt es etwa Beispiele umgesetzter Timer zur Kontrolle von Meetings und gemeinsamen Design-Sessions.

Deutlich wichtiger: Die Zusammenarbeit mit Entwicklern, die dem Design Leben einhauchen. Auch hier kommen die Sections wieder zum Tragen, die per Klick auf den Status „Ready for dev“ gesetzt werden können – das Zeichen zum Loslegen für die Programmierer. Dies geht dank Plug-in direkt in Visual Studio (VS) Code. Design-Dateien können in VSC begutachtet, besprochen, kommentiert und mit Code ergänzt werden. Kleiner Drawback: Auch der Entwicklermodus ist derzeit noch in einer Beta-Phase.

Letztlich gibt es für allerlei Aufgaben kostenfreie wie -pflichtige Plug-ins, die die Arbeit immens erleichtern können. Hier mal ein kleines Beispiel, das zudem noch mehr Licht auf Figmas Arbeitsweise wirft: Der NFT Generator hilft beim massenhaften Erstellen von NFTs – beziehungsweise schlicht Kombinationen von Komponenten.

Angenommen, man möchte Fahnen mit drei Streifen erstellen. Es gibt die Komponenten Oben, Mitte, Unten und von diesen jeweils 20 farbliche Varianten. Nun kombinieren wir manuell die drei Komponenten in jeweils einer Variante zu einer ersten Fahne, beispielsweise Schwarz-Rot-Gold. Diese Zusammensetzung aus drei Komponenten-Varianten lässt sich nun selbst als neue Komponente definieren.

Dank der Abhängigkeiten „weiß“ das System natürlich, dass diese neue Komponenten aus bestehenden Komponenten zusammengesetzt ist, die wiederum in etlichen Varianten (also „Oben, blau“, „Oben, rot“ etc.) existieren. Der NFT Generator mach sich das zu Nutze und generiert alle möglichen, einzigartigen Kombinationen, also Schwarz-Rot-Grün, Schwarz-Rot-Blau, Rosa-Rosa-Rosa und so weiter und so fort – bis zu 10.000 Stück in einem Rutsch. Ein kurzes Video des Plug-in-Anbieters macht die Funktion sehr schnell sehr deutlich.

Figmas Stärke

So gut viele Figma-Werkzeuge auch umgesetzt sind und so durchdacht die Verwaltung konzipiert ist, einen Preis von 20 Milliarden Euro dürfte das kaum rechtfertigen. Figmas eigentlicher Wert basiert auf der Community. Die Menge an verfügbaren Plug-ins, Widgets und Komponenten ist schlicht erschlagend.

Vor allem die Design-Systeme/Vorlagen für zum Beispiel Windows- oder macOS-Vorgaben können enorm Zeit sparen. Die Arbeit damit ist allerdings etwas gewöhnungsbedürftig. Versuchen Sie mal, sich eine Bibliothek mit Hunderten Elementen vorzustellen – auf einem einzelnen Blatt Papier. Aber dazu mehr im Teil zwei zu UI- und UX-Design mit Figma.

UI- und UX-Design mit Figma

(ID:49897533)