Einordnung im Figma-KI-Ökosystem
Mit dem AI Agent erweitert Figma sein KI-Angebot um eine weitere Anwendung. Neben dem Agenten gibt es bereits Figma Make und den Figma MCP Server, die jedoch unterschiedliche Ziele verfolgen.
Mit Figma Make lassen sich aus Prompts oder bestehenden Entwürfen interaktive Prototypen und funktionale Oberflächen erstellen. Der Fokus liegt darauf, Ideen schnell in klickbare Konzepte oder erste Anwendungen zu überführen.
Der Figma MCP Server ermöglicht externen KI-Systemen wie Claude den Zugriff auf Informationen aus Figma-Dateien. Dadurch können Designs innerhalb von KI-gestützten Workflows analysiert, beschrieben oder für weitere Aufgaben genutzt werden.
Der Figma AI Agent richtet sich dagegen direkt an die Arbeit innerhalb bestehender Dateien. Er kann Designs generieren und weiterentwickeln, zeigt seine Stärke aber vor allem bei der Organisation von Designsystemen, der Pflege von Komponenten und anderen wiederkehrenden Aufgaben im Designalltag. Darüber hinaus unterstützt er beispielsweise bei Design-Reviews oder der Erstellung ähnlicher Varianten auf Basis bestehender Entwürfe.
Anwendungsbeispiele
Für die folgenden Tests wurden die Prompts bewusst auf Englisch formuliert. Figma empfiehlt aktuell selbst die Nutzung englischer Prompts, da die zugrunde liegenden Modelle primär auf englischsprachige Anfragen trainiert wurden und dadurch die zuverlässigsten Ergebnisse liefern.
Designsysteme organisieren und vereinheitlichen
Komponenten konsistent benennen
Wer schon einmal in einem gewachsenen Designsystem gearbeitet hat, kennt das Problem: Komponenten werden von unterschiedlichen Personen angelegt, erweitert und gepflegt. Entsprechend uneinheitlich fallen oft auch die Benennungen aus.
Abbildung 1: Inkonsistente Benennung von Button-Komponenten
Prompt:
Rename all button components using a consistent naming convention. Use the format: Button / Type / State / Size
Abbildung 2: Vereinheitlichte Benennung durch den AI Agent
Die Umbenennung gelang im Test ohne sichtbare Fehler. Obwohl die Komponenten bewusst uneinheitlich benannt waren, erkannte der Agent die unterschiedlichen Button-Typen, Größen und Zustände und überführte die Benennungen in ein konsistentes Schema. Dabei half vermutlich auch, dass die zugrunde liegende Struktur des Button-Systems bereits klar erkennbar war.
Komponenten strukturieren und Properties anlegen
Strukturierte Component Sets erleichtern die Arbeit mit Designsystemen erheblich. Statt zahlreiche einzelne Komponenten zu verwalten, können Varianten über Properties wie Typ, Größe oder Zustand organisiert werden.
Prompt:
Organize these button components into a component set with properties for Type, State and Size.
Abbildung 3: Automatisch strukturierte Button-Varianten mit Properties
Überzeugend war vor allem, wie zuverlässig dieser Schritt funktionierte. Der Agent erkannte die vorhandenen Eigenschaften der Komponenten und legte daraus die passenden Properties an. Aus einer Sammlung einzelner Komponenten entstand so innerhalb weniger Sekunden ein strukturiertes Component Set mit klar definierten Varianten. Gerade weil die nachträgliche Strukturierung bestehender Komponenten normalerweise mit viel manueller Arbeit verbunden ist, gehört dieses Beispiel zu den überzeugendsten Ergebnissen im Praxistest.
Designsysteme pflegen und dokumentieren
Neben organisatorischen Aufgaben kann der AI Agent auch bei der Pflege von Designsystemen unterstützen.
Prompt:
Set the border radius of all button components to the variable "cornerRadiusM".
Für dieses Beispiel sollte eine bestehende Border-Radius-Variable auf alle Button-Komponenten angewendet werden. Statt jede Komponente einzeln anzupassen, übernahm der Agent die Änderung direkt für alle ausgewählten Elemente. Gerade bei größeren Designsystemen mit vielen Varianten kann das spürbar Zeit sparen.
Auch die Dokumentation von Komponenten gehört zu den Aufgaben, die im Projektalltag häufig liegen bleiben, obwohl sie für die langfristige Wartbarkeit eines Designsystems wichtig ist.
Prompt:
Create documentation for this button component set.
Abbildung 4: Generierte Dokumentation für das Button-Komponentensystem
Der Agent analysierte das entstandene Button-System und generierte Beschreibungen für die verschiedenen Varianten. Für die vergleichsweise einfachen Button-Komponenten funktionierte das bereits erstaunlich gut und die Eigenschaften wurden korrekt erkannt. Wie hilfreich die Funktion im Alltag tatsächlich ist, wird sich aber vor allem bei komplexeren Komponenten zeigen. Entscheidend ist dabei nicht nur die inhaltliche Qualität der Beschreibungen, sondern auch, wie gut sich diese in bestehende Dokumentationsstrukturen und Designsysteme integrieren lassen.
Platzhalter mit passenden Inhalten füllen
Inhalte und Bilder für Mockups generieren
Leere Platzhalter gehören zu vielen frühen Mockups dazu. Gleichzeitig wirken Entwürfe mit realistischen Inhalten für Stakeholder und Teams oft deutlich greifbarer.
Für dieses Beispiel wurden mehrere Destination Cards mit Platzhaltern angelegt und der Agent zunächst gebeten, passende Beschreibungstexte für Backpacker zu erstellen.
Prompt:
Create a two-sentence travel description for each destination card in german that fits inside the cards. The content should target backpackers and young travelers. Keep the descriptions concise and suitable for travel destination cards.
Anschließend wurden die Bildplatzhalter automatisch mit passenden Bildern gefüllt.
Prompt:
Fill all image placeholders with matching travel photography based on the destination and card content.
Abbildung 5: Leere Komponenten im Vergleich zu automatisch befüllten Travel Cards
Praktisch war dabei, dass Texte und Bilder direkt innerhalb von Figma erstellt wurden. Statt zwischen verschiedenen Tools zu wechseln, konnten die Platzhalter direkt im bestehenden Design befüllt werden. Dabei berücksichtigte der Agent beispielsweise die verfügbare Textlänge, die Inhalte der Karten und das jeweilige Reiseziel. Die Ergebnisse passten grundsätzlich zum jeweiligen Kontext und machten die Mockups deutlich greifbarer. Sowohl die Texte als auch die Bildauswahl orientierten sich erkennbar an der definierten Zielgruppe. Für finale Inhalte reichte die Qualität jedoch meist noch nicht aus: Die Texte wirkten teilweise generisch und erinnerten stellenweise an klassische Marketingtexte, während die Bilder oft eher den Charakter von Beispiel- oder Stockfotos hatten. Für erste Mockups, Prototypen und Konzeptphasen liefert der Agent dennoch einen guten Ausgangspunkt und kann die Erstellung von Beispielinhalten deutlich beschleunigen.
Inhalte für eine andere Zielgruppe anpassen
Inhalte müssen im Designprozess häufig an unterschiedliche Zielgruppen angepasst werden. Was für Backpacker attraktiv ist, spricht Luxusreisende oft nur bedingt an.
Prompt:
Rewrite the destination card content for a luxury travel audience. Focus on exclusive experiences, premium accommodations and comfort. Keep the destinations, structure and length of the existing content. Also adjust the images accordingly.
Abbildung 6: Anpassung des Contents für unterschiedliche Zielgruppen
Besonders spannend war bei diesem Beispiel, dass der Agent die bestehenden Inhalte nicht einfach neu formulierte. Statt Abenteuer und günstigen Unterkünften standen plötzlich exklusive Erlebnisse, hochwertige Hotels und Komfort im Mittelpunkt. Gleichzeitig blieben Struktur, Umfang und die grundlegende Aussage der einzelnen Karten erhalten. Auch die Bildauswahl wurde an die neue Zielgruppe angepasst. Innerhalb weniger Sekunden entstand so aus einer Backpacker-Reiseübersicht eine Version für Luxusreisende, ohne dass Inhalte oder Bilder manuell ausgetauscht werden mussten.
Fazit
Nach den ersten Versuchen mit dem Figma AI Agent war vor allem überraschend, wie zuverlässig viele Aufgaben bereits funktionieren. Gerade bei der Arbeit mit Designsystemen wurde schnell deutlich, wie viel Zeit sich dadurch sparen lässt.
Besonders überzeugend waren daher die Funktionen rund um die Organisation und Pflege von Designsystemen. Das Umbenennen von Komponenten, das Erkennen von Eigenschaften oder das Anwenden von Änderungen auf mehrere Elemente gleichzeitig funktionierten bereits erstaunlich gut und sparten spürbar Zeit.
Bei generativen Aufgaben zeigte sich ein gemischteres Bild. Sowohl die erzeugten Texte als auch die Bildvorschläge passten grundsätzlich zum jeweiligen Kontext und halfen dabei, Mockups schnell mit Inhalten zu füllen. Gleichzeitig wirkten die Ergebnisse häufig noch generisch und erforderten Nacharbeit.
Wie bei anderen KI-Systemen hängt auch beim Figma AI Agent vieles von der Formulierung des Prompts ab. Je präziser die Anweisungen sind, desto zuverlässiger fallen die Ergebnisse aus. Das wird spätestens dann relevant, wenn einzelne Aktionen AI Credits verbrauchen (Stand Juni 2026). Gleichzeitig zeigte sich, dass der Agent nicht immer auf Anhieb zum gewünschten Ergebnis kommt und einzelne Aktionen teilweise deutlich Zeit benötigen. Außerdem wurde im Test deutlich, dass der Funktionsumfang des Agents weit über die hier gezeigten Beispiele hinausgeht. Mit zunehmender Nutzung entdeckt man immer wieder neue Anwendungsfälle, die sich oft erst im konkreten Designprozess ergeben. Da sich Änderungen jedoch jederzeit rückgängig machen lassen, bleibt das Ausprobieren vergleichsweise risikofrei.
Der größte Mehrwert liegt aktuell darin, wiederkehrende und organisatorische Aufgaben zu beschleunigen. Dadurch bleibt mehr Zeit für die eigentlichen UX-Fragestellungen: Nutzerbedürfnisse verstehen, Konzepte entwickeln und fundierte Designentscheidungen treffen – also genau die Bereiche, in denen die Expertise von Designerinnen und Designern den größten Unterschied macht.
Weitere Artikel aus unserem Blog
