PAGE online

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-­Design­tool Figma gelingt

Ohne kluge Onlinetools sind Digitalagenturen nicht arbeitsfähig. Das gilt insbesondere In Zeiten von Corona, denn viele UX/UI Designer arbeiten jetzt im Homeoffice. So erlebt nun auch das kollaborative Designtool Figma, das bereits 2016 auf den Markt kam, seinen Durchbruch. Figma ist cloud­basiert, darum bestanden auf Auftraggeberseite bis­her Vorbehalte in puncto Datensicherheit – obwohl die meisten Anwender kaum personenbezogene Da­ten austauschen. Doch seit sich alle an die Kollaboration via Zoom oder Microsoft Teams gewöhnt haben, wird die Cloud auch für Entscheider immer attraktiver. Zudem weiß, wer je in Echtzeit mit Kolle­gen an einem Dokument gearbeitet hat – und sei es auch nur mit Google Docs –, um die Zeitersparnis.

Bei Figma registrierte Teammitglieder können ge­meinsam an einer Datei arbeiten – in Echtzeit! Wie praktisch das ist, zeigt das nachfolgende Tutorial, in dem wir den Prototyp einer fiktiven Webapp erstellen. Doch vorher ein paar Worte zu Figma:

Browserbasiertes Cloud-Designtool: Figma rockt

Bei Figma findet der Austausch zwischen Design, Development und dem Kunden gebündelt auf einer Plattform statt. Das macht Figma einzigartig. Auch dass es von Designern für Designer gemacht ist, merkt man sofort. Weil das Tool zu 100 Prozent im Bowser funktioniert, lässt es sich von jedem Betriebssystem aus nutzen, egal ob macOS, Windows oder Linux – anders als Sketch, das sich nur für macOS eignet und zudem nicht echtzeitfähig ist. Figma speichert die Projekte kontinuierlich in der Cloud. Das hat den Vorteil, dass mehrere Personen zeitgleich in derselben Datei arbeiten können, ohne sich gegenseitig zu überschreiben. Die Cursor tragen den Vornamen des jeweiligen Teammitglieds, man sieht ­also, wo der Kollege gerade arbeitet. Zusätzlich machen Notifications Änderungen für jeden sichtbar.

Alle wichtigen Werkzeuge und Funktionen sind da, wo man sie erwartet. Und alles andere, was nice to have wäre, stellt Figma über Third-Party-Verknüp­fungen bereit. Es gibt eine Framer-Integration für Advanced Prototyping und eine Zeplin-Integration für Specs. Viele andere Verknüpfungen sollen folgen.

Neben dem kollaborativen Arbeiten im Designprozess verfügt Figma über einen Prototype- und einen Code-Modus. Durch die Zusammenfassung die­ser drei Disziplinen sind Plug-in-Sammlungen wie etwa Craft, um InVision Freehand, Prototype oder Inspect zu nutzen, verzichtbar.

Figma-Tutorial: Jetzt wird’s praktisch

Nun zu unserem Tutorial. Als Basis dient das Design der fiktiven News-App twoaspects. Die kuratierte Nachrichtenplattform stellt stets zwei kontroverse Presseartikel zu einem Thema einander gegenüber. Für einen tollen Userflow statten wir die App zusätzlich mit ein paar Animationen aus. Los geht’s. Sie arbeiten direkt im Browser auf der Figma-Website.

1. Figma starten und Projekt anlegen

 

Figma-Tutorial Schritt 1

Nach der Registrierung auf der Figma-Website nen­nen 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«, »Proto­type« 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 Masterversi­onen 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

Abb. 2

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 Pro­to­typing-Spezia­listen Framer.

Abb. 3

Wir animieren nun das Scrollen durch die News­kacheln 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

Abb. 4

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-­Zei­chen, 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.

Abb. 5

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.

Abb. 6

Wir nutzen diese Funktion, um eine Klickreak­tion 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 herunter­skalieren . 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.

Abb. 7

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«.

Abb. 8

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

Abb. 9

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 Check­marks damit nicht möglich ist. Ist eine Kachel auf dem Hinweg schon mit einer Over­lay-Funk­tion behaftet, kann man auf dem Rückweg nicht noch eine Smart-Animate-Funktion auf sie anwenden.

Abb. 10

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 Lay­ers«, 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

Abb. 11

Für Feedback braucht man in Figma keine großen Ab­stimmungsrun­den. 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

Abb. 12

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 Ele­mente, mit denen sich mühelos Designsysteme erstellen lassen, die als einzige Quelle der Wahrheit dienen und so die Qualität von Digital­produkten erhöhen. Drei Elementklassen sind für komplexe Produkte beson­ders 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:

PDF-Download: PAGE 9.2020

Zeit für Ideen! 10 Themen, 10 Visionen ++ Behavioural Design ++ Selfmarketingtool Freefonts ++ Design & Wirtschaft nach Corona ++ Außergewöhnliche Agenturen ++ Making-of: Chatbot für lexoffice ++ Nachhaltiges Packaging ++ Tutorial: UX Design mit Figma ++ Ratgeber: Font-Management-Tools

8,80 €
AGB

 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Das könnte dich auch interessieren