Figma: Die Vorteile für Design und Entwicklung

Figma erleichtert unsere Zusammenarbeit

Figma ersetzt für uns nicht nur Sketch, InVision und Zeplin, sondern macht auch den Arbeitsalltag für unsere Designer:innen an vielen Stellen einfacher. Während der letzten Monate haben sich beim Arbeiten mit Figma einige Vorteile herauskristallisiert, die sich als äußerst wertvoll erwiesen haben. Unsere beliebtesten Features wirst du so vermutlich nicht auf der Website von Figma wiederfinden, deshalb liste ich sie hier kurz auf:

Vorteile fürs Design 

Automatische Sicherung

Figma speichert die Dateien automatisch online. Kurze Herzstillstände und unnötige Stress-Momente, wenn der Computer für kurze Zeit nicht reagiert, sind damit Geschichte. Dank der Versionshistorie können auch ältere Zustände des Designs schnell wiederhergestellt werden und auch einzelne Screens oder Komponenten können aus dem alten Design zurückgeholt werden.

Kommentarfunktion

Kommentare können direkt an der Stelle platziert werden, an der auch das Design angepasst werden soll. Diskussionen sind damit über mehrere Iterationen möglich, da der Kommentar und die dazugehörende Diskussion unabhängig vom Design auch weiter verschoben werden kann – solange, bis der Kommentar-Thread als gelöst markiert wird.

Design mit Komponenten

Komponenten bleiben nach der Erstellung im Gegensatz zu Sketch an dem Ort, an dem sie erstellt wurden. Das bedeutet, dass die definierte Komponente während der Arbeit am Screen weiterbearbeitet werden kann, ohne dass man dafür auf eine spezielle Seite in Figma wechseln muss. Somit ist es im Designprozess bereits sehr früh möglich, etwas als Komponente zu definieren und wiederholt zu platzieren, ohne dass der Inhalt der Komponente schon final sein muss. Ein weiterer Vorteil, der sich daraus ergibt, ist, dass Komponenten auch auf mehreren Seiten platziert werden können, wodurch sie sich gerade bei komplexeren Projekten besser strukturieren lassen. 
 

Komponenten-Varianten

Ein Button ist ein Button, auch wenn dieser aus mehreren Types wie primary, secondary und tertiary sowie aus verschiedenen States wie hover, clicked, focused, disabled und loading besteht. Damit Figma weiß, dass es sich hierbei um verschiedene Varianten derselben Komponente handelt, können diese in Variants zusammengefasst werden. Somit ist diese Komponente auch nur einmal in der Komponentenbibliothek sichtbar, was wiederum die Liste an Komponenten für Designer_innen wesentlich übersichtlicher macht.

Wiederverwendbare Absatzformate

In Absatzformaten werden hauptsächlich die Schriftgröße und der Zeilenabstand definiert. Der Einsatz dieses Formats in den Screendesigns kann später noch variieren. Die unterschiedlichen Farbabstufungen und Textausrichtungen haben keinen Einfluss auf das definierte Format und können dadurch öfter wiederverwendet werden.

Prototyping

Auch einfaches Prototyping ist in Figma möglich. Es geht von Klick-Interaktionen über automatisch abspielende Gifs bis hin zu Slidern und einfache Animationen. Damit können sich vor allem externen Personen ein authentisches Bild des Endprodukts machen und auch den Entwickler:innen ist klar, wie sich die Elemente im Detail verhalten sollen und wie die visuellen Abläufe funktionieren.

Urlaubsübergabe

Ein Onlinetool macht nicht nur dann Sinn, wenn der Inhalt mit Externen geteilt werden soll, sondern auch dann, wenn intern verschiedene Personen (gleichzeitig) daran arbeiten. Das Schöne an Figma ist, dass nicht nur der aktuelle Stand klar ist, sondern auch alle Assets und (Google-)Schriften für alle Beteiligten in der Designdatei verfügbar sind.

Kein Screensharing nötig

Durch die Möglichkeit, dass andere Personen durch Klick auf das Profilbild im Projekt diesem Cursor folgen können und somit sehen, was die andere Person sieht, erübrigt sich das Screensharing. Auch eine detaillierte Erklärung, wo das Gesuchte zu finden ist, erübrigt sich und macht somit das Teilen noch einen Schritt einfacher.

Vorteile für Entwicklung

Auch für unsere Entwickler_innen zeigen sich einige Vorteile von Figma gegenüber den bisher verwendeten Tools InVision und Zeplin. Nicht nur das Design-Handoff gestaltet sich angenehmer, sondern auch die Reduktion der verwendeten Tools hilft. Die wichtigsten Punkte für unsere Entwickler_innen sind hier aufgelistet:

Workflow Übersicht

In Figma werden alle Screens eines Workflows übersichtlich in einer Ansicht dargestellt. Bisher wurden die Screens zwar auch sinngemäß gruppiert, allerdings war das Durchklicken zum richtigen Screen immer etwas mühsam und führte hin und wieder auch zu Verwechslungen, weil es nicht mehr ersichtlich war, ob der nächste Screen noch zu diesem oder bereits zum nächsten Workflow gehört.

Automatischer Styleguide

Generische Komponenten werden in Figma übersichtlich gruppiert und sind jederzeit leicht zugänglich. Zudem ist auf jeder Seite ein komprimierter Styleguide zu sehen, welcher ausschließlich die globalen Styles der auf dieser Seite dargestellten Screens/Komponenten aufzeigt. Dies schafft zusätzlich eine übersichtliche Veranschaulichung über das benötigte globale Styling. 

Immer aktuell

Auch für die Entwickler:innen liegt der größte Vorteil darin, dass die Designer:innen jetzt nur noch ein System für den kompletten Workflow verwenden. So können alle beteiligten Personen davon ausgehen, dass die vorliegende Version für die Entwicklung aktuell ist. Vorher war im Workflow zwar ebenfalls klar definiert, dass erst die finalen Designs auf Zeplin geladen werden, aber natürlich kommt es trotzdem vor, dass im Nachgang noch Anpassungen gemacht werden müssen. Dadurch war nicht immer klar, ob das Design auf Zeplin nun aktuell ist und es gab auch die ein oder andere Überraschung, wenn die Entwickler_innen einige Tage später ein Design erneut geöffnet haben. Mit Figma ist der generelle Design-Workflow deutlich transparenter als zuvor.

Fazit: Figma revolutioniert unsere Arbeitsprozesse

Figma macht also nicht nur das Leben für uns Designer_innen leichter, sondern bringt auch viele Vorteile für alle anderen Beteiligten mit sich. Die Nachteile bleiben dabei überschaubar und es gibt auch kaum etwas, dass sich nicht durch ein Community-Plugin lösen lässt. Spannend ist auch, dass sich durch das Programm die Lücke von Frontend-Entwicklung und Design weiter schließt und sich die Bereiche durch eine ähnlichere Arbeitsweise weiter annähern. Der wohl wichtigste Punkt bleibt aber, dass sich durch das Programm neue Möglichkeiten für die Arbeitsweise ergeben. Figma ermöglicht eine transparente Kommunikation und bietet somit das Potenzial, den gesamten Designprozess zu öffnen. Obwohl das Programm erst knappe fünf Jahre alt ist, hat es doch schon einiges auf den Kopf gestellt. Wir sind auf jeden Fall gespannt, wie es weiter geht.