
UX Design-Tutorial: So gelingt Prototyping mit Figma
Einen Klickdummy am Beispiel einer fiktiven News-App generieren und diesen dann ganz unproblematisch an den Developer übergeben? UI-Designerin Marina Nienhaus erklärt, wie dies im browserbasierten Cloud-Designtool Figma gelingt
1. Figma starten und Projekt anlegen
Nach der Registrierung auf der Figma-Website nennen wir unser erstes Projekt »News App«. Öffnen Sie das Projekt, zeigt sich auf der Arbeitsfläche oben rechts das sogenannte Properties Panel mit den drei Modi »Design«, »Prototype« und »Code« .
Zunächst wählen wir den Designmodus. Wer mit Sketch arbeitet, muss sich an ein paar neue Begriffe gewöhnen: Artboards heißen bei Figma Frames und lassen sich sogar ineinander verschachteln. Was bei Sketch Symbols genannt wird, sind bei Figma die Components, deren Masterversionen sich auf jeder beliebigen Seite erstellen lassen. Das heißt, sie müssen nicht zwingend in einer Extra-Library angelegt werden.
2. Basis-Screens erstellen und vervielfältigen

Als Grundlage für den zu bauenden Klickdummy dienen drei Mobile-Screens, die ich im Designmodus vorab vorbereitet habe. Der Home-Screen (Mobile/Home) besteht aus einem zweifarbigen Hintergrund, mehreren Textkacheln mit jeweils zwei Checkmarks und dem Logo der App, der Wortmarke twoaspects. Sie steht ganz oben, darunter ordnen sich die Kacheln an. Den zweiten Basis-Screen nennen wir Content-Screen (Mobile/Selection). Er zeigt das vom User ausgewählte Artikelpaar. Hier ist der Frame wie ein zweifarbiges Overlay mit abgerundeten Ecken und einem Close-Icon links oben gestaltet, wobei sich die zwei Artikel-Headlines auf einer eigenen mit Checkmarks versehenen Farbfläche befinden. Auch der dritte Basis-Screen sieht wie ein Overlay aus und zeigt einen Screenshot des Artikels – wir nennen ihn News-Screen (Mobile/Article). Dort fügen wir einen farbigen Header mit einer Close-Funktion ein.
3. Klickweg planen
Für eine konsistente Klickstrecke müssen wir die von uns erzeugten Basisscreens so duplizieren und so modifizieren, dass ein logischer Ablauf entsteht: Vom Home-Screen ganz links in Abbildung 2 geht es auf den Content-Screen, wo sich die beiden Artikel gegenüberstehen – hier zum Thema »Verkehrspolitik in Deutschland« – und dann weiter auf den News-Screen, wo der angeklickte Artikel in voller Länge erscheint.
Dann geht es wieder zurück, erst auf den Content-Screen, der nach Lektüre mit verändertem Häkchen erscheint, und dann zum Home-Screen. Da nach dem Rückweg ein Checkmark aktiviert sein soll, fügen wir den Content- und den Home-Screen ein weiteres Mal in die Selection-Strecke ein.
4. Vertikales Scrollen animieren
Im Prototype-Modus können wir nun Animationen vornehmen. Anders als bei Sketch, wo man seine Artboards beispielsweise in InVision weiterverarbeitet, muss man in Figma seine Frames nirgendwo hochladen, sondern nutzt die sehr gut gefüllte Palette an Interaktions- und Animationseinstellungen. Damit ist Figma schon sehr nah dran an den diversen Funktionen des Prototyping-Spezialisten Framer.

Wir animieren nun das Scrollen durch die Newskacheln auf dem Home-Screen. Der zweifarbige Hintergrund bleibt statisch, das App-Logo soll aber beim Scrollen von der obersten Kachel aus dem Bildschirm geschoben werden. Markieren Sie dafür das Logo und den Kachel-Frame und wählen Sie im Kontextmenü »Frame Selection« aus. Den auf diese Weise erzeugten neuen Frame nennen Sie »Content« und bringen ihn exakt auf eine Home-Screen-Länge. Nun kann man die Animation direkt auf diesen Frame anwenden. Dafür markieren wir ihn und wählen im Properties-Panel im Prototype-Modus unter »Overflow Behavior« die Aktion »Vertical Scrolling«.
5. Präsentation ansehen

Ob sich der Effekt so anfühlt wie beabsichtigt, lässt sich direkt testen. Dafür zieht man das kleine blaue Quadrat mit dem Play-Zeichen, das auftaucht, wenn man in den Prototype-Modus wechselt, an den frisch animierten Frame und klickt dann im Properties-Panel auf den Play-Button. Es öffnet sich ein neuer Tab mit einem Dummy zum Testen. In der »Presentation«-Ansicht lässt er sich über eine Einladung per Mail oder Link mit anderen teilen.

6. Klickreaktion erstellen
»Smart Animate« ist ein tolles Figma-Feature, mit dem sich beispielsweise softe Übergänge für Ladebalken kreieren lassen Prima ist, dass Figma identisch benannte Components über Frames hinweg erkennt und eine Veränderung gleich auf alle Components anwendet.

Wir nutzen diese Funktion, um eine Klickreaktion zu erstellen. Zu diesem Zweck kopieren wir den Home-Frame mittels Copy-and-paste und verkleinern die klickbare Kachel auf dem zweiten Frame ein wenig, indem wir sie um 10 Prozent herunterskalieren . Der Unterschied ist minimal, erzielt aber in der Interaktion den realistischen Effekt, als ob man einen Knopf herunterdrückt. Nun selektieren wir die erste Kachel auf dem Home-Screen, und es erscheint direkt ein blau-weißer Punkt an der rechten Seite, der die Verknüpfung visualisiert.

Diesen ziehen wir an den zweiten, sprich duplizierten Home-Screen. Im Properties-Panel wählen wir »On Click«, dann »Navigate To« und unter »Animation« die Funktion »Smart Animate«.

Dann wenden wir den beschriebenen Effekt auf die Checkmarks an. Wurde ein Artikel gelesen, soll er sich ein paar Sekunden nach Rückkehr auf den Homescreen umfärben. Auch hier kopieren wir den Frame, färben die Checkmarks um und wenden dazwischen »Smart Animate«, diesmal mit der Interaktion »After Delay«, an.
7. Overlays animieren und Klickstrecke definieren

Nun kommen wir zur Klickstrecke. Nach Klick auf den ersten Artikel öffnet sich der Mobile/Selection-Screen und schiebt sich von unten ein. Zur Animierung solcher Overlays bietet Figma eine eigene Interaktionsfunktion an, die uns hier aber nicht weiterbringt, da eine Smart-Animate-Aktion wie die Farbveränderung der Checkmarks damit nicht möglich ist. Ist eine Kachel auf dem Hinweg schon mit einer Overlay-Funktion behaftet, kann man auf dem Rückweg nicht noch eine Smart-Animate-Funktion auf sie anwenden.

Als Workaround duplizieren wir mit Copy-and-paste den Hintergrund des Mobile/Selection-Screens auf den Home-Screen und stellen diesen auf transparent. Wichtig: Die Components müssen denselben Namen haben, sonst löst »Smart Animate« keinen soften Overlay-Effekt aus. Wir verbinden also beide Screens, stellen unter »Interactionen« »After Delay« ein und wählen unter »Animation« »Move Out«. Nun aktivieren wir »Smart Animate Matching Layers«, um einen Fading-Effekt zu erzielen. Das gleiche Prozedere nehmen wir an den übrigen Frames vor und wählen je nach Ereignis »After Delay« oder »On Click« als Startsignal. Auf diese Weise verbinden wir alle Screens und landen zum Schluss wieder auf dem Home-Screen mit geänderter Checkmark.
8. Feedback vom Team einholen

Für Feedback braucht man in Figma keine großen Abstimmungsrunden. Alle schreiben jederzeit Kommentare. Rechts oben in der Menüleiste kann man sehen, wer sich gerade im Dokument befindet. Da mehrere Leute zeitgleich in einem Dokument arbeiten, bringt uns ein Klick auf ein Profilbild direkt zu der Stelle, wo diese Person gerade aktiv ist. Um einen Kommentar zu schreiben oder anzusehen, klickt man oben links in der Menüleiste auf die Sprechblase.
9. Projekt ans Development übergeben

Projekt einfach via Sharing-Link oder Einladung für die betreffende Person frei – fertig! Der Entwickler kann sich nun ganz einfach im »Code«-Modus via Copy-and-paste bei den Codes bedienen. Figma zeigt Farbwerte, Typografie, Position und Größe sowie das Spacing in CSS, Swift und XML an . Diese Spezifikationen bieten eine spürbare Erleichterung für die Programmierung.
Figma als Designsystem
Das Designtool Figma bietet zahlreiche Elemente, mit denen sich mühelos Designsysteme erstellen lassen, die als einzige Quelle der Wahrheit dienen und so die Qualität von Digitalprodukten erhöhen. Drei Elementklassen sind für komplexe Produkte besonders nützlich:
Styles sind Farben sowie Schriftarten, -stärken und -größen, aber auch Layoutraster und Effekte wie Schatten und Ähnliches. Sie lassen sich als Master definieren und auf identische Objekte überall in der App anwenden.
Components reichen von einfachen Buttons bis zu komplexen Modulen. Als Master-Component kann man sie zentral in der Library speichern und projektübergreifend nutzen. Um etwa einen Button überall ändern zu können, legen Sie eine Master-Component an, und jede Veränderung wirkt sich auf alle Button-Instanzen aus.
Library Files erlauben die gemeinsame Nutzung von Styles und Components für mehrere Dateien und ein Team oder eine Organisation.
Mehr erfahren: Figma, Framer Web und Adobe XD. Was sie können und kosten.
Projekt direkt bei Figma nachvollziehen
Material und Spezifikationen zu unserer News-App finden Sie im Projektordner »PAGE-NewsApp« auf der Figma-Website unter https://is.gd/newsappmitfigma
Marina Nienhaus, UI-Designerin beim Designstudio Mutabor in Hamburg, findet, dass sich räumliche Distanz mit Figma gar nicht mehr so weit weg anfühlt.
TIPP! Wenn Sie diesen Artikel im Print-Layout lesen möchten, laden Sie hier einfach die Ausgabe 9.2020 herunter: