Hinter dem Feature: die vielen Leben von Multi-Edit

Manchmal bringen wir ein Feature auf den Markt, bei dem wir uns fragen, wie wir jemals ohne ausgekommen sind. Multi-Edit zur Vereinfachung der Bearbeitung mehrerer Objekte in Figma ist eines davon. Jetzt, wo es da ist, fühlt sich Multi-Edit wie ein natürlicher Teil von Figma an, aber bei der Funktionsweise von Auswahlen weicht es von einer branchenweiten Norm ab, und die Ausarbeitung der Details hat Zeit gekostet. Multi-Edit hatte mehrere Leben, bevor wir endlich in der Lage waren, dieses Feature zu aktivieren. Jetzt, wo es läuft, möchten wir von seiner Entstehung erzählen. Sho Kuwamoto, Vice President of Product, und Nikolas Klein, Product Designer, nehmen uns mit auf den langen Weg der Entwicklung von Multi-Edit und erklären, warum Second-Nature-Funktionen zu den wichtigsten Aufgaben gehören sollten.

Du möchtest es ausprobieren? Versuche es mit diesen Shortcuts:

• ⌘ Command (Befehl) + ⌥ Option + A zur Auswahl aller passenden Objekte.
• Ziehen bei gedrückter Umschalttaste, um bestimmte übereinstimmende Objekte auszuwählen
• Auswahl mehrerer Textobjekte und Drücken der Eingabetaste, um Text mehrfach zu bearbeiten.
• Komponentenset auswählen und Q drücken, um den Multi-Edit-Mode für Varianten aufzurufen.

In der Playground-Datei findet ihr weitere Informationen.

Die Philosophie hinter Multi-Edit

Sho K.

Eines der Dinge, die ich an der Arbeit bei Figma liebe, ist, dass wir die Grundlagen der Funktionsweise von Designtools in Frage stellen können. Manchmal führt das dann zu tollen neuen Features, manchmal zu vielen kleinen Verbesserungen. Multi-Edit ist das seltene Beispiel für ein Feature, auf das beides zutrifft.

Die Idee für Multi-Edit hatten wir erstmals 2019. Damals entwickelten wir gerade das Variants-Feature, und dabei entstanden so viele heikle Fragen, dass wir beschlossen, in unseren Kalendern Platz für einen zweitägigen Design-Gipfel zu schaffen, um alles zu klären. Viele der wichtigen Teile fügten sich auf Anhieb zusammen, aber eines der Hauptprobleme, mit denen wir zu kämpfen hatten, war die Menge der sich wiederholenden Bearbeitungen, die unsere Mitarbeitenden ausführen mussten. Wie ihr wisst, kann die Bearbeitung von Varianten mühsam werden, und wir probierten verschiedene Mechanismen aus, um diesen Prozess zu vereinfachen, aber keiner davon schien zu passen.

Dann kamen wir auf eine einfache Idee: Was, wenn du einen Mode aktivieren könntest, in dem alle deine Änderungen auf magische Weise in allen Varianten gleichzeitig vorgenommen werden? Und wäre das nicht auch eine Idee für andere Bereiche? Kommt es nicht häufig vor, dass man mehrere Entwürfe auf einmal bearbeiten möchte?

Wir skizzierten das Ganze auf einem Whiteboard und nannten es Multi-Edit.

Winterschlaf

Nach dieser Initialzündung verbrachte die Multi-Edit-Idee viel Zeit im Winterschlaf. Wir konnten nicht sofort mit dem Programmieren beginnen, weil wir die Kernideen erst einmal durcharbeiten mussten. Die Antworten mögen im Nachhinein offensichtlich erscheinen, aber damals waren sie es nicht.

Ursprünglich dachten wir bei Multi-Edit an einen leistungsstarken neuen Mode, mit dem sich viele Dinge auf einmal bearbeiten lassen – ähnlich wie bei der Mehrfachauswahl von Text in einem anspruchsvollen Texteditor.

Als wir versuchten herauszufinden, wie Multi-Edit tatsächlich funktionieren könnte, wurden wir mit der Tatsache konfrontiert, dass Figma bereits irgendwie die Möglichkeit bot, mehrere Objekte zur gleichzeitigen Bearbeitung auszuwählen. Es gab nur ein paar Probleme:

1. Die Auswahl der Dinge, die man bearbeiten möchte, ist schwierig.
2. Und nach der Auswahl funktionieren einige der Bearbeitungen nicht wirklich gut.

So ist es zum Beispiel einfach, die Farbe mehrerer Objekte zu ändern, aber bei der Größe wird es schwierig. Es ist leicht, die Schriftart oder Größe mehrerer Textknoten anzupassen, aber es ist schwer, den Text selbst zu ändern.

Ein Blick in die Produktentwicklung von Figma (Config Europe)

Multi-Edit war immer Teil unseres Gesamtplans, aber andere Arbeiten hatten Priorität. Das habe ich sogar bei einem Vortrag im Jahr 2020 angedeutet!

Wir hörten also auf, Multi-Edit als Mode zu betrachten, und stellten uns stattdessen grundlegende Fragen wie „Wie sollte die Auswahl überhaupt funktionieren?“.

Außerdem machten uns die praktischen Aspekte der Softwareentwicklung zu schaffen. Die Wahrheit ist, dass, egal wie gut eine Idee für ein Feature auch sein mag, es oft andere Dinge gibt, die zuerst erledigt werden müssen.

Also saßen wir da und ließen diese Multi-Edit-Idee schmoren ... für eine sehr lange Zeit.

Das Erwachen

Manchmal verliert eine Idee an Kraft und verblasst, wenn man sie nicht sofort umsetzt. Die Idee von Multi-Edit blieb bei Figma aber erstaunlich populär.

Ich denke, das ist zum Teil eine Frage der Philosophie. Bei Figma haben wir es uns zur Aufgabe gemacht, euch dabei zu unterstützen, Änderungen an euren Entwürfen schnell vorzunehmen, und zwar unabhängig davon, ob ihr diese im Voraus strukturiert habt oder nicht.

Bei Figma gibt es für fast jedes Feature zur Strukturierung einer Datei auch ein Feature für eine lockerere Anordnung. Mit Stilen und Tokens lassen sich Farben schnell ändern, für weniger Strukturierung bietet sich dagegen das Feature Selection Colors (Auswahlfarben) an, um Massenbearbeitungen vorzunehmen. Mit „Auto Layout“ (Automatisches Layout) lassen sich Dinge in Stapeln gruppieren und schnell verschieben, für eine unstrukturiertere Anordnung können Objekte mit Smart Selection (Intelligente Auswahl) schnell neu angeordnet werden. Bei der Bearbeitung können mehrere Kopien eines Objekts mit Komponenten schnell bearbeitet werden, aber für eine unstrukturiertere Anordnung hatten wir nicht wirklich eine gute Alternative!

Was also tun? Kopieren und einfügen und hundertmal auf etwas klicken? Die Komponenten brauchten einen unstrukturierten spirituellen Cousin, und deshalb brauchten wir so etwas wie Multi-Edit.

Tom Lowry, Director of Advocacy bei Figma, war einer seiner großen internen Verfechter. Nikolas Klein, einer unserer Designer, erstellte während einer unserer Maker Weeks einen Prototyp einer Version von Multi-Edit, und ich erstellte zusammen mit den Softwareingenieurinnen Naomi Jung und Joanna Chen einen weiteren. Mit jedem Experiment wuchs unser Verständnis dafür, was wir bauen mussten und wie es in den Rest von Figma integriert werden musste.

Multi-Edit zum Leben erwecken

Nikolas K.

2023 schien es dann endlich an der Zeit zu sein, Multi-Edit aus seinem Dornröschenschlaf zu erwecken und ins Rampenlicht zu rücken. Ich war begeistert. Als wir die ersten Ideen zu Multi-Edit hatten, war ich in meinem ersten Jahr als Produktdesigner bei Figma. In den fünf Jahren, die seitdem vergangen waren, hatten wir viele wichtige Entscheidungen darüber getroffen, wie Multi-Edit funktionieren könnte, sowohl funktionell als auch philosophisch. Wir hatten mit verschiedenen Mitarbeitenden Arbeitsdokumente und Prototypen erstellt. Aus meiner Sicht hatten wir das Design abgestimmt, so wie man eine Gitarre stimmen würde. Die Entwicklung von Multi-Edit schien also eine einfache Aufgabe zu sein. (Berühmte letzte Worte.)

Moment, wir können die Auswahlmechanismen ändern?!

Die erste Herausforderung bestand in der Lösung der grundlegenden Auswahlmechanismen bei der Bearbeitung mehrerer Ebenen. Wie viele andere Design-Tools zeichnete Figma einen großen aggregierten Begrenzungsrahmen um alle ausgewählten Elemente, sodass sie sich so bearbeiten ließen, als gehörten sie alle zu einer Gruppe. Das ist großartig für Vorgänge innerhalb desselben Frames, funktioniert aber nicht bei der Interaktion mit Objekten über mehrere Frames oder Varianten hinweg, z. B. bei der Größenänderung eines Logos, das auf allen Bildschirmen sichtbar ist.

In einer Lösung schlugen wir einen „Multi-bound Mode“ vor – eine neue Option, die die Art und Weise, wie Auswahlgrenzen gezeichnet werden, ändern würde. Damit wären die Nutzer in der Lage, relative Bearbeitungen wie erwartet vorzunehmen. Nach langem Hin und Her wurde uns jedoch klar, dass wir etwas viel Grundlegenderes tun konnten: Anstatt einen neuen Mode hinzuzufügen, konnten wir das bestehende Verhalten für jede Auswahl ändern – und so die Bearbeitung in Figma überdenken.

Die Einigung auf einen Ansatz fühlte sich zwar wie ein Durchbruch an, aber von der Einführung von Multi-Edit waren wir immer noch weit entfernt – mit dem Umfang und der Komplexität unseres neuen Aufgabenbereichs vielleicht sogar noch weiter. In den folgenden Jahren würden wir alle Abhängigkeiten dieses Ansatzes entdecken und sie nach und nach optimieren.

Zunächst wollten wir mehrere Auswahlgrenzen um jedes einzelne Objekt ziehen, sogar innerhalb desselben Frames. Aber wir erkannten schnell, dass die traditionellen Auswahlmechanismen Designern seit Jahrzehnten gute Dienste leisten. Auf der Suche nach dem richtigen Gleichgewicht zwischen Vertrautem und Neuem entschieden wir uns für einen Mittelweg: Wir entwickelten mehrere Begrenzungsrahmen für jeden Satz von Objekten, die auf verschiedenen Ebenen der Designs ausgewählt wurden.

Alle Auswahlen aus Multi-Edit-Perspektive

Mit mehreren Grenzen mussten wir jetzt sicherstellen, dass jede potenzielle Aktion innerhalb jeder Hierarchie wie erwartet funktionieren würde. Wir listeten also alle Aufgaben auf, bei denen Figma zum Einsatz kommen könnte – keine Kleinigkeit, wenn man bedenkt, dass viele Vorgänge in Figma irgendeine Form der Objektauswahl erfordern. Dann passten wir für jede Instanz das Verhalten bei Multi-Edit an, um die Arbeitsabläufe zu optimieren. Da Multi-Edit so viele Vorgänge betrifft, stand viel auf dem Spiel. Unser Entwicklungsteam, darunter Akshay Subramanian, Jung Woo Lee und die damalige Praktikantin Emily Louie, erwies sich als großartiger Partner bei der Entwicklung von Prototypen und schnellen Anpassung von Verhaltensweisen.

Eines der offensichtlichsten Probleme war das Ausrichten von Elementen über Frames hinweg. Bei der Auswahl von Elementen über horizontal angeordnete Frames hinweg, funktioniert die vertikale Ausrichtung nach oben oder unten. Bei der Ausrichtung von Elementen horizontal nach links oder rechts aber bewegen sich diese Elemente an dieselbe Position auf der Arbeitsfläche. Sie werden also häufig gestapelt oder verschwinden ganz aus dem vorgesehenen Frame.

Um dies zu beheben, haben wir die Ausrichtung von Elementen so aktualisiert, dass sie relativ zu jedem Frame erfolgt. Beim Ausrichten von Elementen wird jetzt der kleinste Wert in der Richtung, an der Sie ausrichten, genommen und relativ auf alle Objekte innerhalb jedes Frames angewendet.

Außerdem haben wir eine spezielle Regel erstellt, um Objekte auf der Arbeitsfläche am nächstgelegenen Objekt innerhalb eines Frames auszurichten. Hierbei haben wir unsere eigenen Regeln der „relativen Ausrichtung für jede Hierarchie“ durchbrochen, damit bestehende Arbeitsabläufe auch weiterhin möglich bleiben.

Auswahl der richtigen Anzahl passender Objekte

Nachdem all dies erledigt war, wirkte Multi-Edit bereits wie eine enorme Verbesserung. Die Bearbeitung von Objekten über mehrere Frames hinweg war viel intuitiver. Als Nächstes mussten wir es den Nutzern so einfach wie möglich machen, schneller dorthin zu kommen.

Auch einigen unserer Nutzer fiel diese Funktion auf – zum Beispiel Tom und Aravindh— und sie wunderten sich, warum sie nicht auch anderweitig verfügbar war.

Wie wir alle wissen, duplizieren Designer häufig Frames, in denen dieselbe Ebene in mehreren Kopien wiederholt wird. Wir haben die Abgleichsregeln aus Smart Animate (Smart-Animation) und das Auswahlverhalten aus den Component Properties (Komponenteneigenschaften) übernommen, damit die Nutzer auch anderweitig „alle übereinstimmenden Ebenen auswählen“ konnten (⌘ Command (Befehl) + ⌥ Option + A).

Bald stellten wir jedoch fest, dass die Auswahl aller Übereinstimmungen zu viel war. Unsere Nutzer möchten oft nur einige Frames ändern. Deshalb fügten wir eine zusätzliche Option hinzu: Bei gedrückter Umschalttaste werden alle übereinstimmenden Ebenen hervorgehoben, und die Nutzer können durch Ziehen nur andere übereinstimmende Objekte auswählen. Dieses neue Verhalten tritt auf, wenn das Ziehen außerhalb eines Rahmens begonnen wird. Wird das Ziehen innerhalb eines Rahmens begonnen, wird das vorherige Verhalten beibehalten, d. h., es lässt sich jedes beliebige Objekt zur Auswahl hinzufügen oder daraus entfernen.

Beibehaltung eines Mode für Varianten

Schließlich kehrten wir zu dem Funken zurück, der diese Flamme vor Jahren entfachte: Varianten. Bei der Verwaltung von Varianten müssen diese oft gemeinsam bearbeitet werden. Um diesen Prozess zu vereinfachen, führten wir ein Feature ein, mit dem Multi-Edit aktiviert bleibt und es den Nutzern ermöglicht, bei der Bearbeitung von Varianten in diesem Zustand zu bleiben.

Unser ursprünglicher Durchbruch bestand zwar darin, Multi-Edit nicht als Mode zu betrachten, allerdings erwies sich ein Mode als notwendige Funktion, um die Effizienz zu steigern. Für Massenaktionen wie die schnelle Auswahl des nächsten Elements oder die Erstellung einer Textebene für eine Schaltflächenbeschriftung über alle Varianten hinweg wurde ein eigener Bereich benötigt, in dem all dies geschehen konnte.

Feineinstellungen

Es ist unglaublich befriedigend zu sehen, wie all diese Entscheidungen und Mikroanpassungen zusammenkommen. Dieses Maß an Detailgenauigkeit und Sorgfalt ist nicht nur das, was mich vor sechs Jahren zu Figma gebracht hat, sondern auch das, was mich heute hier hält. Multi-Edit bot uns die Gelegenheit, einige Verhaltensweisen aufzupolieren und einige kleine, aber bemerkenswerte optische Verbesserungen einzuführen. Hier sind ein paar meiner Favoriten:

Wissen, wenn es so weit ist

Sho K.

Multi-Edit ist das Feature mit der längsten Entwicklungszeit von der ersten Idee bis zur Einführung. Wir haben es im Laufe der Jahre immer wieder aufgegriffen und auf Eis gelegt, immer wieder aufpoliert und überarbeitet. Es war wie ein Stein in der Schleifmaschine, den wir bearbeitet haben, bis er glänzend und glatt war.

Merkwürdig an diesem Prozess war, dass Multi-Edit mit der Verfeinerung fast zu verblassen begann. Wir arbeiten nun schon seit Monaten intern damit und haben irgendwie aufgehört, es zu bemerken – bis wir zurück in die Produktionsumgebung wechselten und uns bewusst wurde, wie ineffizient die Dinge vorher waren!

Ein Teil von mir möchte weiter an der Verbesserung arbeiten, weil wir jeden Tag neue Dinge finden, die bei der Handhabung mehrerer Objekte besser funktionieren könnten. Die Änderung bei der Ausrichtung von Objekten über mehrere Frames hinweg haben wir erst vor ein paar Wochen entdeckt und implementiert. Ich vermute, dass wir solche Entdeckungen auch noch nach der Markteinführung machen werden.

Außerdem bleibt eine nagende Angst vor Dingen, die wir kaputt gemacht haben könnten. Wir haben eine Menge subtiler Verhaltensweisen geändert, also besteht immer die Gefahr, dass wir etwas für Nutzer verschlechtert haben, die auf eine bestimmte Arbeitsweise angewiesen sind. Natürlich haben wir eine Menge Tests durchgeführt und werden schnell auf mögliche Probleme reagieren, aber es ist nervenaufreibend, tiefgreifende Änderungen vorzunehmen, wenn man weiß, dass Millionen von Menschen bei ihrer täglichen Arbeit auf Figma angewiesen sind!

Andererseits bin ich aber auch unglaublich aufgeregt. Multi-Edit ist etwas, wovon wir seit fast fünf Jahren träumen, und es ist ein tolles Gefühl, euch zu zeigen, wie es funktioniert. Ich hoffe, dass euch die Änderungen gefallen. Wenn ihr aber auf Dinge stoßt, die ihr euch anders wünschen würdet, sendet uns doch bitte euer Feedback, damit wir noch weitere Verbesserungen vornehmen können.

Bist du startklar? Schau dir unsere Playground-Datei an, um Multi-Edit kennenzulernen.