Der Design-Agent von Figma ist da


Ab heute kannst du mit einem für Figma entwickelten Agent arbeiten – direkt auf der Arbeitsfläche.
Der Design-Agent von Figma ist da teilen
Designer*innen brauchen speziell entwickelte Tools, die das Wesentliche abdecken: Erkundung, Experimentieren, Zusammenarbeit und Präzision. Figma wurde als kollaborative Arbeitsfläche entwickelt, um all das zu ermöglichen. Teams setzen zunehmend automatisierte Tools ein, um Produkte schneller zu entwickeln – doch dabei taucht ein falscher Dilemma auf: Geschwindigkeit oder Präzision? KI-Generierung oder direkte Bearbeitung? Du solltest dich nicht entscheiden müssen.
Anfang dieses Jahres haben wir die Figma-Arbeitsfläche für Drittanbieter-Agenten geöffnet, damit du das Wissen aus dem Designsystem in deine agentenbasierten Arbeitsabläufe einbringen kannst. Jetzt gehen wir noch einen Schritt weiter: Der Figma-Agent ist jetzt direkt auf der Arbeitsfläche und in der linken Seitenleiste verfügbar.
Deshalb haben wir den Figma-Agenten entwickelt. Unser Ziel war es, einen Assistenten zu entwickeln, der sich in Figma bestens auskennt und sich nahtlos in die Arbeitsweise von Teams einfügt. Das bedeutete, Figma selbst für ein Modell so verständlich zu machen, wie es mit Tools von Drittanbietern nicht möglich ist – mit umfassenden Informationen zu deinen Komponenten, Tokens, Standards und Best Practices.
Wie arbeiten der Agent von Figma und der MCP-Server zusammen?
Nutze den Figma-Agenten, wenn du auf der Arbeitsfläche arbeitest – er ist integriert und bietet zusätzliche Informationen zu deinem Designsystem. Verwende den MCP-Server und verwende Figma, um Code auf die Arbeitsfläche zu laden oder Entwürfe zurück in den Code zu übertragen.
Das Ergebnis ist ein spezieller Design-Agent, der direkt neben dir auf der Arbeitsfläche arbeitet – in derselben Datei wie dein Team – und dich so als echter Partner unterstützt. Es ist speziell auf die Bearbeitung von Figma-Dateien abgestimmt, sodass die Ergebnisse genau auf deinen Designkontext zugeschnitten sind und sich direkt bearbeiten lassen – so behältst du die volle Kontrolle. Im Gegensatz zum MCP-Server läuft der Agent direkt auf der Arbeitsfläche – ohne separate Einrichtung oder Kontextwechsel, sodass du ganz einfach:
- Starte einen Prompt von jeder beliebigen Design-Ebene aus
- Parallele Aufforderung, mehrere Ideen gleichzeitig durchzuspielen
- Nimm Änderungen vor und iteriere, während der Agent ebenfalls iteriert
Von der Erkundung neuer Wege über Massenbearbeitungen bis hin zur Umsetzung von Feedback – hier erfährst du, wie sich der Figma-Agent schon heute in deinen Design-Workflow einfügen kann.
Weitere Möglichkeiten entdecken
Die besten Entwürfe entstehen selten aus der ersten Idee – oder der ersten Vorgabe. Das Ausloten von Möglichkeiten, das Vergleichen von Ansätzen und das iterative Vorgehen sind bereits zentrale Bestandteile der Arbeitsweise von Designern. Unser Makler hilft dir dabei, in kürzerer Zeit mehr zu schaffen.
Wie lassen sich Figma Make und der Figma-Agent in deinen Workflow integrieren?
Du kannst in Figma Design gemeinsam mit unserem Agent Design-Ebenen erstellen, um die Intentionen in Bezug auf Abläufe, Zustände, Texte und Struktur zu verdeutlichen. Schick es dann an Make, um Code-Ebenen zu generieren, die das Verhalten verdeutlichen. Dann binde es wieder in Figma Design ein.
Oder fang in Figma Make an, kopiere Frames nach Figma Design, arbeite sie mit unserem Agenten weiter aus und sende sie zurück an Make.
Du kannst breit anlegen: Erarbeite schnell unterschiedliche stilistische Ansätze für dasselbe Problem und erkunde viele Richtungen gleichzeitig. Vergleiche verschiedene Checkout-Abläufe, die für unterschiedliche Geschäftsziele optimiert sind. Bitte den Agent um drei verschiedene Informationsarchitekturen.
Oder geh noch einen Schritt weiter: Wähle eine Richtung und bitte den Entwickler, diese weiterzuentwickeln, Implementierungen zu vergleichen und bestehende Entwürfe zu überdenken, ohne dabei dein Designsystem aus den Augen zu verlieren. Der Agent nutzt deine am häufigsten und zuletzt verwendeten Komponenten als Ausgangspunkt, aber du kannst die Ergebnisse auch selbst steuern, indem du eine bestimmte Bibliothek auswählst und bestimmte Tokens, Variablen und Komponenten mit @ erwähnst, um ihn genau auf das auszurichten, was du brauchst. Stell dir das als eine Art Schlüsselsatz für dein Designsystem vor.
Da KI die Erstellung von Designs vereinfacht, besteht die Gefahr, dass man etwas Mittelmäßiges auf den Markt bringt. Unser Agent wurde speziell dafür entwickelt, dir dabei zu helfen, verschiedene Möglichkeiten auszuloten, damit du die richtige auswählen kannst – und sobald du das getan hast, ist es oft schneller, natürlicher und effizienter, selbst Hand anzulegen, als sich durch Eingaben zum idealen Ergebnis vorzuarbeiten. Du kannst auch gemeinsam mit deinem Team im selben Arbeitsbereich entwickeln, ohne den Kontext aus den Augen zu verlieren.
Stile neu kombinieren und Bildschirme erstellen, die deine Designsysteme nutzen:
Zeitaufwändige Aufgaben automatisieren
Der Flow muss auf der Arbeitsfläche nicht aufhören:
Mit dem Figma MCP-Server kannst du zwischen Code und Figma hin- und herwechseln, ohne dass die Qualität darunter leidet. Beginne mit dem Code, importiere ihn mit unserer Code-to-Canvas-Funktion in Figma, um dein Designsystem weiterzuentwickeln oder anzuwenden, und sende ihn dann über den Figma-MCP-Server zurück – dabei bleibt alles synchronisiert. Unser Agent sorgt für einen reibungslosen Übergang und hilft dabei, die Dynamik aufrechtzuerhalten, wenn die Arbeit zwischen den Tools wechselt.
Wenn der Figma-Agent dir auf der Arbeitsfläche zur Seite steht, arbeitest du nicht nur schneller – du kannst auch ganz einfach zwischen KI-Unterstützung und manueller Bearbeitung wechseln. So lassen sich mühsame Aufgaben, die dennoch Kontext und Präzision erfordern, ganz einfach erledigen. Wäre es nicht toll, wenn du Variablen nicht manuell umbenennen müsstest, um die Konsistenz zu wahren, dieselbe Komponente nicht auf vielen verschiedenen Bildschirmen austauschen müsstest, eine Änderung der Abstände nicht im gesamten Ablauf wiederholen müsstest oder eine große Anzahl von Frames nicht mit realistischen Inhalten füllen müsstest? Genau dafür ist der Agent da. Er übernimmt die Aufgaben, die dich normalerweise ausbremsen, indem er Massenbearbeitungen automatisiert, Designsysteme anwendet und Designs in großem Umfang mit realistischen Inhalten füllt.
Chatte mit Figma, um die Typografie in einer Datei anzupassen, „Lorem ipsum“-Text und Bilder im Raster zu ersetzen, alle Chip-Komponenten in den aktiven Zustand zu versetzen oder deine Bildschirme in den Dunkelmodus umzustellen, ohne Füllfarben und Kontrast manuell anpassen zu müssen. Und wenn du ein Design-System pflegst, ist der Agent ein besonders leistungsstarker Verbündeter. Nutze ihn, um Beschreibungen, Tags und Anwendungsfälle bibliotheksübergreifend zu aktualisieren, Namenskonventionen zu vereinheitlichen, Komponenten mit all ihren Zuständen und Varianten zu dokumentieren und die Qualität zu steuern, indem du Beispiele für die Arbeit deines Teams teilst.
Führe präzise Massenbearbeitungen durch und dokumentiere dein Designsystem:
Mehr erreichen mit Feedback
Bei der Designarbeit sammeln sich Rückmeldungen an, die oft über Kommentare und Dateien verstreut sind: von Kritikpunkten und Reaktionen der Beteiligten bis hin zu offenen Fragen. Unser Agent hilft dir dabei, dieses Feedback sinnvoll umzusetzen.
Da dein gesamtes Team an derselben Datei arbeitet, kennt der Agent diesen Kontext bereits – wenn du ihn also bittest, das Feedback durchzugehen, fühlt sich das weniger so an, als würdest du einen neuen Mitarbeiter einweisen, sondern eher so, als würdest du laut mit jemandem nachdenken, der bereits im Raum ist.
Bitte Figma, das Feedback zusammenzufassen, Themen zu identifizieren und die Rückmeldungen in konkrete nächste Schritte umzusetzen. Du kannst es auch nutzen, um Entwürfe aus verschiedenen Blickwinkeln auf Herz und Nieren zu prüfen. Fragst du dich, wie ein auf Umsatz ausgerichteter VP reagieren wird? Unser Agent kann diese Perspektive modellieren. Arbeitest du dich gerade durch einen langen Kommentar-Thread? Der Agent kann das Hin und Her in einen umsetzbaren Plan umwandeln. Möchtest du vor einer Kritik laut nachdenken? Nutze unseren Agent, um deine Strategie zu verfeinern, bevor du sie deinem Team vorstellst.
Feedback in Echtzeit erhalten, strukturieren und umsetzen:
Der Figma-Agent ist genau dort integriert, wo die Arbeit bereits stattfindet. Es gibt keinen Wechsel zwischen verschiedenen Modi, keinen Kontextwechsel und keine Einarbeitungszeit. Du bleibst in Figma und dein Team ist immer auf dem Laufenden. Wir haben das hier mit einem Ziel entwickelt: dir dabei zu helfen, schneller zu arbeiten, ohne dabei Abstriche bei Qualität und Handwerkskunst zu machen.
In den kommenden Monaten werden wir uns darauf konzentrieren, die Unterstützung für Design-Systeme zu verbessern, die Benutzererfahrung zu optimieren, die Suchfunktionen des Agenten für deine Dateien zu erweitern und neue Anpassungsmöglichkeiten hinzuzufügen. Wir fangen gerade erst an.
Der Figma-Agent wird in den kommenden Wochen schrittweise in der Beta-Version eingeführt. Während der Beta-Version wird der Agent keine Credits verbrauchen. KI-Credit werden bei allgemeiner Verfügbarkeit angerechnet. Melde dich hier an, um einen frühen Zugang zu beantragen. Wenn Sie berechtigt und für die Beta-Version ausgewählt sind, senden wir Ihnen eine E-Mail, sobald Sie dabei sind. Der Beitritt zur Liste garantiert keinen Zugang. Der Agent wird für Full-Lizenz-Nutzer auf den Professional-, Organization- und Enterprise-Abos verfügbar sein. Collab- und Dev-Lizenzen können den Agenten in Entwürfen verwenden. Starter-, Bildungs- und Regierungs-Abos sind nicht enthalten. Weitere Informationen erhältst du in unserem Hilfe-Center.




