Workflow lab: Bleib im Flow mit dem Figma-Agent

Willkommen bei Workflow Lab, wo wir einen Beispiel-Workflow mit Figma-Produkten und -Tools präsentieren.

Der Einsatz von KI im Design-Workflow bedeutet, sich ständig eine Frage zu stellen: Was erfordert mein Urteilsvermögen, und was muss einfach nur erledigt werden? Das klingt offensichtlich, bis man gegen eine Frist ankämpft und trotzdem möchte, dass jede Produkt- und Designentscheidung von einem selbst stammt. Folge einem Designer bei Offtrail, einer fiktiven App für lokale Outdoor-Treffen, dabei, wie und wann er etwas an den Figma-Agenten übergibt, von der Aktualisierung veralteter Komponenten bis hin zur Erstellung einer Spezifikation für das Designsystem-Team.

Das Problem

Die Offtrail-Berechtigungseinstellungen bieten derzeit keine Möglichkeit, jemandem das Hosting eines einzelnen Ereignisses zu ermöglichen. Daher möchte das Team temporäre Host-Berechtigungen hinzufügen, die nach dem Ereignis ablaufen. Der Designer nimmt den Auftrag entgegen: Die Berechtigungsfunktionen sollen so überarbeitet werden, dass jemand für einen begrenzten Zeitraum als Host beitreten kann, dass angezeigt wird, wann dieser Zugriff endet, und dass Gruppenadmins die Möglichkeit erhalten, dies zu verwalten.

Die bestehende Berechtigungsstruktur muss bereits aktualisiert werden. Einige Frames nutzen aktuelle Komponenten und Variablen, während andere veraltete Instanzen oder manuell geänderte Werte enthalten. Da der Flow für den temporären Zugriff auf diesen Bildschirmen aufbaut, muss der Designer diese zunächst auf den neuesten Stand bringen, bevor er fortfahren kann.

Mit dem Agenten inspizieren und reparieren

Bevor der Designer mit der Arbeit am Flow beginnt, muss er wissen, welchen Teilen der vorhandenen Designdatei er vertrauen kann. Ist diese Komponente noch aktuell? Ist diese Verknüpfung der Variablen falsch, oder sollte sie so funktionieren? Anhand dieser Angaben kann der Designer erkennen, welche Teile des bisherigen Flows aktualisiert werden müssen.

Niemand hat Zeit, jedes einzelne Frame von Hand zu überprüfen, was wahrscheinlich der Grund dafür ist, dass die Datei überhaupt erst Abweichungen aufweist. Hier kommt der Figma-Agent ins Spiel. Bevor das Feature entworfen wird, wählt der Designer die Frames aus, die er erneut verwenden möchte, öffnet einen neuen Chat mit dem Agenten und verbindet die aktuelle Bibliothek. Der Designer verwendet den /repair-library-usage-Skill in einem Agentenchat, um die ausgewählten Frames zu inspizieren, Komponenteninstanzen und Variablenbindungen mit der aktuellen Bibliothek zu vergleichen und veraltete Elemente zu ersetzen, wann immer ein klarer, aktualisierter Äquivalent existiert.

Der Agent wendet diese unkomplizierten Aktualisierungen direkt an. Wenn die richtige Entscheidung nicht auf der Hand liegt, beispielsweise wenn zwei Komponenten in der aktuellen Bibliothek beide in Frage kommen, lässt der Agent diesen Fall unverändert und versieht den Frame mit einer Anmerkung darüber, was er gefunden hat und warum er den Vorgang abgebrochen hat. Das Ziel besteht darin, den Teil der Erfahrung zu aktualisieren, auf dem die neue Arbeit aufbaut, und nicht, die gesamte Datei zu bereinigen. Der Designer löst also nur die Fälle, die dieses Projekt betreffen, und macht sich dann daran, den ersten Entwurf des Ablaufs für den vorübergehenden Zugriff zu entwerfen, ohne dabei zwischen Dateipflege und Funktionsentwurf hin- und herzuwechseln.

Überprüfe den Flow und arbeite das Feedback durch

Nachdem die Quelldatei repariert und die vorgeschlagenen Verbesserungen entworfen wurden, bringt der Designer den Flow des temporären Zugriffs in eine Designbesprechung ein. Das Feedback ist teilweise ganz einfach: Den Text zum Ablaufdatum präzisieren, die Hierarchie straffen, den Wiederherstellungspfad leichter auffindbar machen. Andere Kommentare werfen politische Fragen auf, ob die UX den rechtlichen Anforderungen von Offtrail entspricht. Was passiert, wenn eine Einladung abläuft, bevor sie angenommen wird, oder wenn eine Berechtigungsaktualisierung fehlschlägt? Was sieht ein Mitglied, wenn dessen Zugriff mitten in einer Sitzung endet?

Im Moment sind das alles nur Kommentar-Threads, und es ist schwer zu erkennen, welche eine klare Aktion beinhalten und welche eine Entscheidung erfordern. Daher bittet der Designer den Agenten, sie zu sortieren. Der Agent liest die Gespräche, gruppiert wiederkehrendes Feedback, zeigt Widersprüche auf und hebt offene Fragen hervor. Dies gibt dem Designer eine kurze, signalstarke Zusammenfassung dessen, was zu tun ist und was noch überlegt werden muss.

Ein Thread bleibt offen. Einige Fragen zu rechtlichen Anforderungen bleiben ungelöst, und niemand im Designteam weiß, wie die Richtlinie hier angewendet wird. Anstatt Vermutungen anzustellen, bittet der Designer den Agenten, den /compliance-review-Skill des Teams auf den Flow anzuwenden. Der Skill enthält einen Verweis auf die Prüfungen, die die Sicherheits- und Compliance-Partner des Unternehmens durchführen, sodass der Agent mit den Fragen bereitsteht, die diese Partner von den Designern erwarten, wenn es um Zugriff, Identität und Berechtigungen geht. Der Agent gibt seine Ergebnisse im Kontext zurück und annotiert die jeweiligen Frames.

Der Agent entnimmt dem externen Dokument, das von den Compliance-Partnern gepflegt wird, die erforderlichen Kontextinformationen, prüft anschließend die Entwürfe und gibt gezieltes Feedback. Dadurch kann der Designer weniger Zeit damit verbringen, den Kontext nachzuvollziehen, und mehr Zeit damit, zu entscheiden, inwiefern diese Erkenntnisse die Funktion beeinflussen.

Ein neues Designsystem-Spezifikationsdokument erstellen

Das Offtrail-Designsystem nutzt eine Komponente namens „item row“, eine vielseitige Komponente, die in Listen verwendet wird, um beispielsweise Einstellungen, Dokumente oder Benutzer*innen anzuzeigen. Aber der /compliance-review-Skill bringt eine Anforderung ans Licht, die die „item row“-Komponente derzeit nicht unterstützt: Das Design muss zeigen, wann der temporäre Zugriff eines Benutzers/einer Benutzerin abläuft. Eine neue, maßgeschneiderte Komponente erweitert nicht nur den Anwendungsbereich, sondern löst das Konzept auch vom Offtrail-Designsystem. Der nachhaltigere Weg besteht darin, die Designsystemkomponente der Artikelzeilen selbst zu verbessern.

Mittlerweile ist die Funktion fast fertiggestellt. Die Einführung eines separaten Übergabeprozesses für das Designsystem könnte das Projekt möglicherweise verzögern und den Designer dazu zwingen, den Kontext zu wechseln, um ein Spezifikationsdokument auf Komponentenebene zu erstellen. Stattdessen bittet der Designer den Agenten, einen Entwurf einer Spezifikation in einem neuen Abschnitt der Figma-Datei mithilfe des /document-Komponente-enhancement-Skills anzufertigen.

Auf der Grundlage der aktuellen Komponentenermittlung und des in der Datei verfügbaren umgebenden Designkontexts skizziert der Agent, was eine Aktualisierung des Systems möglicherweise unterstützen muss. Die Spezifikation beschreibt, wie sich die Komponente verhalten sollte, in welchen Punkten die aktuelle Version hinter den Erwartungen zurückbleibt und welche Zustände fehlen, und hebt dabei mögliche Änderungen und offene Fragen hervor.

Der Designer überprüft den Spezifikationsentwurf, bestätigt die offenen Fragen und teilt den Abschnitt mit dem Designsystemteam. Die Spezifikation befindet sich in derselben Datei wie die darin beschriebenen Frames, die Kommentare, die das Problem aufgezeigt haben, und die betreffenden Komponenten. Durch diese Nähe können Prüfende die Ergebnisse auf den Flow zurückführen, aus dem sie hervorgegangen sind, und die Verantwortung bleibt dort, wo sie hingehört. Der Designer entscheidet, wie die Funktion entwickelt wird. Das Designsystemteam entscheidet, was mit der Komponente passiert. Und der Agent erklärt, welche Änderung erforderlich ist und warum, damit das Team diese prüfen kann, während der Designer weiter am Rest der Funktion arbeitet.

Das Produktfeatureteam arbeitet weiter und ist zuversichtlich, dass die Aktualisierung des Designsystems als Abhängigkeit der Arbeiten an den temporären Berechtigungen im Blick behalten wird. Eine solche abgestimmte Arbeitsteilung vereinfacht den Aufgabenbereich jedes Teams und ermöglicht es ihm, sich voll und ganz auf seinen Zuständigkeitsbereich zu konzentrieren. Die Funktionalität entwickelt sich schnell weiter, und das Designsystemteam weiß genau, was der Grund für die Verbesserungsanfrage ist.

Ein reibungsloserer Weg zur Produktion

Die eine Produktanfrage, mit der der Designer begann, führte zu vier konkreten Ergebnissen:

• Der Agent identifizierte Lücken im Designsystem auf den vorhandenen Bildschirmen.
• Der temporäre Zugangs-Flow deckt nun den Hauptweg sowie die Ablauf-, Fehler- und Wiederherstellungszustände, die fehlten, ab.
• Der Agent überprüfte die Designs anhand der Compliance-Richtlinien des Teams und kennzeichnete jede offene Frage zur Richtlinienkonformität. Außerdem wurden die verstreuten Design-Feedbacks des Teams zu einem brauchbaren Briefing zusammengefasst.
• Eine Designsystem-Spezifikation erfasst jetzt die Lücke in der Artikelreihenkomponente mit dem erforderlichen Verhalten und verweist auf die Begründung.

Eine gemeinsame, visuelle Multiplayer-Arbeitsfläche hält diese Ausgaben verbunden. Die entworfenen Flows, Kommentare und Annotationen bleiben an der Arbeit, die sie beschreiben, angehängt, sodass die Designer, die Prüfenden und der Agent dasselbe Artefakt verfeinern können, anstatt das Feedback über separate Tools zu verstreuen oder bei jeder Übergabe neu zu beginnen. Das ist eine viel umfangreichere Aufgabe als „der Agent hat einen Bildschirm erstellt“. Der Agent überprüfte, überarbeitete und verdichtete das Feedback, während der Designer die Entscheidungen hinsichtlich Design, Produkt und Richtlinien traf, die die Funktion definierten. Ein Agent ist dann am nützlichsten, wenn er den Designer entlastet, indem er den Kontext weitergibt, sich um sich wiederholende Schritte kümmert und die nächsten Schritte vorbereitet, sodass der Designer weniger Zeit damit verbringt, den Weg bis zur Produktion zu koordinieren, und mehr Zeit damit, zu entscheiden, was wirklich produziert werden sollte.

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.

Erfahre mehr darüber, wie du den Agent zur Pflege deines Designsystems nutzen kannst, entdecke, wie andere Unternehmen den Agent in ihren Workflows einsetzen, oder lies in unserem Hilfezentrum mehr darüber, wie du mit dem Figma-Agenten loslegen kannst.