Figma über Figma: Unser Ansatz zur Gestaltung von UI3

Unser Ziel bei UI3, unserer neuesten Benutzeroberfläche für Figma

, ist es, Designer im Fluss zu halten, indem wir Ablenkungen minimieren und ihre Arbeit in den Vordergrund rücken. Mit diesem Gedanken im Hinterkopf arbeitete unser Team mehr als zwei Jahre an unzähligen Ansätzen – sogar einige zentrale Designentscheidungen wie die schwebenden Navigations- und Eigenschaftenfelder wurden nach der Markteinführung rückgängig gemacht. All dies diente dazu, die nächste Generation der Figma UI für die Millionen von Menschen bereitzustellen, die sie täglich nutzen. „Handwerk und Fluss lassen sich nicht leicht messen, daher muss man den Nutzern zuhören und deren Feedback sorgfältig verarbeiten“, sagt Marcin Wichary, Design Director bei Figma.

Wir lernten, dass ein Redesign für Designer bedeutet, ein Ziel zu setzen und sicherzustellen, dass alle auf der Reise mitkommen. Im Zuge der Bereitstellung von UI3 am 10. Oktober für alle Nutzer erzählen wir euch, wie Handwerk, Metriken, Intuition und Feedback als wichtige Wegweiser auf dem Weg dienen.

Angedockte Panels: Eine Gelegenheit zum Erkunden

So einschüchternd es auch sein mag, ein Produkt für Designer neu zu gestalten, bietet es doch eine seltene Gelegenheit, „Dinge zu überdenken, die sich nicht überdenkbar anfühlen“, so Marcin. Man kann darüber nachdenken, ob etwas tatsächlich funktioniert, ob es von Anfang an nicht so gut war oder ob wir uns einfach seltsam daran gewöhnt haben. Es gibt nie einfache Antworten, aber die Fragen sind faszinierend.“

Joel Miller, Produktdesigner bei Figma, fügt hinzu: „Dies war eine seltene Gelegenheit, den Status quo in Frage zu stellen, mit mutigeren Ideen zu experimentieren und möglicherweise die Art und Weise neu zu gestalten, wie Menschen mit Figma interagieren.“ Das Team diskutierte einige „wilde Konzepte“, insbesondere im Zusammenhang mit den Navigations- und Eigenschaften-Panels, die einen grundlegenden Teil der Benutzeroberfläche darstellen. In einigen Versuchen erschienen die Panels nur beim Überfahren mit der Maus, in anderen hingen sie über der Arbeitsfläche. „Wenn man auf Nummer sicher geht, weiß man möglicherweise nicht, wo die Grenzen liegen“, sagt KC Oh, Produktmanager bei Figma. Wir kamen auf die Idee von schwebenden Panels, um eine vereinfachte, benutzerfreundliche Oberfläche zu schaffen, die in unserem gesamten Produkt-Ökosystem bestehen bleibt – aber wir wussten, wir bekämen Feedback dazu, ob dies nicht doch zu weit ginge.

Erst mit der Veröffentlichung von UI3 in der offenen Beta-Version konnten wir durch Funktionsakzeptanz, Leistungskennzahlen und Nutzerfeedback die Auswirkungen vollständig messen. Es wurde klar, dass die schwebenden Panels zwar für einige spannend waren, aber diejenigen, die viele Stunden täglich in Figma arbeiten, behinderten. Wir hörten, dass sie die Arbeitsfläche, insbesondere auf kleineren Bildschirmen, einengten und dass die dahinter hervorschauenden Designs von der Arbeit ablenkten. Sie verringerten auch die Wirksamkeit der Lineale, weil sie sie weiter von den Designs entfernten. „Wir möchten, dass Figma schnell ist. Geschwindigkeit ist ein Feature“, sagt KC. „Der letzte Nagel im Sarg war die Erkenntnis, dass sie die Leute ausbremsten.“ Für die vollständige Einführung von UI3 machten wir die Änderung rückgängig, sodass die Panels fixiert, aber weiterhin in der Größe anpassbar sind und damit flexibel bleiben.

UI minimieren: Hin zu einer einheitlichen Vision

„Bei jedem kreativen Projekt sollte man eine Vorstellung von der Welt und ihren Veränderungen haben, die die eigene Herangehensweise leitet“, so Ryhan Hassan, Produktdesigner bei Figma. Obwohl wir bei der neuen Benutzeroberfläche völlige Freiheit hatten, mussten wir das Feedback von Nutzern aus mehreren Jahren analysieren. Beim Entwickeln von Lösungen für diese Probleme ergab sich eine zentrale Erkenntnis: Auch wenn sich UI-Muster und -Interaktionen in den kommenden Jahren weiterentwickeln, wird die Arbeit weiterhin im Mittelpunkt der Arbeitsfläche stehen.

Dies führte uns zu der Frage, ob die UI überhaupt notwendig war. Obwohl die bestehende Funktion „UI ausblenden“ die Arbeit in den Mittelpunkt stellte, empfanden einige Nutzer sie als ungeschickt und einschränkend. Die neue Funktion „UI minimieren“ ist flexibler, weil sie die Panels einklappt, um ablenkungsfreies Arbeiten zu ermöglichen, während Nutzer bei Bedarf leicht auf Tools zugreifen können. Es ist auch einfacher, in kleinen, geteilten Bildschirm-Szenarien zu navigieren, was bei Remote- und Hybridarbeit häufiger vorkommt.

Für die Arbeit mit der UI haben wir einige Funktionen neu angeordnet, um eine klarere Hierarchie zu schaffen, die auch logische Plätze für zukünftige Funktionen bietet. „Vor der Neugestaltung ertappten wir uns dabei, Tetris zu spielen, während wir neue Funktionen einfügten“, sagt Ryhan. Nun wird im Navigationsbereich beispielsweise der Dateiname, der Zweigname und der Projektname linear aufgelistet, gefolgt von Seiten und Ebenen. „Während wir mehr Möglichkeiten zum Navigieren in der Datei einführen, haben wir einen logischen Ort, um diese Funktionen ohne große Kompromisse zu erweitern“, sagt Ryhan. „Insgesamt kommen wir dem, was wir noch nicht können, näher.“

Mischmodi: Brücke zwischen Vergangenheit und Gegenwart

„Im Großen und Ganzen haben wir einige der Stützräder der Benutzeroberflächen entfernt“, sagt Marcin. Zum Beispiel sind Shift-basierte Tastenkombinationen heutzutage weit verbreitet, obwohl sie, wenn man darüber nachdenkt, wie Tastaturen funktionieren, eigentlich falsch sind. Überall um uns herum sind halb unsichtbare Bildlaufleisten.“ Es war eine spannende Herausforderung, diese sich entwickelnden Trends für UI3 auszuloten und insbesondere zu analysieren, wie sie die Mischmodi beeinflussen, sagt er. „Einige der Konventionen rund um Mischmodi gehen auf die 90er Jahre zurück, lange bevor man sich Figma überhaupt vorstellen konnte.“

In einem frühen Entwurf platzierte das Team dieses Steuerelement hinter einer Symbolschaltfläche, die ein Menü anzeigen sollte. Das Ändern des Mischmodus von der Standardeinstellung würde auch das Symbol ändern. Dieser Ansatz vereinfachte zwar das Darstellungsfenster – eines der Ziele der Neugestaltung –, verlangsamte jedoch die Arbeitsabläufe, da die Nutzer gezwungen waren, auf einen Tooltip über dem Symbol zu warten, um zu erfahren, welcher Mischmodus eingestellt war. Wenn Nutzer jetzt einen nicht standardmäßigen Mischmodus auswählen, erleichtert ein Inline-Dropdown das Ändern oder Entfernen der Einstellung. Es ist eine Lösung, die die UI minimal hält und gleichzeitig an die Anfänge des Mischmodus erinnert.

Eigenschaften-Panel: Mit den Nutzern entwickeln

„Wir befinden uns in einem ständigen Balanceakt und versuchen, so weit wie möglich voranzukommen und gleichzeitig sicherzustellen, dass UI3 für Nutzer, die von der alten Benutzeroberfläche kommen, logisch weiterentwickelt wird“, sagt Ryhan. Aber nach Jahren der Arbeit an einem Projekt bekommt man leicht einen gewissen Tunnelblick. „Deshalb ist es entscheidend, regelmäßig Feedback von der Community einzuholen und – ebenso wichtig – ihnen zu zeigen, dass darauf reagiert wird“, sagt Joel. „Die besten Produkte entstehen nicht nur durch das Team dahinter, sondern in enger Zusammenarbeit mit den Nutzern.“

Bei der umfassenden Weiterentwicklung des Eigenschaften-Panels haben wir uns darauf konzentriert, die Steuerungen der Komponenten zu priorisieren, alle neuen layoutbezogenen Optionen zu vereinheitlichen und die Kopfzeile zu überarbeiten. Seit der Markteinführung berücksichtigen wir Feedback und haben die Einschränkungen so geändert, dass sie standardmäßig ausgeklappt sind. Wir haben Bibliotheksinformationen für Komponenten hinzugefügt und die Auto-Layout-Steuerelemente aktualisiert, sodass immer Pixelwerte und der Größenänderungsmodus angezeigt werden. „Wir stellen sicher, dass wir Dinge ausprobieren, zeigen, wie wir iterieren, und einem breiten Spektrum von Menschen zuhören“, sagt Ryhan.

Zum Abschneiden von Inhalten untersuchte das Team eine Vielzahl von Möglichkeiten, um diese Funktion besser in das aktualisierte Eigenschaften-Panel zu integrieren und einige langjährige Probleme zu lösen. In einer Iteration wurde die Funktion zu einem Umschalter mit einem Symbol; in anderen zu einer Symbolschaltfläche oder einem Menü. In der öffentlichen Beta-Version war „Inhalte abschneiden“ eine Dropdown-Option, die jedoch einen zusätzlichen Klick erforderte, der die Arbeitsabläufe verlangsamte. Wir sind zum Kontrollkästchen als dem klarsten und effizientesten Steuerelement zurückgekehrt und haben es visuell aktualisiert, um es mit dem Rest der Benutzeroberfläche in Einklang zu bringen. „Es hätte sich wie eine Niederlage anfühlen können, fast wieder an derselben Stelle anzukommen, an der wir starteten“, sagt Marcin. „Aber es ist besser, ausprobieren und zu scheitern, als es gar nicht versucht zu haben, oder?“

Das Ausbalancieren von Nutzerfeedback und Designintuition wirft wesentliche Fragen auf. „Angenommen, wir bekommen kritisches Feedback“, fährt Marcin fort. „Ist das nur eine natürliche Reaktion auf Veränderungen, oder steckt etwas Grundsätzliches dahinter? Trägt es zu der Selbstkritik bei, die wir bereits zu dieser Idee entwickelt haben? Stehen negatives und positives Feedback im richtigen Verhältnis? Es fühlt sich irgendwie vertraut an, denn das ist die Aufgabe jedes Designers, der eine Designkritik

verfasst – nur jetzt mal tausend.

Slider: Mobilisierung des gesamten Teams

Apropos Designkritiken: Auch diese mussten sich weiterentwickeln, um den dringenden Anforderungen von UI3 gerecht zu werden. Anstelle der üblichen 30-minütigen, individuellen Designkritiken entwickelte das Team 60-minütige „Speed Rounds“, um die schiere Menge an Oberflächen zu bewältigen, die für UI3 neu konzipiert wurden, wobei alle gleichzeitig die Arbeiten der anderen kommentierten. „Das waren zwei Monate intensiver Versuche“, sagt KC. „Das gesamte Team wurde mobilisiert.“

Speed-Runden ermöglichten es Designern, die Arbeitslast zu verteilen und selbst auszuwählen: Einige konzentrierten sich auf visuelle Details, andere auf den Fluss und das Gesamtbild. Wayne Sun, Produktdesigner bei Figma, halfen diese Kritiken, grundlegende Bausteine wie die Slider-Komponente zu überarbeiten. Der Prozess enthüllte alle Kontexte, an die er sich anpassen musste: Anzeige numerischer Werte beim Video-Scrubbing, Kerben beim Anpassen variabler Schriftarten und Vorschauen von Farbton und Deckkraft bei der Farbmanipulation. Außerdem musste es auch in ein völlig neues Produkt passen: Figma Slides

.

Beschriftungen: Entscheidungen auf fundierter Argumentation

„Für Designer, die tagtäglich mit diesen Tools arbeiten, kann selbst eine kleine Änderung wie eine große Umwälzung wirken“, sagt Joel. „Es ist einschüchternd – man fragt sich: Was, wenn das schiefgeht? Was, wenn ich völlig danebenliege? Deshalb muss jede Änderung auf einer soliden, sinnvollen Motivation beruhen, die die Effizienz oder Kohärenz wirklich verbessert.

Hoi Fung Ho, UX-Autor bei Figma, machte diese Erfahrung, als er ein neues Beschriftungssystem vorschlug, das den Menschen die Orientierung erleichtern soll, indem es Einfachheit mit Klarheit verbindet. „Ich habe noch nie ein System mit optionalen Beschriftungen gesehen, daher brachte mich dieser Vorschlag ins Grübeln und ließ mich an mir selbst zweifeln“, sagt sie.

Besonders schwierig zu entwirren war die Schnittstelle zwischen neuen Beschriftungen und bestehenden Tooltips. Ein früher minimalistischer Ansatz zeigte Potenzial, aber das Team stellte später fest, dass dies die Barrierefreiheit beeinträchtigen würde. „Das war ein entscheidender Punkt“, sagt Hoi. „Ich habe den Ansatz schnell überarbeitet, was mir Freude machte, denn die Möglichkeit, klar zu sagen: ‚Das ist unser Vorgehen und deshalb tun wir das‘, ließ alle Zweifel verschwinden.“ Jetzt bieten alle Labels den vollen Kontext, was den Vorteil hat, dass sie auch einfacher zu implementieren sind.

Die Beschriftungen waren entscheidend für den Übergang von Unordnung zu Handwerkskunst und die Gesamtqualität der neuen Benutzeroberfläche. Sie kombinierten Waynes Arbeit an den UI-Steuerelementen, Tims Überarbeitung der Ikonografie, Joels Push für ein verbessertes Eigenschaften-Panel, Ryhans Fokus auf die Gesamtvision und die Beiträge vieler anderer Figma Designer.

Änderungsmanagement: Nutzern Zeit zur Anpassung geben

Aber letztendlich geht es bei einer neuen Benutzeroberfläche nie um uns. „Neugestaltungen sind für Designer unterhaltsam, können für Nutzer jedoch wirklich beängstigend sein“, sagt Marcin. „Es fühlt sich nie wie der richtige Moment an.“

Deshalb haben wir den Nutzern die Möglichkeit gegeben, UI3 während der Betaphase zu deaktivieren, damit sie sich in ihrem eigenen Tempo mit der neuen Benutzeroberfläche vertraut machen können. „Wenn du UI3 an einem Mittwoch erhältst und eine Frist für Freitag hast, kannst du zur alten Version zurückkehren und deine Aufgaben erledigen“, sagt Ryhan. Die schrittweise Einführung ermöglicht es uns, aus den Benutzererfahrungen zu lernen, Feedback zu verarbeiten und eine Sammlung von Tutorials zu erstellen, um sicherzustellen, dass Antworten verfügbar sind, wenn UI3 zum Standard wird und die alte Benutzeroberfläche schließlich eingestellt wird.

„Aber wir hoffen“, sagt Marcin, „dass du zurückkommst. Wir sind der Meinung, dass viel für UI3 spricht, und wir sind noch nicht einmal fertig.

„Außer beim Inhalte abschneiden“, fügt Joel hinzu. „Damit sind wir definitiv fertig.“

Während ihr UI3 erkundet, das am 10. Oktober für alle Benutzer verfügbar ist, gebt weiterhin Feedback. Eure Insights gestalten die Zukunft unserer Designtools, Pixel für Pixel.