Wie wir die KI-Suche in Figma entwickelt haben
Wie wir von der Autovervollständigung zur KI-Suche gelangten – und ein Tool geschaffen haben, das verändert, wie Designer*innen bestehende Arbeiten finden und nutzen.
Wie wir die KI-Suche in Figma entwickelt haben teilen
Illustrationen von Structure Bâtons.
Einige Unternehmen haben sogar spezielle Slack-Kanäle, um bestehende Designs wiederzufinden.
Abgesehen von der kreativen Arbeit am Entwurf von Benutzeroberflächen verbringen Designer*innen überraschend viel Zeit mit einer Aufgabe, die eigentlich simpel sein sollte: dem Suchen nach bereits vorhandenen Designs. Bei Figma haben wir festgestellt, dass selbst unsere eigenen Designer*innen oft Zeit verschwenden, um Quelldateien zu finden – basierend nur auf Screenshots. Das zeigt sich in zahlreichen Slack-Nachrichten, in denen sie ihre Teamkolleg*innen um Unterstützung bitten. Aus diesem Grund haben wir bei der Config 2024 eine KI-gestützte Suche vorgestellt.
Mit der visuellen Suche kannst du anhand eines Screenshots, eines ausgewählten Frames oder sogar einer schnellen Skizze nach Designs suchen. Die semantische Suche nutzt KI, um den Kontext hinter textbasierten Abfragen zu verstehen – auch wenn du die genauen Begriffe für einen Komponentennamen, eine Beschreibung oder eine Datei nicht kennst.
Im Nachhinein erscheinen dies visuelle und die semantische Suche selbstverständlich. Doch die Entwicklung von KI-Funktionen, die über den Hype hinaus echten Mehrwert bieten, braucht Zeit. In unserem Fall Monate voller Planung und Tests.
Wenn dich die Details interessieren, empfehlen wir dir unseren Artikel dazu, wie wir die Infrastruktur aufgebaut haben, die diese Updates ermöglicht.
Wechsel von der Autovervollständigung zur KI-Suche
Eine Funktion wie Design Autocomplete kann dabei helfen, im Flow zu bleiben, indem automatisch die nächste Komponente vorgeschlagen wird.
Wir sind der Meinung, dass KI die Routineaufgaben übernehmen sollte, damit du mehr Zeit für komplexere Aufgaben hast und dich auf die Bedürfnisse der Nutzer*innen konzentrieren kannst. Vor diesem Hintergrund haben wir im Juni 2023 einen dreitägigen KI-Hackathon gestartet. Am Ende unseres Sprints hatten wir 20 abgeschlossene Projekte, darunter war eins besonders ehrgeizig mit einem funktionierenden Prototyp: Design Autocomplete. Dieser KI-Assistent schlägt während des Arbeitens automatisch passende Komponenten vor – wie z. B. eine „Erste Schritte“-Schaltfläche für Onboarding-Flows. Die Idee hatte so viel Potenzial, dass wir sie direkt in unsere Produkt-Roadmap aufgenommen haben.
Retrieval-Augmented Generationist ein Framework zur Verbesserung der Genauigkeit von LLMs.
Unser erster Schritt bestand darin, den funktionierenden Prototyp mit internen Teams zu teilen und Designer*innen zu interviewen, die ihn im Rahmen von User Research Sessions ausprobiert haben. Während wir die Funktion basierend auf ihrem Feedback weiterentwickelten, begannen wir parallel damit, die Grundlagen für die KI-Suche zu schaffen, die im Hintergrund laufen sollte. Anhand von Retrieval-Augmented Generation (RAG) wussten wir, dass wir die Leistung der KI durch Beispiele aus der Suche optimieren konnten. Wenn die automatische Vervollständigung ähnliche Designs identifizieren könnte, an denen Designer*innen gerade arbeiten, könnte sie gezielt bessere Vorschläge für die nächste Komponente machen.
Während wir die Autovervollständigung auf Grundlage von internem Feedback und Tests weiterentwickelten, traten konsistente Muster zutage. Designer*innen starten ein Projekt selten bei null, sondern orientieren sich fast immer an bestehenden Arbeiten. Sie greifen frühere Erkenntnisse wieder auf, holen alte Ideen hervor und nutzen diese, um ihre eigene Arbeit voranzutreiben. Tatsächlich stammen 75 % aller zur Figma-Arbeitsfläche hinzugefügten Objekte aus anderen Dateien. Das Problem dabei: Um diese Designs zu finden, müssen Designer*innen oft die Organisationsstruktur kennen und wissen, wer woran gearbeitet hat – ein zeitaufwändiger Prozess, der den Arbeitsfluss stört. Wir haben uns gefragt: Ist die Autovervollständigung wirklich der richtige Schwerpunkt, oder sollten wir uns zunächst auf eine verbesserte Suchfunktion konzentrieren?
Bevor wir diese Frage beantworteten, konzentrierten wir uns darauf, die Suche zu verbessern, indem wir die Workflows und Verhaltensweisen der Designer*innen genauer analysierten. Dabei haben wir zwei wichtige Workflows identifiziert, für die wir Lösungen finden wollen: den Erkundungsmodus, in dem Designer*innen kreative Ansätze für Benutzerprobleme entwickeln, und den Ausführungsmodus, bei dem sie schnell Elemente auf die Arbeitsfläche bringen wollen.
Designer*innen wechseln ständig zwischen diesen beiden Modi, daher mussten wir uns mit zwei Hauptproblemen befassen:
- Nicht immer sind Designelemente auf der entsprechenden Ebene erkennbar. Bisher mussten Designer*innen entweder in den Bibliotheken des Designsystems nach einzelnen Low-Level-Komponenten suchen oder ganze Dateien öffnen, um spezifische Screens zu finden. Etwas dazwischen – wie ein Frame, der mehrere Komponenten kombiniert – zu finden, war zeitaufwändig und störte den kreativen Flow.
- Allein anhand des Thumbnails ist oft schwer zu beurteilen, ob ein Suchergebnis relevant ist. Ohne zu wissen, ob ein Ergebnis das richtige Design oder die aktuellste Version enthält, müssen Designer*innen die Datei zur Überprüfung öffnen, statt schnell die Thumbnails zu durchsuchen.
Diese Analyse machte deutlich: Die Suche war ein erhebliches Problem. Während die Autovervollständigung warten konnte, war eine verbesserte Suche und Navigation dringend erforderlich.
Festlegung eines Suchansatzes
Wir wussten, dass wir einen präzisen Ansatz brauchten, der echten Mehrwert bot und gleichzeitig zukünftige Funktionen wie die Autovervollständigung vorbereitete. Unsere Analyse ergab drei zentrale Anwendungsfälle:
- Frame-Lookup: Designer*innen suchen nach einem bestimmten Design, das sie bearbeiten und anpassen können.
- Frame-Variationen: Designer*innen suchen nach verschiedenen Möglichkeiten, ein bestimmtes UI-Element zu gestalten, basierend auf vorherigen Arbeiten oder bewährten Mustern.
- Umfassende Inspiration: Designer*innen suchen nach thematisch ähnlichen Konzepten oder alternativen Ansätzen als Ausgangspunkt.
Wir haben uns entschieden, mit den allgemeinen Suchanforderungen rund um die Gestaltung zu beginnen, wie etwa der Suche nach konkreten Designs. Erst danach wollten wir uns auf weniger häufige Anwendungsfälle konzentrieren, wie beispielsweise die Ideenfindung zu Beginn eines Projekts. So konnten wir auf bestehenden Nutzergewohnheiten aufbauen. Wir wollten außerdem auf bewährten KI-Research zurückgreifen, wie etwa die umgekehrte Bildersuche, um unseren Nutzer*innen möglichst schnell einen Mehrwert zu bieten. Um unsere Vision mit dem Rest des Designteams zu teilen, haben wir einen End-to-End-Prototyp erstellt, der diese verbesserte Suche veranschaulicht.
Die Herausforderungen einer unendlichen Arbeitsfläche
Wir haben schnell gelernt, dass wir nicht alles indizieren und suchen können – das wäre zu teuer. Da Designer*innen häufig auf frühere Arbeiten zurückgreifen, konzentrierten wir uns auf Frames der obersten Ebene, die wie UI-Designs aussehen. Was wir jedoch nicht erwartet hatten: Designer*innen organisieren ihre Arbeit oft in Abschnitte oder andere Frames. Das erschwerte es, UI-Designs eindeutig zu erkennen. Dieses Problem haben wir durch Heuristiken gelöst, etwa indem wir uns die Abmessungen gängiger UI-Frames ansahen und auch Frames anderer Ebenen einbezogen, die die entsprechenden Kriterien erfüllten.
Das Identifizieren von UI-Designs innerhalb einer Datei blieb jedoch umständlich. Häufig duplizieren und optimieren Designer*innen ihre Arbeit, wodurch viele Seiten mit ähnlichem Design entstehen. Indem wir nur eines dieser Designs durchsuchbar machten – anstatt jedes Duplikat –, konnten wir das schiere Volumen reduzieren. Ähnliches galt für Dateien: Unveränderte Kopien wurden ebenfalls nicht indiziert, um Redundanzen zu vermeiden.
Wir experimentieren immer noch mit verschiedenen Ansätzen. Eine Richtung, die wir testen, ist die Erstellung von „Qualitätssignalen“, etwa ob ein Frame als für die Entwicklung bereit markiert ist.
Schließlich mussten wir eine Hierarchie für die UI-Designs in einer Datei erstellen. Während einige Designs ausgearbeitet und bereit zur Freigabe sind, landen andere auf Seiten, die intern als „Graveyard“ bezeichnet werden. Unser Ziel war es, die wichtigen Designs hervorzuheben, ohne archivierte Arbeiten anzuzeigen. Eine pragmatische Lösung war, die Indizierung von Designs zu verzögern, bis wir sicher sein konnten, dass die Arbeit abgeschlossen war. Konkret indizierten wir Dateien erst, wenn sie mindestens vier Stunden lang nicht bearbeitet wurden. Dies reduzierte unfertige Designs in den Suchergebnissen und erhöhte die Wahrscheinlichkeit, dass Ergebnisse fertige Designs anzeigten. Zudem wurden unsere Systeme dadurch entlastet.
Bewertung der KI-Qualität auf Figma-Art
Um ein KI-Modell zu optimieren, misst du seine Leistung anhand von „Evaluierungen“. Dabei handelt es sich um Tests, die erfassen, wie gut dein Modell eine bestimmte Aufgabe in verschiedenen Situationen bewältigt. Für uns bedeutete dies, die Qualität der Suchergebnisse für typische Anfragen zu überprüfen. Unsere Evaluierungsfragen haben wir auf Basis von Gesprächen mit internen Designer*innen und einer Analyse des Datei-Browsers von Figma entwickelt. Designer*innen suchen oft nach etwas Einfachem wie „Checkout-Bildschirm“, etwas Beschreibendem wie „rote Website mit grünen Schlangenlinien“ oder etwas Spezifischem wie „Themenauswahl für Projekt [Codename]“.
Um das gesamte Spektrum der Anforderungen von Designer*innen abzudecken, musste unsere Lösung durchgehend relevante Ergebnisse liefern – von exakten Übereinstimmungen über sehr ähnliche bis hin zu leicht abweichenden Optionen. Die Funktion hätte nicht überzeugt, wenn wir nicht in der Lage gewesen wären, hochwertige Ergebnisse auf unterschiedlichen Ähnlichkeitsstufen bereitzustellen. Unsere Recherchen zeigten, dass Nutzer*innen bevorzugt mit etwas beginnen, das näher an ihrer Suche liegt oder ihr ähnlicher ist, selbst wenn sie am Ende vielfältige Ergebnisse suchen. Anders ausgedrückt: Wenn wir nicht beweisen könnten, dass wir die sprichwörtliche Nadel im Heuhaufen finden, würden Designer*innen der Funktion für eine umfassendere Erkundung nicht vertrauen.
Mithilfe unserer öffentlichen Plugin-API haben wir ein Tool zum Bewerten von Suchergebnissen auf einer unendlichen Arbeitsfläche erstellt. Wir haben sogar Tastenkürzel hinzugefügt, um das Labeling super einfach zu machen.
Feinheiten des Designs
Nachdem wir unvorhergesehene Herausforderungen bewältigt und unseren Qualitätsansatz festgelegt hatten, konzentrierten wir uns auf das Design. Es wäre zwar einfacher, einen linearen Workflow zu entwickeln, bei dem Designer*innen sich nahtlos von der Erkundung zur Ausführung bewegen –, aber die Realität ist chaotischer. Designer*innen wechseln im Verlauf ihrer Arbeit zwischen den Modi hin und her. Anstatt zu versuchen zu erraten, in welchem Modus sie sich befinden, haben wir beschlossen, dass Figma eine Reihe von Ergebnissen anbietet und die Nutzer*innen auswählen lässt, was ihren Anforderungen am besten entspricht. Wir haben uns auf die Erstellung einer einheitlichen Benutzeroberfläche zur Verfeinerung der Suchergebnisse konzentriert, unabhängig vom Eingabetyp. Zu den neuen Funktionen gehören Filter wie „Erstellt von“ und Metadaten wie die Datei, von wem und wann sie zuletzt bearbeitet wurde.
Während des gesamten Designprozesses haben wir zahlreiche Konzepte getestet. Eine Idee, die wir „Rabbit Holing“ nannten, ermöglichte es Designer*innen, tiefer in einen Ergebnistyp einzutauchen, indem sie darauf klickten. Am Ende haben wir diese Funktion verworfen, um die Sucherfahrung im Actions-Panel so unkompliziert wie möglich zu halten.
Als andere Teams bei Figma an einem zentralen Ort für KI-Funktionen – dem neuen Actions-Panel – arbeiteten, wurde uns klar: Das ist der perfekte Ort für unsere verbesserte Suche. Diese Entscheidung brachte jedoch besondere Designherausforderungen mit sich. Das Aktions-Panel bietet beispielsweise weniger Platz für Suchergebnisse als der Datei-Browser. Daher haben wir Designdetails wie „Peek“ für eine schnelle Vorschau hinzugefügt, während Designer*innen mit CMD + Enter eine Ergebnisansicht im Vollbildmodus aufrufen können.
Veröffentlichung der KI-Suche
Nach Monaten iterativer Entwicklung – inklusive einer geschlossenen Beta und kontinuierlicher Optimierung mithilfe unseres Evaluierungs-Plugins – waren wir bereit für den breiten Launch. Im Rückblick war diese Arbeit von vier zentralen Prinzipien geprägt:
- KI für bestehende Workflows: Wir haben KI genutzt, um Aufgaben zu optimieren, die Nutzer*innen bereits durchführen, wie das Durchsuchen von Dateien oder das Kopieren von Frames in ihre aktuelle Datei.
- Schnelle Iteration: Wir haben kontinuierlich Updates in unsere Staging-Umgebung geliefert und Erkenntnisse aus unserer internen Beta genutzt, um die Funktionen zu verfeinern.
- Systematische Qualitätskontrollen: Wir haben benutzerdefinierte Bewertungstools entwickelt, um die Genauigkeit der Suchergebnisse zu überwachen und zu verbessern.
- Disziplinübergreifende Teamarbeit: Unser Erfolg basierte auf enger Zusammenarbeit zwischen Produkt-, Content-, Engineering- und Researchteams.
Mit Blick auf die Zukunft freuen wir uns über das Potenzial, diese Suchfunktionen weiter auszubauen. Unsere Roadmap umfasst Pläne, der Figma Community eine visuelle und semantische Suche bereitzustellen. Durch unseren Fokus auf reale Nutzerprobleme und Feinabstimmungen basierend auf Feedback und Daten haben wir eine solide Basis für KI-gestützte Design-Tools geschaffen, die den kreativen Prozess nachhaltig verbessern. Wir können es kaum erwarten, dass du die neuen Funktionen ausprobierst und schneller das findest, wonach du suchst.
Vielen Dank an die vielen Teams bei Figma, die geholfen haben, diese Funktionen zum Leben zu erwecken, und an Spencer de Mars, Augustus Griffin und Rohun Golkar für ihre Beiträge zu diesem Artikel.