3 Möglichkeiten, wie Produktdesigner*innen den Figma-Agenten für Handwerk, Geschwindigkeit und kreative Ausdruckskraft nutzen

Seit wir den Figma-Agenten

zum ersten Mal gestartet haben, haben wir beobachtet, wie Teams eine völlig neue Art der Interaktion mit der Arbeitsfläche nutzen. In einer Vielzahl von Anwendungsfällen – beim Verbinden mit anderen Tools

Figma Design-Agent, jetzt mit benutzerdefinierten Tools und mehr Kontext

Prompts sind der erste Schritt. Dank benutzerdefinierten Tools, realem Kontext und Skills entspricht das Ergebnis des Design-Agenten deinen Erwartungen.

, Teilen von Skills, Erstellen von generativen Plugins und Shadern

Hinter den Kulissen: Generative Plugins und Shader in Figma

Ab heute hast du mehr kreative Kontrolle über generative Plugins und Shader und kannst deine Werke mit der Community teilen. Produktdesigner Rogie King erzählt die Geschichte hinter dieser Entwicklung.

 – haben wir ein Muster erkannt: Teams, die den Figma-Agenten verwenden, um Routinearbeiten zu automatisieren, Designsysteme zu dokumentieren und zu pflegen und die Ausdrucksfähigkeit zu steigern.

Heute verlässt der Figma-Agent die Beta-Version mit einer Reihe von Verbesserungen, unter anderem hinsichtlich der Ausgabequalität. Der neue Agent ist besser darin, Anweisungen zu befolgen und länger laufende Aufgaben zu bewältigen. Tatsächlich gewinnt er in über ~60 % unserer menschlich bewerteten Evaluierungen mit Professional-Designern. Zusätzlich zur verbesserten Qualität haben wir neue Funktionen eingeführt, die dir Folgendes ermöglichen:

• Füge Richtlinien hinzu – Markdown-Dateien, die Bibliothekseigentümer*innen in eine Figma-Bibliothek hochladen können, um dem Agenten zusätzliche Informationen darüber zu geben, wie ihr Designsystem verwendet werden soll.
• Verwende den Agenten, um Figma-Kontext aus der gesamten Plattform zu finden und einzufügen, beispielsweise FigJam-Notizen, Text aus Figma Slides oder Figma-Design-Frames.
• Folge den Agenten deiner Mitarbeiter*innen auf der Arbeitsfläche, für ein Multiplayer-Erlebnis, das die Art und Weise widerspiegelt, wie wir jetzt arbeiten.

Wie wir von Teams bei Uber, Granola und Atlassian erfahren haben, bedeutet die Integration des Agenten in die bestehende Arbeitsumgebung, dass sie keine Prozesse neu erfinden oder zwischen verschiedenen Tools hin- und herwechseln müssen. So können sie schneller vorankommen und gleichzeitig ihre Fachkompetenz steigern.

Wie Uber die Dokumentation von Designsystemen skaliert

Das Designsystem-Team von Uber stellt Komponenten für sieben Plattformen bereit. Die Herausforderung besteht nicht nur darin, sie zu erstellen, sondern sie auch zu vermitteln: Wenn eine einzelne Komponente Dutzende von Zuständen, Varianten, Slots, Booleschen Werten und Aufzählungen enthalten kann, führt eine falsche Interpretation des Anwendungsbereichs zu Nacharbeiten im weiteren Verlauf. Daher entwickelten der Staff Product Designer Ian Guisard und die Senior Product Designerin Niloo Bakhshi einen Workflow, der den Figma-Agenten nutzt, um ihr Designsystem zu dokumentieren und zu pflegen- womit die Präzision entsteht, die eine Voraussetzung für Geschwindigkeit ist.

Niloo's Arbeit ist zutiefst visuell und „extrem detailorientiert“, sagt sie. „Ich verbringe viel Zeit in Figma, um Prototypen zu erstellen, die die Vision für neue Komponenten zeigen.“ In der Vergangenheit war es ein langsamer und manueller Prozess, diese Arbeit in umsetzbare Komponentenspezifikationen zu übersetzen. Nun arbeitet Ian mit ihr zusammen, um mithilfe des Figma-Agents und einer Reihe von Tools, die er selbst entwickelt hat, die Arbeit zu automatisieren und entwicklungsreife Dokumentationen zu erstellen. /create-anatomy legt beispielsweise die Struktur einer Komponente offen, während /create-color

Farben auf die Designtokens abbildet und hartkodierte Werte markiert. Der Einsatz dieser Skills erspart den Ingenieuren das mühsame Durchforsten der Designebenen und reduziert den Hin- und Her-Tauschen zwischen den verschiedenen Plattformen.

„Diese Skills werden in der Figma Community veröffentlicht, sodass jeder sie auf seinen eigenen Komponenten ausführen kann“, sagt Ian. „Man erstellt eine Aufgabe, lässt sie im Hintergrund laufen und gestaltet einfach weiter. Diese Skills sind nicht nur für Ingenieure nützlich, sondern auch für mich: Als ich versehentlich eine hartkodierte Farbe geändert habe, hat der Agent mich deutlich auf die Probleme hingewiesen. Das ist nicht nur für den Übergabeprozess eine Win-Win-Situation, sondern auch für uns als Designer als Anhaltspunkt.“

Die Automatisierung dieser Arbeit hat dem Team geholfen, große Effizienzgewinne zu erzielen. Dokumentationen, für deren Erstellung früher mehrere Personen Monate gebraucht haben, werden heute von einem einzigen Designer an einem Nachmittag veröffentlicht. „Dadurch sind wir viel effizienter geworden und können qualitativ hochwertigere Komponenten in einem Bruchteil der Zeit ausliefern“, sagt Ian. „Da der Agent in Figma integriert ist, werden die Skills genau dort ausgeführt, wo die Arbeit bereits stattfindet. Die Komponente und ihr Kontext sind bereits in der Datei, sodass es nicht nötig ist, die Arbeit in ein anderes Tool zu verlagern oder einen separaten Workflow zu erlernen. Dadurch lassen sich die Skills intuitiv nutzen und problemlos im Team weitergeben.“

Wie Granola selbstbewusst gestaltet

Das kleine, agile Team hinter der KI-gestützten Notiz-App Granola zeichnet sich durch eine Kultur des Experimentierens aus. „Wenn man neue Ideen auslotet, ist es unglaublich hilfreich, in Figma zu arbeiten und 10 verschiedene Versionen eines Entwurfs auf der Arbeitsfläche verteilt zu haben“, sagt Product Designer Paavan Buddhdev. Figma's Agent hilft ihm dabei, schnell zu iterieren und das Feedback seines Teams zu integrieren, sodass er seinen Fokus auf das große Ganze verlagern kann. „Es war eine massive Zeitersparnis“, sagt er.

Mithilfe des Granola-Verbinders weist Paavan den Figma-Agenten an, die Arbeitsfläche direkt mit Feedback aus Besprechungsnotizen und Protokollen zu versehen. Dies ist bei routinemäßigen Design-Besprechungen ebenso nützlich wie bei gezielten „Taste the Soup“-Sessions, bei denen das gesamte Team funktionierende Prototypen testet und Feedback dazu gibt. „Früher habe ich während der Besprechung wie wild Notizen getippt, um eine laufende To-do-Liste zu führen“, sagt Paavan. „Das Tolle an der Verwendung des Granola-Verbinders mit dem Agenten ist, dass ich während des Meetings präsenter sein und effektiv reagieren kann. Ich kümmere mich zwar immer noch um die gestalterische Arbeit, aber es gibt mir mehr Selbstvertrauen zu wissen, dass mir nichts Wichtiges entgeht.“

Paavans Workflow nutzt auch Automatisierung, um beim Entwerfen den Schwung beizubehalten. Mit der Figma Chrome-Erweiterung holt er vorhandene Bildschirme aus der Granola-App auf die Arbeitsfläche. Dann bittet er den Agenten, die Verbindungen zu Oats, ihrer Komponentenbibliothek, zu bereinigen. Manchmal bittet er auch um verschiedene Textvarianten, zum Beispiel: „Gib mir 30 unterschiedliche Formulierungen für diesen Button-Text.“ „Es hilft einem dabei, die Dinge zu tun, auf die man eigentlich keine Lust hat“, sagt er.

Da der Agent taktische Reibungsverluste verringert, hat Paavan mehr Zeit, verschiedene Lösungen zu prüfen, mit den Benutzer*innen zu sprechen und seine Arbeit auf Herz und Nieren zu prüfen. „Je schneller man ein Design vor eine/n Benutzer*in bekommt, desto besser“, sagt er. „Alles, was ich mit dem Agenten mache, dient diesem Zweck.“

Wie Atlassian Bewegung in die Praxis umsetzt

Motion ist ein zentraler Bestandteil der Markenpräsentation und der Benutzererfahrung von Atlassian, wird jedoch nicht immer umgesetzt. Indem das kleine Animations-Designteam von Atlassian Animations-Assets in Figma in wiederverwendbare Komponenten umwandelte, konnte es sein Fachwissen ausbauen, wobei der Figma-Agent als Erweiterung dieses Systems fungierte. „Dadurch werden animierte Illustrationen für uns von einer Aufgabe, die an Spezialisten weitergegeben werden muss, zu einer systemeigenen Funktion, und das hilft uns, die Kunst der Animation zu bewahren“, sagt die leitende Produktdesignerin Alexandra Pereira.

Nun kann ein Designer, der an einem Onboarding-Modal arbeitet, aus einer Bibliothek mit animierten Illustrationen auswählen, um einen Komponentenplatz zu füllen. Wenn der Kontext eine individuelle Anpassung erfordert, unterstützt der Agent die Benutzer*innen dabei, die Übergänge und die Dauer so anzupassen, dass sie der Designabsicht entsprechen, und stellt gleichzeitig sicher, dass das Ergebnis die Variablen des Atlassian Designsystems verwendet. "Die Fähigkeit, innerhalb von Leitplanken zu generieren, ist für Enterprise-Systeme wirklich wichtig", sagt Alexandra. Das garantiert Konsistenz, Barrierefreiheit und eine hohe Umsetzungsqualität ebenso wie Schnelligkeit.

Das bedeutet, dass Designer, die weniger in Animation geübt sind, Arbeiten produzieren können, die sowohl expressiv als auch markenkonform sind. Als Produktdesigner Davy Fung ein Slack-Kommunikationsbanner animieren musste, teilte er dem Agenten mit, was er wollte, und bat dann um Feedback, was funktionierte und was nicht. „Normalerweise wäre mir das überhaupt nicht möglich“, sagt er. „Für Designer, die mit statischen Designs arbeiten, haben sich unsere Kompetenzen erweitert.“

Da das gesamte Team nun damit beginnt, Animations-Tools auf der Arbeitsfläche zu nutzen, fällt es allen leichter, einen guten Ausgangspunkt zu finden. „Ich glaube, dass viele Menschen ihren Geschmack in Bezug auf Animationen verfeinern können, wenn sie diese neuen Tools auf der Figma-Arbeitsfläche nutzen, wo sie es bereits gewohnt sind, Designentscheidungen zu treffen“, sagt Lead Motion Designer Maxwell Hathaway.

Der Figma-Agent steht Benutzer*innen mit einer Full-Lizenz auf den Professional-, Organisation-, Enterprise- und einigen Bildungs-Abos zur Verfügung und hat auf dem Starter-Abo eingeschränkte Verfügbarkeit. Collab-, Dev- und View-Lizenzen können den Agenten in ihren Entwürfen verwenden. Um ein Beispiel dafür zu sehen, wie der Agent in deinem Prozess eingesetzt werden kann, sieh dir unser neuestes Workflow Lab an und probiere es dann gleich selbst aus.