Kleine große Outtakes

Wir haben die neueste Ausgabe unserer „Little Big Updates“ – kleine Updates mit großer Wirkung veröffentlicht. Das sind mehr als 30 kleine, aber leistungsstarke Funktionen, die dir dabei helfen sollen, schneller in Figma zu arbeiten. Hier sind ein paar unserer Lieblingsanekdoten von den Designer*innen und Entwickler*innen, die an dieser Version der kleinen Updates mit großer Wirkung mitgearbeitet haben.

Funktion: Multi-select search. Mehrfachauswahlsuche – Umschalttaste + Klicken oder Befehlstaste (Windows: Strg) + Klicken, um bestimmte Suchergebnisse zum Bearbeiten und Ersetzen auszuwähle

Team: Jackie Chui (Design), Akshay Subramaniam (Entwicklung)

Nach der Einführung der Funktion „Suchen und Ersetzen“ in Figma und FigJam vor einigen Monaten gingen die Produktentwickler*innen davon aus, dass für die Einführung der Mehrfachauswahlsuche lediglich einige wenige zusätzliche Änderungen an der ursprünglichen Funktion notwendig sein würden. „Als wir begannen, tiefer in die Materie einzutauchen, stießen wir auf einige wirklich komplizierte Grenzfälle“, so Jackie, die sowohl für das Design der Mehrfachauswahlsuche als auch der Funktion „Suchen und Ersetzen“ verantwortlich war.

Das Problem dabei? Als Jackie und Akshay eine der ersten Versionen der Mehrfachauswahlsuche testeten, stellten sie fest, dass schwer zu erkennen war, was tatsächlich ausgewählt wurde. Das lag daran, dass ein „übergeordnetes Element“ (ein Rahmen, eine Komponente oder eine Gruppe) und ein „untergeordnetes Element“ (ein Objekt, das in einem übergeordneten Element enthalten ist) in Figma nicht separat ausgewählt werden können. Mit der Mehrfachauswahlsuche kann es demnach passieren, dass sowohl das übergeordnete Element als auch seine untergeordneten Elemente gleichzeitig als Ergebnisse angezeigt werden. Technisch gesehen funktionierte die Funktion zwar, für die Benutzer*innen war es jedoch alles andere als harmonisch. „Ich habe mich immer gefragt: ‚Ist das ein Bug?‘“, erzählt Akshay. Bei der Auswahl des ersten Elements funktionierte alles noch wie erwartet. Sobald jedoch das zweite Element ausgewählt wurde, erfasste die Auswahl gleichzeitig mehrere untergeordnete Elemente, von denen einige möglicherweise gar nicht ausgewählt werden sollten. Wenn es sich dann noch um eine Datei mit vielen Verschachtelungen handelte, war es unmöglich, den Überblick zu behalten. „Plötzlich sitzt du vor dieser großen, unübersichtlichen Datei und stößt bei der Mehrfachauswahl an deine Grenzen“, fügt er hinzu.

Der Durchbruch? Jackie und Akshay erstellten eine visuelle Hierarchie in der „Suchen und Ersetzen“-Seitenleiste, um zu verdeutlichen, welche untergeordneten zu welchen übergeordneten Elementen gehören, und was genau ausgewählt wurde. Wenn du die Befehls- oder Umschalttaste für eine „Hover-Auswahl“ – eine Art Auswahl mit Vorschau – gedrückt hältst, hebt Figma die indirekten, im Hintergrund automatisch ausgewählten Elemente hervor und umrandet die untergeordneten Elemente, die du auswählst, als eine Art Vorschau. „Für mich war das ein echter Wendepunkt“, sagt Jackie. Letztendlich waren es die Grenzfälle, die zur besten Lösung führten. „Selbst bei der ursprünglichen Funktion „Suchen und Ersetzen“ gab es nicht so viele verschiedene Grenzfälle“, so Akshay. „Die Mehrfachauswahl wurde von diesen [größtenteils] definiert.“

Funktion: Unschärfeeffekte. Wenn du bei der Entwicklung von Prototypen ein Overlay mit Unschärfeeffekten im Hintergrund hinzufügst, werden die Dinge tatsächlich etwas unklar.

Team: Brandon Lin (Entwicklung)

Bisher funktionierten Unschärfeeffekte auf Overlays in Figma nicht ganz zuverlässig. Der Prototyp-Viewer versucht, einen Unschärfeeffekt zu rendern, indem er nach den Elementen sucht, die direkt unter dem Rahmen liegen. Bei Overlays gibt es jedoch nichts direkt unter dem Rahmen. Brandon arbeitete erst seit wenigen Monaten bei Figma, als er damit begann, Bugs zu beheben, die Unschärfeeffekte auf Overlays bei der Entwicklung von Prototypen auslösten. Dieses Onboarding-Projekt sollte ihm dabei helfen, sich in die Materie einzuarbeiten und zu verstehen, wie sein neues Team zusammenarbeitet. Nachdem er einige Zeit über potenzielle Lösungen nachgedacht hatte, beschlich Brandon das Gefühl, etwas Wichtiges zu übersehen. Er ging also einen Schritt zurück, schrieb seine Gedanken, mögliche Stolpersteine sowie eine Lösung nieder und teilte dieses Dokument mit seinen Teammitgliedern.

Diese halfen ihm bei der Verfeinerung seiner Lösung – sie schlugen vor, Informationen über die Position des Overlays an den Code weiterzugeben, damit dieser weiß, was er als Unschärfe betrachten soll. Basierend auf dem Feedback des Teams erstellte Brandon mithilfe der entsprechenden Daten eine klarere Struktur, um die Verbindung zwischen Overlays und ihren jeweiligen Rahmen zu verdeutlichen. Diese Änderungen ermöglichen es, verschiedene Overlays an den jeweils richtigen Positionen zu erstellen und entsprechend korrekt übereinander zu legen. Brandons Bauchgefühl war also richtig, als neuer Figmate brauchte er lediglich noch etwas Input seines Teams. „Das hat mir mehr Selbstvertrauen gegeben“, sagt er.

Funktion: Vorschau auf der Arbeitsfläche. Bewege den Mauszeiger über die Optionen im Design-Tab, um eine Vorschau der verschiedenen Einstellungen und Eigenschaften anzuzeigen, bevor du diese tatsächlich auswählst.

Team: Hauke Gentzkow (Design), Molly Lloyd (Entwicklung)

Eine Vorschau auf der Arbeitsfläche zu erstellen, entpuppte sich als echte Übung im Reduzieren des Umfangs. Bevor sich das Team auf die Einstellungen und Eigenschaften geeinigt hat, die jetzt Teil der Figma-Vorschau sind, wie z. B. Ebenenübergangsmodi, Effekte und Farbübergangsmodi, hatte es auch die Unterstützung von booleschen Operatoren, Komponenteneigenschaften und der Schriftauswahl in Betracht gezogen. „Ich habe mit einem riesigen Umfang begonnen. Ich dachte, dass wir all diese komplexen Dinge angehen müssten, damit sich unsere Arbeit lohnt“, so Hauke. „Ich hatte Bedenken, dass das jetzige Set nicht ausreichen würde. Aber sobald wir angefangen haben damit zu experimentieren, haben wir gemerkt, dass es durchaus sehr leistungsstark ist.“ „Der einzige Knackpunkt war für mich die [knappe] Zeit“, so Molly. Die Herausforderung bestand also darin, die Zeit im Blick zu behalten und gleichzeitig die Details zu perfektionieren.

Anstatt alles in eine Version zu packen, entschieden sie sich dafür, rigoros zu priorisieren. Hauke prüfte den Figma-Editor auf alle Attribute mit einer Dropdown-Liste und ging dann alles gemeinsam mit Molly durch. „Ich dachte: ‚Okay, das ist super machbar‘ oder ‚Das könnte schwierig sein‘ und ‚Das wird den Speicher der Benutzer*innen überlasten‘“, erzählt Molly. Sie und Hauke entschieden sich für eine Vorgehensweise. „Letztendlich haben wir die Funktionen entwickelt, die keine großen Geometrieänderungen oder Änderungen auf der Arbeitsfläche erfordern“, so Hauke.

Die Reaktion innerhalb des Unternehmens war durchweg positiv. „Als ich einen entsprechenden Entwicklungsvorschlag geteilt habe, sagten alle: ‚Das habe ich mir schon so lange gewünscht!‘ Ich finde, es gibt intern eine große Begeisterungsfähigkeit für kleine Dinge. Meiner Meinung nach ist das typisch für Figma“, so Molly. „Die Mitarbeitenden schätzen die Details und freuen sich auf die neuesten Entwicklungen in Sachen Benutzerfreundlichkeit.“

Funktion: Hängende Interpunktion. Verhindere optische Lücken am Rand deines Textblocks, indem du Interpunktionszeichen wie Anführungszeichen außerhalb des Textfeldes „hängen“ lässt.

Team: Amanda Yeh (Design), Joanna Chen (Entwicklung)

Im Design kommt es auf die Details an. Deswegen grübelt das Produktteam häufig über Entscheidungen über die Perfektion dieser Details. Ein Beispiel: Als Amanda und Joanna am Textpaket arbeiteten, ließen sie das Thema hängende Interpunktion buchstäblich in der Luft hängen.

„Joanna war der Meinung, dass dies nur über eine Eingabe per Tastatur möglich sein sollte, und ich fand, es könnte eine Umschaltfunktion im Feld für Schrifteinstellungen werden“, erklärt Amanda. Der „Nur über die Tastatur“-Ansatz würde bedeuten, hängende Interpunktion als funktionale Einrückung zu verwenden. Ein Umschalter im Eingabebedienfeld würde sich eher in Richtung Textdesign bewegen. Die Entscheidungsfindung dauerte eine ganze Weile, da es bei anderen Produkten keine großen Erfahrungswerte gab, keine Standardmethode für die Implementierung in CSS existierte, und das Team eine intuitiven Lösung für die Benutzer*innen finden wollte.

„Wir beide haben unterschiedliche Gründe [für unsere verschiedenen Ansichten], und deshalb diskutieren wir noch immer“, so Amanda. „Wir sagen euch Bescheid, wenn wir eine Entscheidung getroffen haben.“

Während die Dinge zum Zeitpunkt unseres Gesprächs noch in der Luft hingen, kamen sie natürlich rechtzeitig zur Einführung zu einer Entscheidung: Es wurde der Umschalter im Eingabebedienfeld, da beide wussten, dass die Designer*innen dies letztlich als stilistische Änderung betrachten würden.

Sieh dir all diese Fehlerbehebungen und Funktionen sowie alle >30 Updates hier an.