So vereinfachst du die Pflege deines Designsystems mit dem Figma-Agenten

Jedes Designsystem muss gewartet werden. Dies ist zwar notwendig, kann aber leicht aufgeschoben werden, wie zum Beispiel die Bereinigung der Namenskonventionen, die Überprüfung der Nutzung von Tokens, die Aktualisierung veralteter Dokumentationen und das Aufspüren von Abweichungen zwischen deinem Produkt und der Bibliothek. Da Teams schneller arbeiten als je zuvor, ist es schwer zu erkennen, an welchen Stellen Designs nicht mehr mit dem System synchron sind. Der Output eines Agenten ist nur so gut wie der Kontext, der ihm gegeben wird, und ein Großteil dieses Kontextes lebt in deinem Designsystem.

Jetzt kann der Figma-Agent die Wartung deines Designsystems für dich übernehmen und sogar die Regeln und Konventionen deines Systems automatisch anwenden, wenn du neue Inhalte erstellst. So kannst du deine Zeit für Entscheidungen nutzen, die dein System gestalten, anstatt es nur zu verwalten. Hier erfährst du, wo und wie du unseren Agenten einsetzen kannst.

Verwende den Agenten zur Automatisierung der Dokumentation

Die Dokumentation des Designsystems richtet sich an verschiedene Zielgruppen in der Produktentwicklung, von Designern, die versuchen, die richtige Komponente auszuwählen, bis hin zu Entwicklern, die nach den benötigten Informationen für die Übergabe suchen. Im Kern verdeutlicht die Dokumentation, wie das System genutzt werden soll, damit Teams es einheitlich anwenden und einen hohen Qualitätsstandard aufrechterhalten können. Der Agent kann dich dabei unterstützen, diese Dokumentation zu erstellen und sie im Zuge der Weiterentwicklung deines Designsystems anzupassen.

Dokumentiere, wie Komponenten funktionieren

Die Dokumentation ist eine der Aufgaben, die man am leichtesten vernachlässigt. Sobald du dich entschieden hast, wie eine Komponente funktionieren soll, kann der Agent dir dabei helfen, eine Dokumentation zu erstellen, in der erklärt wird, wie sie verwendet werden soll und wie sie sich verhalten soll.

Beauftrage den Agenten mit Folgendem:

• Definiere die Regeln für die Verwendung einer Komponente
• Zeige visuelle Beispiele verschiedener Varianten, Eigenschaften und Konfigurationen
• Empfehle Komponenten-APIs für die Übergabe, z. B. die Zusammenführung von Booleschen Werten zu Aufzählungen, das Weglassen unnötiger Hover-Zustände oder das Hervorheben versteckter untergeordneter Eigenschaften

So nutzt beispielsweise Ian Guisard, Product Designer bei Uber, den Agenten und eine Reihe von Skills, die er selbst entwickelt hat, um Komponenten auf den sieben Plattformen von Uber zu dokumentieren. Anstatt manuell Spezifikationen für jede Komponente zu schreiben, können Designer /create-api ausführen, um eine klare, organisierte und entwicklerfreundliche Beschreibung davon zu erstellen, wie eine Komponente funktionieren soll, und /create-color verwenden, um eine Farbspezifikation zu erstellen, die zeigt, welches Design-Token jeder Teil über Varianten und Zustände hinweg verwendet.

Dadurch erhalten Entwickler die benötigten Informationen, ohne die Figma-Datei durchforsten oder sich zur Klärung erneut an die Designer wenden zu müssen. Durch die Automatisierung von Teilen der Dokumentationsarbeit kann sich das Team auf die Verbesserung des Systems konzentrieren, anstatt wertvolle Zeit damit zu verbringen, jede Spezifikation manuell zu aktualisieren.

Stimme die Produktarbeit auf dein Designsystem ab

Je schneller die Produktentwicklung voranschreitet, desto schwieriger wird es zu erkennen, an welchen Stellen Entwürfe nicht mehr mit dem System synchron sind. Der Agent kann dabei helfen, diese Lücken aufzudecken und die Entwürfe so anzupassen, dass aktuelle Komponenten und Tokens verwendet werden, bevor sich Inkonsistenzen ausbreiten.

Prüfe Designs auf Einhaltung

Das Überprüfen von Designs anhand deines Designsystems kann zeitaufwendig sein. Ein einzelner Bildschirm kann Komponenten und Tokens aus mehreren Bibliotheken verwenden, sodass du selbst nachverfolgen musst, woher die einzelnen Elemente stammen. Der Agent kann dabei helfen, diese Fälle aufzuzeigen, sodass keine manuelle Überprüfung erforderlich ist.

Beauftrage den Agenten mit Folgendem:

• Erstelle eine Bestandsliste der in einem Fenster verwendeten Komponenten und Tokens
• Ordne diese Komponenten und Tokens ihren jeweiligen Bibliotheken zu

Nehmen wir zum Beispiel an, ein Designer, der eine Checkout-Seite erstellt, entwickelt eine Schaltfläche „Für später speichern“ von Grund auf neu, anstatt die bereits im Designsystem vorhandene Schaltflächenkomponente zu verwenden. Der Agent kann diesen Bildschirm anhand der Designbibliothek überprüfen, darauf hinweisen, dass die Schaltfläche mit der bereits im System vorhandenen Komponente Button/Secondary übereinstimmt, und darauf hinweisen, falls anstelle des aktuellen Tokens ein hartkodierter Farb- oder Abstandswert verwendet wird. Dadurch hat der Designer die Möglichkeit, die Serienkomponente und den Token auszutauschen, bevor das Design weiterentwickelt wird.

Passe es an dein Designsystem an

Sowohl bestehende Produktansichten als auch KI-generierte Entwürfe können mit Produktkomponenten und Tokens aus dem Takt geraten. Um diese Arbeit an dein Designsystem anzupassen, musst du möglicherweise Teile manuell ersetzen. Der Agent kann dabei helfen.

Beauftrage den Agenten mit Folgendem:

• Ersetze eine bestimmte Komponente oder ein bestimmtes Token im gesamten Design auf einmal, indem du es in deinem Prompt mit einem @-Verweis kennzeichnest
• Beauftrage den Agenten, Komponenten aus einer bestimmten Bibliothek zu finden und zu ersetzen, und dann die Änderungen zu überprüfen

Bei Granola, der KI-basierten Notiz-App, nutzt Produktdesigner Paavan Buddhdev die Figma-Chrome-Erweiterung, um einen bestehenden Bildschirm aus der Granola-App in Figma zu importieren. Wenn er das tut, werden Schaltflächen und andere Elemente vom Designsystem von Granola getrennt. Anstatt jeden einzelnen von Hand zu ersetzen, kann er eine importierte Schaltfläche auswählen und den Mitarbeiter bitten, diese durch die passende Schaltfläche aus dem Designsystem zu ersetzen.

Gib dem Agenten Kontext, damit er dein System wie beabsichtigt nutzt

Sobald du deine bisherigen Arbeiten wieder in das System importiert hast, stellt sich als Nächstes die Frage, wie du neue Arbeiten direkt nach ihrer Erstellung im System erfassen kannst. Du kannst Richtlinien zu einer veröffentlichten Bibliothek hinzufügen, um die Absicht, Regeln und Muster hinter deinem Designsystem für den Agenten zu erfassen. Da dieser Kontext beim Einbinden der Bibliothek automatisch mitgeliefert wird, müssen Entwickler nicht in jeder Anweisung dieselben Prompts erneut formulieren.

Lass den Agenten bei der Bereinigung helfen

Kleine Unstimmigkeiten in einem Designsystem summieren sich schnell, lassen sich nur mühsam manuell beheben und können das Vertrauen in das System untergraben, sodass Produktentwickler eher dazu neigen, das System zu umgehen, anstatt es zu nutzen. Der Agent kann einen Teil dieser Wartungsaufgaben übernehmen, angefangen bei der durchgängigen Umsetzung von Namensänderungen in einer Bibliothek bis hin zur Überprüfung, ob Komponenten die vorgesehenen Tokens verwenden.

Standardisiere die Benennung in deinem System

Das Umbenennen einer Komponente ist einfach. Das Aufräumen einer gesamten Bibliothek, in der derselbe Zustand hover, hovered und mouse-over genannt wird, ist eine ganz andere Aufgabe. Möglicherweise gibt es auch generisch benannte Assets, die nicht klar vermitteln, wofür sie gedacht sind. Der Agent kann dabei helfen, diese Unstimmigkeiten aufzuspüren und deine Namenskonventionen systemweit durchzusetzen.

Beauftrage den Agenten mit Folgendem:

• Mach eine Bestandsaufnahme der aktuell in deinem System verwendeten Namen
• Oberflächennamen, die abweichen, wie small und sm, identifizieren und dann auf eine einheitliche Konvention, wie small, vereinheitlichen
• Wende eine bereits getroffene Namensentscheidung auf die gesamte Bibliothek auf einmal an
• Ersetze generische Asset-Namen wie icon_1 oder icon_2 durch beschreibende Namen wie linkedin_icon oder tiktok_icon.
• Erstelle ein Protokoll der umbenannten Elemente, damit diese Änderungen in den Code übernommen werden können

Prüfe, ob die Komponenten Designtokens verwenden

Je größer eine Bibliothek wird, desto schwieriger wird es, den Überblick darüber zu behalten, ob jede Komponente noch die richtigen Tokens verwendet. Der Agent kann die Werte einer Komponente überprüfen und feststellen, ob sie mit Design-Tokens verknüpft sind, wodurch sich Abweichungen leichter erkennen lassen.

Beauftrage den Agenten mit Folgendem:

• Überprüfe die Nutzung von Tokens in den verschiedenen Komponenten
• Erstelle Annotationen, die zeigen, welche Tokens eine Komponente verwendet

Zum Beispiel kann er aufzeigen, wo eine Schaltflächenkomponente einen 8 px Icon-Abstand verwendet, anstatt des gemeinsamen Abstandstokens, das vom Rest der Bibliothek genutzt wird. Wenn dein Team diese Überprüfung regelmäßig durchführen möchte, kannst du einen Skill verwenden, um die Schritte in einen wiederholbaren Workflow zu verpacken.

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.

Mehr über den Figma-Agenten erfährst du in unserem Hilfe-Center.