Figma ist DAS Tool für Designer und Developer. Doch so mächtig es auch ist - manchmal kann es doch ein wenig verwirrend und kompliziert sein. Ich habe für Sie vier Hacks gesammelt, die das Arbeiten mit Figma deutlich verbessern und Ihren Workflow optimieren.
Autolayouts
Jeder Designer weiß, wie zeitintensiv und vor allem zermürbend es sein konnte, in Zeiten von Photoshop, später Sketch, Abstände händisch zwischen einzelnen Elementen nachzumessen. Der größte Nachteil daran war allerdings nicht alleine der Zeitaufwand, den das händische Nachmessen verursachte, sondern insbesondere die absolute, sprich statisch Positionierung der Elemente. Deswegen war die nachträgliche Anpassung des initialen Designs für diverse andere Bildschirmgrößen quasi unmöglich. Zwar machte Sketch in dieser Hinsicht im Vergleich zu vorherigen Programmen einiges besser, wirklich effizient wurde das Arbeiten für Designer allerdings erst, nachdem Figma Autolayouts als Feature veröffentlicht hatte.
Was versteht man unter Autolayout und warum sind diese so revolutionär?
Grundsätzlich können für alle Designmodule, egal ob kleine Module wie Buttons, mittlere wie Cardmodule oder High Level Module wie ganze Screens, Autolayouts definiert werden. Der entscheidende Vorteil ergibt sich durch die Vergabe von Attributen für jedes Modul, die Margins und Flexbox ähnlich sind. Im Frontend ist das bereits seit Jahren gängige Praxis.
Wie funktionieren Autolayouts
Möchte man z.B. einen Button gestalten, kann man über Autolayouts definieren, welche Abstände der Text innerhalb des Buttons zu den jeweiligen Außenkanten hat. Anstatt wie früher mühevoll nachmessen zu müssen, reichen jetzt zwei numerische Eingaben. Zusätzlich zu den Paddings kann man das "Verhalten" des Buttons definieren, also z.B., ob sich dieser an die Textgröße des Labels innerhalb über “Hug” anpassen, er eine statische Größe haben oder sich in seiner Größe an den Parent Container anpassen soll. Letztlich kann ebenso festgelegt werden, wie sich der Text innerhalb des Buttons verhält, ob dieser also z.B. mittig positioniert wird oder ob er sich automatisch basierend auf dem verfügbaren Platz ausrichten soll.
Welche entscheidenden Vorteile ergeben sich daraus?
Zeitersparnis und Genauigkeit!
Um als Designer in jeder Hinsicht davon zu profitieren, zahlt es sich aus, Autolayouts bereits während des Designprozesses und nicht erst nach der Gestaltung der Komponenten anzuwenden. Was zumindest zu Beginn etwas Umstellungsaufwand erfordert, hat letztlich entscheidendene Vorteile. Man erspart sich nicht nur zeitaufwendiges Nachmessen, sondern entwirft auch dynamische Komponenten, die sich je der Bildschirmgrößen automatisch anpassen. Komponenten, welche initial für Desktop oder Mobile erstellt wurden, lassen sich daher ohne größeren Bearbeitungsaufwand schnell und effizient an größere bzw. kleinere Bildschirmen anpassen. Im Optimalfall sind damit sämtliche Module, egal ob kleine Elemente (Atoms) oder ganze Screens (Templates), analog zur späteren Frontendentwicklung vollständig responsive und pixelgenau.
Ein sorgenfreier und effizienter Handoff an die Entwicklung
Als Designer kennt man den Aufwand des Desginens an sich, aber auch den des abschließenden Handoffs an die Entwicklung: Entscheidend ist nicht nur, dass das Design den Erwartungen des Kunden entspricht, sondern auch denen der Entwickler. Im Hinblick darauf hat Figma den entscheidenden Vorteil, dass über den Inspect Mode sämtliche Abstände, Farben, Textstyles etc. pro Element von der Entwicklung nachvollzogen werden können – allerdings unter der Voraussetzung, dass während des Designs strukturiert gearbeitet wurde. Wurden zuvor sämtliche Module mithilfe von Autolayouts erstellt, zeigt sich dies später ebenso im Inspect Mode, wodurch nicht nur Abstände, sondern ebenso deren responsive behaviour klar nachvollzogen werden kann. Warum als Designer diesen Vorteil also nicht nutzen? So entspricht das finale Produkt den eigenen Erwartungen und der sonst mühevolle Austausch mit der Entwicklung wird entspannter und leichter.
Suche
Welcher Designer kennt das Problem nicht: nach wochen - oder monatelanger Arbeit an einem Designsystem oder Projekt hat man mit zunehmender Filegröße bald Schwierigkeiten, ein bestimmtes Modul oder einen bestimmten Text schnell zu finden. Insbesondere wenn wir eigenständig an einem Projekt gearbeitet haben, glauben wir meistens am besten zu wissen, wo wir Element X finden. Die anschließend folgende, oft mühevolle Suche beweist leider meist das Gegenteil.
Durch Figmas neue Filesuche hat das Unternehmen einmal mehr ein durchaus praxistaugliches Feature entwickelt, das z.B. im Fall von Sketch (Figmas Konkurrenzprodukt) erst als Plugin installiert werden musste und zumindest in der Anfangsphase noch kostenpflichtig war.
Ein effizientes Feature mit zahlreichen Filtermöglichkeiten
Durch die Suche brauchen Designer nicht mehr selbst minutenlang die oft umfangreichen Files zu durchforsten, sondern haben die Möglichkeit, über eine äußerst effiziente und vor allem schnelle Suche, sowohl allgemein als auch z.B. gefiltert nach Text, Komponente oder Frame, das jeweilige File zu durchsuchen. Ebenso kann festgelegt werden, ob nur eine bestimmte Page oder sämtliche innerhalb des Files verfügbaren Pages in der Suche miteinbezogen werden. Die Ergebnisse sind damit treffsicher und widerlegen die negative Erwartungshaltung, die so mancher wegen weniger gut funktionierender Suche anfangs zu Recht haben mag.
Schnellerer Workflow garantiert
Alles was neu ist und womöglich unserer bestehenden Arbeitsweise widerspricht, mag zumindest initial für Widerwillen sorgen, erweist sich aber im Fall der Suche als durchaus praktisch und zeitsparend – allerdings unter der Voraussetzung, dass Pages ebenso wie deren Inhalte im Vorhinein entsprechend schlüssig benannt wurden. Letztlich ist die Suche nur so effizient wie die Benennung der jeweiligen Elemente, nach denen gesucht werden soll. Bezieht man diesen Punkt bei der Benennung mit ein, ist auch ein deutlich schnelleres und vor allem sorgenfreieres Arbeiten garantiert.
Einschränkungen
Aktuell ist die Suche lediglich auf Files und deren Pages beschränkt. Will man Fileübergreifen suchen, bleibt einem zumindest aktuell nichts anderes erspart, als nach wie vor selbst zu suchen. Insbesondere im Fall großer Projekte und Designsysteme, mit ebenso vielen Files und Projekten, wäre ein zusätzliches Feature noch wünschenswert.
Shortcuts
Neben Autolayouts und der Suche gestalten Shortcuts den eigenen Workflow effizienter. Aktionen und Werkzeuge müssen nichtmehr umständlich über die diversen Kontextmenüs ausgewählt werden, sondern können schnell über recht intuitive Shortcuts aufgerufen werden. Einige der effizientesten (weniger der geläufigsten) finden Sie hier:
1.
Autolayouts erstellen – das zeitgemäße Frame (Shift+A)
Wie bereits in dem Abschnitt über Autolayouts ausführlich beschrieben, machen diese den Designprozess mittlerweile deutlich effizienter, weswegen Elemente ebenso innerhalb eines Autolayouts anstatt wie bisher statisch innerhalb eines Frames (Option+cmd+k) positioniert werden sollten.
2.
Elemente umbenennen – stille Wasser sind tief (Cmd+R)
Einzelne Elemente umzubenennen erscheint auf den ersten Blick nicht sonderlich beeindruckend, wirklich interessant wird der Shortcut hingegen dann, wenn zuvor mehrere Elemente gleichzeitig ausgewählt wurden (Shift+Auswahl der jeweiligen Elemente) und damit ein zusätzlicher Eingabedialog erscheint: Hierdurch kann einerseits ausgewählt werden, welcher Teil der ausgewählten Elemente umbenannten werden soll, andererseits ob z.B. innerhalb der neuen Benennung etwa eine aufsteigende bzw. absteigende Nummerierung miteinbezogen werden soll.
3.
Vorausgewählte Elemente innerhalb eines Frames platzieren (Option+cmd+g)
Sicherlich einer der am häufigsten genutzten Shortcuts (wenn auch im Vergleich zu Autolayouts nicht mehr der effizienteste), um zuvor ausgewählte Elemente schnell innerhalb eines Frames zu platzieren.
4.
Der schnellste Weg um mehrere Bilder gleichzeitig einzufügen (Shift+cmd+k)
Vermutlich jeder Designer weiß, wie zeitaufwendig es sein kann, mehrere Bilder hintereinander in Figma einzufügen. Die praktische Alternative: Über den Shortcut Shift+cmd+k können nach vorheriger Auswahl der Bilder im Finder, diese als Stapel zu Figma hinzugefügt werden.
5.
Ein Element mit einem zuvor kopierten “in-place” ersetzen (Shift+option+cmd+v)
Im Gegensatz zur konventionellen Art, zuvor gespeicherte Elemente über cmd+v einzufügen, bietet Figma seit Längerem die Möglichkeit, die Kopie mit einem bestehenden Element direkt zu ersetzen. Was zumindest anfangs etwas Fingerakrobatik erfordert, macht sich nach etwas Gewöhnung definitiv bezahlt.
6.
Hierarchie von Elemente innerhalb eines Autolayouts effizient anpassen (Pfeiltasten up bzw. down)
Der letzte und vermutlich effizienteste Shortcut, um Elemente innerhalb eines zuvor sauber aufgebauten Autolayouts schnell neu anzuordnen. So können z.B. einzelne Sections innerhalb einer ganzen Seite effizient und vor allem pixelgenau über die Pfeiltasten im Stack nach oben bzw. unten verschoben werden – ein großer Mehrwert, insbesondere wenn man bedenkt, wie enorm zeitaufwendig es sein kann, einzelne Module manuell auszurichten.
Komponenten
Was bereits durch Konkurrenzprodukte wie Sketch oder Adobe XD jahrelange Praxis ist, gilt auch für Figma: Komponenten. Ähnlich wie im Webdevelopment lassen sich sogenannte "parent" Elemente (Master Komponenten) definieren, die als eine Art Template oder Bauplan verstanden werden können. Basierend auf der Master Komponente kann eine beliebige Anzahl von Kindselementen oder Instanzen erzeugt werden, welche damit automatisch alle Eigenschaften und Inhalte der Master Komponenten besitzen. Entscheidend und für das Design wesentlich ist, dass sämtliche Änderungen in der Master Komponente automatisch auch in den Instanzen übernommen werden, wodurch man als DesignerIn mittlerweile nur mehr den Master adaptieren muss, um so zeitgleich auch dessen Instanzen zu aktualisieren. Für alle, die noch zu Beginn der Digitalisierung mit Photoshop arbeiten mussten, ein revolutionäres Feature, welches mittlerweile Standard ist.
Altbekannt, dennoch nicht immer konsistent genutzt
Obwohl Komponenten allgemein zum Standard gehören, ist die konstante Nutzung von Beginn an und während des Designprozesses weniger selbstverständlich – jedenfalls zeigt das meist die Praxis. Insbesondere während der Konzeptphase, wenn vieles noch unklar ist, werden Designs meist statisch entworfen, sich wiederholende Module kopiert, nur um dann zu einem späteren Zeitpunkt viele der Designs zu überarbeiten und sie nachträglich in Komponenten umzuwandeln. Wider dem tatsächlichen Nutzen von Komponenten wird Arbeit damit verdoppelt, manchmal dreifach gemacht, weswegen es umso entscheidender ist von Anfang an und nicht nur punktuell damit zu arbeiten.
🔥 Projekte, auf die wir stolz sind
Sie brauchen mehr als nur einen Figma Hack?
Gerne helfen wir bei Ihrem Designprojekt!