So nutzt du dein Designsystem mit dem Figma-Agenten
Dein Designsystem kann dem Figma-Agenten helfen, die Prinzipien und Richtlinien zu verstehen, die dein Produkt ausmachen. So machst du diesen Kontext für den Agenten nutzbar.
So nutzt du dein Designsystem mit dem Figma-Agenten teilen
Hero-Illustration von Cynthia Alfonso
Der Figma-Agent ist ein leistungsstarker Partner. Doch wie jeder Partner ist er nur so wertvoll wie die Informationen, die du ihm gibst. Je mehr konkreten Kontext er über dein Designsystem und die anstehende Arbeit hat, desto besser kann er Entscheidungen treffen, die widerspiegeln, wie dein Team tatsächlich entwickelt. Mit dem richtigen Kontext kann der Agent Ergebnisse liefern, die wirklich wie dein Produkt aussehen und wirken. So verbringst du weniger Zeit damit, generische oder nicht markenkonforme Designs zu korrigieren.
Ein Großteil dieses Kontexts steckt bereits in deinem Designsystem: von den Komponenten und Tokens, die der Agent verwenden soll, bis zu den dokumentierten Regeln und Beispielen, die zeigen, wie alles zusammenspielt. Die Herausforderung besteht darin, sicherzustellen, dass der Agent bei Bedarf auf all das zugreifen kann. So verschaffst du ihm das Gesamtbild.
Starte mit deiner maßgeblichen Quelle
Deine Designbibliothek enthält die grundlegendsten Bausteine, die der Agent braucht. Wenn du deine veröffentlichte Bibliothek mit dem Agenten verbindest, erhält er diese Grundlage. Sobald die Verbindung steht, kann der Agent erkennen, welche Assets dein Team freigegeben hat, und diese Komponenten und Tokens in seinen Ergebnissen verwenden.
Gib dem Figma-Agenten Zugriff auf deine Bibliothek: Öffne einen Agent-Chat, wähle im Prompt-Feld „Bibliotheken“ und dann die veröffentlichte Bibliothek aus, mit der du in diesem Projekt arbeiten möchtest.
Angenommen, dein Team arbeitet an einem neuen Checkout-Flow. Wenn du den Agenten bittest, eine Karte mit der Bestellübersicht zu erstellen, kann er auf die Komponenten und Variablen zurückgreifen, die bereits in deiner Bibliothek definiert sind. Er könnte etwa deine vorhandene Komponente Card/OrderSummary/Default, die freigegebene Schaltflächenvariante sowie deine Abstands- und Farbvariablen verwenden, um das Design zusammenzustellen, statt eine neue Karte mit eigenem Styling und eigener Struktur von Grund auf zu erstellen.
Wenn der Figma-Agent ein bestimmtes Asset in einem bestimmten Teil deines Produkts ändern soll, etwa eine Schaltfläche auf einem Screen ersetzen, kannst du die Komponente oder das Token, das er verwenden soll, per @-Erwähnung angeben.
Je klarer deine Bibliothek ihre Komponenten und deren Verhalten definiert, desto nützlicher ist sie für den Agenten. Das bedeutet: aussagekräftige Komponentennamen verwenden, Eigenschaften und Varianten definieren, Variablen anwenden und wiederverwendbare Muster erstellen, die zeigen, wie kleinere Teile zusammenpassen. Diese Details geben dem Agenten klarere Hinweise darauf, wofür ein Asset gedacht ist und wie es sich verhalten soll.
Halte Teamwissen in Richtlinien fest
Was gehört in Richtlinien?
→ Regeln, die der Figma-Agent konsequent befolgen soll
→ Ausnahmen von diesen Regeln
→ Fehler, die es zu vermeiden gilt, und was stattdessen zu tun ist
→ Wie man zwischen ähnlichen Komponenten, Varianten oder Mustern wählt
Sobald der Agent deine Bibliothek kennt, weiß er, welche Bausteine verfügbar sind. Manche Entscheidungen ergeben sich aber nicht direkt aus der Bibliothek, etwa wann bestimmte Komponenten verwendet werden sollen oder wann es Ausnahmen davon gibt. In Richtlinien hältst du dieses Wissen fest: Das sind schriftliche Anleitungsdateien, die an deine veröffentlichte Designbibliothek angehängt sind. Sie werden bei jedem Prompt mit aktivierter Bibliothek automatisch einbezogen und geben dem Agenten Vorgaben für neue Designs, ohne dass jemand sie jedes Mal wiederholen muss.
Richtlinien funktionieren am besten, wenn der Agent Designs von Grund auf neu erstellt. Wir arbeiten daran, dass er sie auch beim Bearbeiten bestehender Designs konsequenter anwendet.
Um Richtlinien hinzuzufügen, öffne deine Designbibliothek. Gehe von dort aus zu Bibliothek → Richtlinien verwalten, lade die Datei mit deinen Richtlinien hoch und klicke auf Änderungen übernehmen.
Angenommen, deine Bibliothek enthält primäre und sekundäre Schaltflächen, aber dein Team verwendet für den CTA „Bestellung aufgeben“ auf einem Checkout-Screen immer eine primäre Schaltfläche. Diese Regel kannst du in einer Richtlinie festhalten, damit der Agent weiß, welche er in dieser Situation wählen soll. Du kannst auch eine sekundäre Schaltfläche für Aktionen wie „Zurück“ festlegen, damit der Agent eine konkrete Regel hat, an die er sich halten kann. Diese Richtlinien bleiben an die Bibliothek angehängt, sodass dein Team diese Vorgaben wiederverwenden kann, wenn es mit dem Agenten neue Designs erstellt.
Zeig dem Figma-Agenten dein System in der Praxis
Kontextarten für den Figma-Agenten in Kürze:
Richtlinien sind feste Regeln dafür, wie dein Team deine Designbibliothek nutzt. Sie bleiben an die Bibliothek angehängt und gelten für alle neuen Arbeiten.
Bibliotheksbeispiele zeigen, wie dein Team Komponenten und Muster in der Praxis kombiniert.
Kontext hinzufügen gibt dem Figma-Agenten Referenzen, die für die aktuelle Aufgabe wichtig sind, etwa eine bestimmte Figma-Datei oder einen bestimmten Frame.
Skills halten einen wiederholbaren Prozess fest, dem der Figma-Agent folgen soll.
Dem Agenten ein Beispiel dafür zu geben, wie das Ergebnis aussehen soll, kann wirkungsvoller sein, als es per Prompt zu erklären. So wie du jemandem aus deinem Team einen bestehenden Checkout-Screen als Ausgangspunkt geben würdest, kannst du dem Agenten ein Design zum Anpassen geben.
Bei Examples und _example wird zwischen Groß- und Kleinschreibung unterschieden. Wende bei Komponentensets die Benennung oder Seitenplatzierung auf das übergeordnete Set an, nicht auf eine einzelne Variante. Ein Beispiel findest du im Material 3 Design Kit.
Um einem Prompt ein Design hinzuzufügen, klicke auf + → Figma-Dateien anhängen und wähle das passende Design aus oder füge es ein.
Für Muster, die der Agent in künftigen Arbeiten wiederverwenden soll, veröffentliche vollständige Designs als Komponenten auf einer Seite namens Examples oder hänge _example an ihre Namen an. Wenn das Beispiel nur für deine aktuelle Arbeit relevant und nicht unbedingt ein Muster ist, das du wiederholen wirst, füge es als Kontext zum aktuellen Prompt hinzu. Du kannst auch einen Frame oder ein Bild direkt in den Chat einfügen oder den Agenten bitten, einen Screenshot in ein bearbeitbares Design umzuwandeln.
Angenommen, du fügst dem Checkout-Flow ein Formular für die Lieferadresse hinzu. Deine Bibliothek stellt die Formularfelder und Kontrollkästchen bereit. Diese Komponenten allein vermitteln aber nicht, wie dein Team Lieferadressformulare aufbaut, etwa welche Felder in einer Zeile stehen oder wie optionale Felder wie Wohnungsnummern dargestellt werden. Ein Beispiel aus einem früheren Design kann zeigen, wie dein Team Felder gruppiert und mit Abständen umgeht. So hat der Agent einen Ausgangspunkt, den er für dieses Checkout-Erlebnis anpassen kann.
Mach wiederkehrende Anweisungen zu Skills
Um einen Skill zu erstellen, sag dem Figma-Agenten, was der Skill tun soll, und gib ihm die Schritte oder Anweisungen, die er befolgen soll. Anschließend kannst du dir den Skill in der Vorschau ansehen und ihn bearbeiten, auch direkt im Markdown-Editor.
Du kannst auch Skills aus der Figma Community verwenden oder deine eigenen mit anderen teilen.
Viele von uns wiederholen dieselben Prozesse immer wieder – etwa wenn sie Screens auf Barrierefreiheitsstandards prüfen oder regelmäßig kontrollieren, ob sie die aktuellsten Komponenten verwenden. Statt jedes Mal dieselben Anweisungen neu zu schreiben, kannst du diesen Prozess jetzt in einen Skill verwandeln, den der Agent wiederverwenden kann. Skills sind Anweisungssets, die du dem Agenten einmal beibringst und in jedem Chat mit einem Schrägstrich (/) auslösen kannst. Statt jedes Mal denselben Prompt neu zu schreiben oder denselben Prozess durchzugehen, kannst du einen Skill für dein Team oder deine Organisation veröffentlichen.
Ein Skill wie /design-system-audit könnte zum Beispiel ausgewählte Screens mit deinen Bibliotheken abgleichen und abgelöste Instanzen, hartkodierte Werte, falsch verwendete Komponenten und Lücken bei der Barrierefreiheit markieren. Ein Skill wie /analyze-components könnte deine Komponenten auf Duplikate, Benennungsfehler und Komponenten prüfen, die ihre Verbindung zur Bibliothek verloren haben. Beide können potenzielle Probleme melden und einen Lösungsweg empfehlen, den dein Team vom Agenten umsetzen lassen oder selbst angehen kann.
Lerne aus den Ergebnissen des Figma-Agenten
Bitte den Figma-Agenten, einen Fehler auf der Arbeitsfläche zu beheben, indem du ihm per Prompt sagst, was er ändern soll, oder die genaue Komponente bzw. das Token, das er verwenden soll, per @-Erwähnung angibst.
Wie immer, wenn du mit KI arbeitest, solltest du das Ergebnis trotzdem noch einmal prüfen. Wenn dir beim Überprüfen ein Problem auffällt, kannst du den Fehler mit dem Agenten sofort direkt auf der Arbeitsfläche korrigieren. Wenn du merkst, dass er immer wieder denselben Fehler macht, ist das ein Zeichen, dass du vielleicht deine Richtlinien aktualisieren, deine Designbibliothek überarbeiten oder ihm bessere Beispiele geben solltest.
Der Figma-Agent steht Benutzer*innen mit einer Full-Lizenz in den Professional-, Organization-, Enterprise- und einigen Bildungs-Abos zur Verfügung, im Starter-Abo ist er eingeschränkt verfügbar. 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.
