Figma hat sich in den letzten Jahren einer immer größer werdenden Beliebtheit erfreut. Wir bei newcubator haben mit verschiedenen Design Tools Erfahrungen gesammelt und uns nach dem letzten großen Release von Figma noch mal expliziter mit diesem Tool beschäftigt. Welche Erkenntnisse wir dabei gewonnen haben, möchten wir hier nun gerne teilen.
Zur Geschichte
2011 begannen zwei Studenten aus den Bereichen Computer Science und Graphics an einer Idee zu arbeiten, die letztlich zu einer webbasierten Designsoftware führte: Figma. Das gleichnamige Start-up wurde u. a. von Dylan Field als CEO gegründet und auch geführt. Dieser hatte vorher jedoch nur Berufserfahrung als Praktikant. Um die Firma und das entwickelte Produkt nach vorne zu bringen, musste er also schnell dazu lernen: Er nahm Kritik seiner Mitarbeiter:innen auf und nach Veröffentlichung der Figma Beta Version verließ er sich auch auf das Feedback der Nutzer:innen. Zu der späteren Entwicklung der Brainstorm Software FigJam sagte er: "When you’ve done it enough, it’s almost like the market is going to extract the product out of you".
Dass genau diese Kollaboration mit den Nutzenden gut ankommt, sieht man an der stetig wachsenden Zahl an Plug-ins, die durch die Figma-Community beigesteuert werden. Diese schienen die Zahl der Nutzenden der Software noch mal zu steigern: Laut einer Umfrage ist die Figmanutzung ab 2019, dem Jahr der Veröffentlichung der Plug-ins, stärker angestiegen als in den davorigen Jahren. Ein Jahr darauf überstieg die prozentuale Nutzung des Tools für UI Design sogar die der Vergleichssoftwares wie etwa Adobe XD und Sketch. Die Umfrage wurde 2021 von UX-Tools (UX-fokussierte Content Creator) erfasst und dabei wurden mehr als 3000 internationale Designer:innen befragt.
Ein natürliches Tool für Developer
In der Softwareprogrammierung gilt die Maxime, dass eine Codeanpassung nicht bestimmten Entwickler:innen gehört, sondern dass alle Teammitglieder hinter dem Code stehen und dafür verantwortlich sind. Alltäglich sind also Code Reviews und Diskussionen über die optimale Umsetzung von Anforderungen. Im UI Design Prozess hat man die Option bei Figma ebenfalls: Kommentare lassen eine Diskussion zu, Anpassungen in der Datei können direkt von mehreren Teammitgliedern gleichzeitig gemacht werden und bei Aufgabenteilung oder explorativem Design ist es sogar möglich, Branches zu erstellen.
Die Hauptdatei bleibt dabei als Single Source of Truth unberührt und Frontend Developer, die auch mal designen, fühlen sich in dem Prozess zu Hause. Die Branches können dann individuell geteilt, diskutiert und bearbeitet werden. Die Änderungen können anschließend in die Hauptdatei gemergt oder eben archiviert werden, ohne dass die Kommentare zum Branch verloren gehen. Best Practices sind hier Prozessschritte, die Programmierende kennen: Branchnamen mit Ticketreferenz, Beschreibungen mit Zusammenfassung der Optimierung oder Entwicklung, Reviewanfragen, das allseits beliebte Lösen von Merge Konflikten. Das Feature "Verzweigen und Zusammenführen" gibt es allerdings nur im teuersten Paketpreis "Organization". Weiterhin ist die komplexe Funktion nicht in jedem Team nötig: Wenn das Design- & Implementierungsteam klein ist und Änderungen nicht von vielen Teammitgliedern gemacht werden, kann es absolut ausreichend sein explorative Versionen von Frames in derselben Datei zu entwerfen, ohne dass es unübersichtlich wird.
Interdisziplinärer Fokus
Jenes Feature zeigt aber, dass Figma die Prozesse von Design- und Implementierungsteams annähern will. Die beidseitig bekannten Prozesse vereinfachen dann die Kommunikation und das Verständnis. Darüber hinaus wird das Handoff zur Implementierung vereinfacht, indem nicht nur die CSS-Eigenschaften von erstellten Elementen angezeigt werden, sondern ebenfalls der Code für Android und iOS-Implementierungen abrufbar ist. Die Design- & Implementierungsteams können also dasselbe Tool nutzen, um effizient zu arbeiten. Aus den Frames in der Datei kann anschließend ein klickbarer Prototyp mit Animationen erstellt und dieser geteilt werden. Mobil kann der Prototyp dann direkt im Fullscreen-Modus angezeigt werden und lässt sich realitätsnah testen. Die Anzeige erfolgt über einen einfachen Link und erfordert keine installierte App, sodass auch Stakeholder ohne Umstände eingebunden werden können.
Config 2022 - Was gibt es Neues?
Figma bietet auf seinem YouTube-Kanal diverse Tutorials und auch über Designkonferenzen wird Wissen geteilt. In der diesjährigen Config-Konferenz Anfang Mai wurden neben Prozess- und Projektvorstellungen verschiedener Firmen auch die neuesten Features von Figma vorgestellt. Dark-Mode-Enthusiasten kommen nun auch bei Figma auf ihre Kosten und Typographie-Liebhaber haben bei variablen Schriftfamilien nun ein deutlich breiteres Spektrum von Anpassungsmöglichkeiten. So kann im Gegensatz zu den zuvor festgelegten Optionen jetzt z.B. die Strichstärke über einen Regler einen beliebigen Wert zwischen 100 und 900 annehmen. Es besteht nun auch die Möglichkeit, den Winkel zur Erstellung eines kursiven Schriftbilds individuell einzustellen und auch die beliebten Mikrointeraktionen im Web können über Figma nun detaillierter entworfen werden: Neben einer Auswahl fertiger Animationsverläufen hat man die Möglichkeit, die Bézierkurve der Animation oder auch einen springenden Animationsverlauf anzupassen. Ein anderes neues Feature, dass verblüffend spät kommt: Randlinien können nun auch individuell gesetzt werden. Zuvor haben Figma-Nutzer:innen mit Workarounds gearbeitet und sich z. B. mit langgezogenen Rechtecken oder Schatteneffekten verholfen.
Eine weitere entscheidende Änderung zur effizienten Erstellung eines Design Systems sind die Component Properties, die zuvor eher umständlich mit vielen Varianten festgehalten werden konnten. Nun können Properties genutzt werden, um etwa ein Icon im Button anzuzeigen oder nicht (ein Property mit Boolean-Attribut). Hier sieht man erneut, dass Figma Design- und Implementierungsteams zusammenführt. Während diese Properties viele kopierte Varianten erlöst, können sie durch eine Eingrenzung nicht alle Komponentenvarianten ersetzen: Properties können keine Interaktionen für den Prototypen hinzugefügt werden. Da Mikrointeraktionen aber sowieso nicht Überhand gewinnen sollten, sollte das in den meisten Projekten vertretbar sein.
Fazit
Letztlich ist deutlich geworden, dass Figma seinem ursprünglichen Ziel treu bleibt eine Software für Teams zu erstellen. Die neuen Features ermöglichen dabei ein noch effizienteres und einfacheres interdisziplinäres Arbeiten. An einigen Stellen sorgt dies für eine vereinfachte Einarbeitung in die Softwarenutzung, an anderen Stellen bedeutet es ein neues Einarbeiten in ungewohnte Prozesse. Wir freuen uns über die neuen Features und sind schon gespannt, wann die nächsten nachgezogen werden. Neben jedem Lob haben wir nämlich auch einige noch fehlende Features im Blick, etwa eine automatische Zusammenstellung gebauter Komponenten und die Prototyp-Interaktionen über verschiedene Pages hinweg. Aber solange das Nutzerfeedback weiterhin Gehör beim Figma-Entwicklungsteam findet, sollten die Features nicht mehr in weiter Ferne sein.
