Zu Hauptinhalten gehen

Figma Design-Agent, jetzt mit benutzerdefinierten Tools und mehr Kontext

Georgia RustManager of Product Management, Figma
Rodrigo DaviesProduct Manager, Figma
Mockup einer mobilen Design-Arbeitsfläche in Figma, umgeben von KI-generierten Prompts. Ein Plakat mit dem Titel „MODULAR LIVING“ von Camille Vosk ist auf der Arbeitsfläche ausgewählt, während blaue Statusblasen Nachrichten wie „QR-Code-Plugin wird erstellt“, „Code-Ebene wird generiert“, „Benutzerdefinierter Shader wird erstellt“ und „Farbkontrast wird überprüft“ anzeigen und dabei KI-gestützte Design-Workflows illustrieren.Mockup einer mobilen Design-Arbeitsfläche in Figma, umgeben von KI-generierten Prompts. Ein Plakat mit dem Titel „MODULAR LIVING“ von Camille Vosk ist auf der Arbeitsfläche ausgewählt, während blaue Statusblasen Nachrichten wie „QR-Code-Plugin wird erstellt“, „Code-Ebene wird generiert“, „Benutzerdefinierter Shader wird erstellt“ und „Farbkontrast wird überprüft“ anzeigen und dabei KI-gestützte Design-Workflows illustrieren.

Prompts sind der erste Schritt. Dank benutzerdefinierten Tools, realem Kontext und Skills entspricht das Ergebnis des Design-Agenten deinen Erwartungen.

Figma Design-Agent, jetzt mit benutzerdefinierten Tools und mehr Kontext teilen

Entdecke unsere Testumgebungsdateien für den Agenten und die benutzerdefinierten Tools.

Kontext macht aus einem Agenten, der dir beim effizienteren Arbeiten hilft, einen Agenten, der tatsächlich versteht, wie du arbeitest. Wenn ein Agent die Arbeitsweise deines Teams kennt, produziert er nicht nur Ergebnisse, sondern arbeitet mit deinem Team zusammen.

Diese Zusammenarbeit wird auf der Figma-Arbeitsfläche selbst interessant, auf der du Tools, Effekte und Erlebnisse erstellen kannst, die vorher nicht möglich gewesen wären. Der Design-Agent von Figma

Der Design-Agent von Figma ist da

Ab heute kannst du mit einem für Figma entwickelten Agent arbeiten – direkt auf der Arbeitsfläche.

steht jetzt in der offenen Beta-Phase mehr Nutzer*innen zur Verfügung und bietet mehr Flexibilität, Präzision und kreative Möglichkeiten bei deiner Arbeit.

Deine eigenen Tools entwickeln

Kunden-Kurzinfo: Edward Chechique

Die generativen Plugins des Produktdesigners Edward Chechiques importieren HTML in die Arbeitsfläche, erstellen Dashboard-Layouts und visualisieren Daten. Ohne die Plugins führte die Erstellung häufig zu Frust. „Ich musste das Entwicklungsteam um einen Gefallen bitten, und das Team hatte möglicherweise keine Zeit, mir zu helfen“, sagt Edward. „Später halfen mir KI-Tools, aber ich musste immer noch zwischen verschiedenen Tools und Workflows wechseln. Mit dem Agenten in Figma ist es jetzt viel schneller und einfacher möglich, weil ich einfach direkt nach dem fragen kann, was ich will. Vorher hatte ich null Möglichkeiten, heute habe ich hervorragende Möglichkeiten.“

Jeder arbeitet anders. Designtools nutzen jedoch häufig einen universellen Ansatz, und Layouts, Texturen und Effekte werden durch das bestimmt, was in deinem Designtool nativ unterstützt wird. Ab heute kannst du deine Tools genauso anpassen wie deine Designs. Das schafft mehr Raum für visuelle Experimente und das Teilen deiner Entwürfe mit deinem Team.

Generative Plugins

Ein Plugin erweitert die Möglichkeiten auf der Figma-Arbeitsfläche. Die Erstellung eines solchen Plugins erforderte bisher aber immer technische Kenntnisse und eine Entwicklungsumgebung, die vielen Designer*innen nicht zur Verfügung steht. Jetzt kannst du den Design-Agenten auffordern, wiederverwendbare Plugins zu erstellen.

Da diese generativen Plugins PropsKit verwenden, wirken sie wie native Figma-Elemente. Und da sie auf der Arbeitsfläche ausgeführt werden, erhältst du bei Iterationen mehr direkte Kontrollmöglichkeiten. Für alles, was außerhalb von Figma Design liegt (z. B. KI-Dienste oder Drittanbieter-APIs) verwendest du weiterhin klassische Plugins.

Ein Plugin zum Erstellen von Bild-Layouts hilft dir beim Organisieren von Assets.
Der Agent hat mir Möglichkeiten zur Problembehebung vorgeschlagen. Das fühlte sich wie Zauberei an, weil ich das Gefühl hatte, dass mir ein*e Entwickler*in helfen möchte.
Edward Chechique, Produktdesigner

Shader-Effekte und -Füllungen

Kunden-Kurzinfo: Anna Zhang

Die Creative Technologistin Anna Zhang baute ihre eigenen Shader, um ihre eigenen Fotografien mit Collage-, Marmorierungs-, Lichtleck-, Metallprägungs- und Prismeneffekten neu zu mischen. „Damit kann ich das, was ich in der Vergangenheit getan habe, verstärken und wiederverwendbare Workflows erstellen“, sagt sie. „Dabei habe ich von einem einzigen Ausgangspunkt aus einzigartige Ausdrückmöglichkeiten.“

Anna konzentrierte sich auf die Funktionalität, während der Agent die UI verwaltete: „Es war ein Dialog zwischen mir und dem Agenten – und die Ausgaben beeinflussten die Parameter, die ich später hinzugefügt habe. Es war wie eine Verhandlung."

Der Agent kann auch Shader erstellen. Diese kleinen, anpassbaren Programme werden von WebGPU

Figma rendering: Powered by WebGPU

We’ve updated our renderer to use WebGPU, unlocking new performance optimization opportunities. Here’s how we did it.

betrieben und definieren, wie Pixel gerendert werden. Denke dabei an Rasterung, flüssiges Metall und Fraktalrauschen. Du hast die Wahl zwischen zwei Arten von Shadern:

  • Shader-Effekte sind wie native Figma-Effekte. Sie werden jedoch vollständig von dir erstellt, zum Beispiel Partikelverzerrung, Linsenverzerrung, Farbumrisse und mehr. Du kannst diese Effekte kombinieren, die Eigenschaften anpassen und sie mit nativen Effekten koppeln, um das gewünschte Ergebnis zu erzielen.

Die Verwendung von Plugins oder Shadern ist immer kostenlos und in allen Abos verfügbar. Du kannst sowohl selbst erstellte als auch von Teammitgliedern geteilte und in der Community gefundene Plugins und Shader nutzen. Für Agenten-Prompts zum Erstellen von Plugins oder Shadern benötigst du Zugang zum Figma Design-Agenten. Sobald diese Funktion allgemein verfügbar ist, wird sie KI-Credits kosten.

  • Shader-Füllungen sind dynamisch sowie generativ und gehen weit über einfarbige Farben und Farbverläufe hinaus. Sie umfassen zum Beispiel Aquarell, Moiré, Musterraster und mehr.
Figma-Benutzeroberfläche mit einem „Shader-Füllungen“-Bibliothekspanel neben einer grafischen Komposition aus schwarzer Typografie und orange-grauen Halbtönen. Das Panel zeigt benutzerdefinierte Shader-Voreinstellungen wie Dither Wavering, Fluid Halftone, Teilchen-Web und Magnetfeld und einen Cursor, der eine Voreinstellung auswählt.Figma-Benutzeroberfläche mit einem „Shader-Füllungen“-Bibliothekspanel neben einer grafischen Komposition aus schwarzer Typografie und orange-grauen Halbtönen. Das Panel zeigt benutzerdefinierte Shader-Voreinstellungen wie Dither Wavering, Fluid Halftone, Teilchen-Web und Magnetfeld und einen Cursor, der eine Voreinstellung auswählt.
Spiele mit Shader-Füllungen wie Dithering Waves, Fluid Halftone, Teilchen-Web und Magnetfeld.

Shader und generative Plugins befinden sich in einem neuen Tools-Tab neben klassischen Plugins, Weave-Tools

Three-panel product graphic demonstrating AI-powered style transfer. On the left, a "Transfer style" interface displays a target image of people carrying skateboards and a blurred portrait used as the style source. In the center, a workflow canvas labeled "Spring Campaign" shows a connected post-generation node producing a floral-themed social media graphic titled "Spring Arrivals." On the right, a gallery-style layout displays generated creative assets, including an illustrated handshake artwork and merchandise design cards, showing how transferred styles can be applied across a campaign.Three-panel product graphic demonstrating AI-powered style transfer. On the left, a "Transfer style" interface displays a target image of people carrying skateboards and a blurred portrait used as the style source. In the center, a workflow canvas labeled "Spring Campaign" shows a connected post-generation node producing a floral-themed social media graphic titled "Spring Arrivals." On the right, a gallery-style layout displays generated creative assets, including an illustrated handshake artwork and merchandise design cards, showing how transferred styles can be applied across a campaign.

Connecting Figma and Weave

Today, we’re announcing new ways your Weave creative workflows can live alongside your Figma frames.

und Widgets. Figma bietet über 30 Plugins und Shader, um dir den Einstieg zu erleichtern. Am nützlichsten sind aber die, die du selbst erstellst.

Wenn du mit dem Design-Agenten erstellst, entscheidest du, welche Art von Shader erstellt und welche Eigenschaften geändert werden sollen. Der Agent verwendet deine Vorgaben für die Erstellung. Doch die Möglichkeiten des Agenten auf der Arbeitsfläche sind nur so gut wie das, was er als Ausgangsmaterial erhält.

Das Figma-Plugin-Panel „Halbton”, das über einem abstrakten rot-weiß gestreiften Kunstwerk angezeigt wird. Das Panel zeigt Steuerungen für Mustertyp, Skalierung, Schwellenwert und Farbe, während ein Cursor einen Schieberegler anpasst, um einen Rauschen-basierten Halbton-Effekt in Echtzeit zu modifizieren.Das Figma-Plugin-Panel „Halbton”, das über einem abstrakten rot-weiß gestreiften Kunstwerk angezeigt wird. Das Panel zeigt Steuerungen für Mustertyp, Skalierung, Schwellenwert und Farbe, während ein Cursor einen Schieberegler anpasst, um einen Rauschen-basierten Halbton-Effekt in Echtzeit zu modifizieren.
Passe die Steuerungselemente für deine Shader-Effekte und Füllungen an.
Abstraktes Bild, das mit gestapelten Shader-Effekten in Figma bearbeitet wird. Lebendige orange, lila, rote und weiße Texturen füllen die Arbeitsfläche, während die schwebenden Steuerelemente „Riso-Druck“, „Partikelraster“ und „Farbverlaufskarte“ mehrschichtige visuelle Effekte und kreative Bildbearbeitung demonstrieren.Abstraktes Bild, das mit gestapelten Shader-Effekten in Figma bearbeitet wird. Lebendige orange, lila, rote und weiße Texturen füllen die Arbeitsfläche, während die schwebenden Steuerelemente „Riso-Druck“, „Partikelraster“ und „Farbverlaufskarte“ mehrschichtige visuelle Effekte und kreative Bildbearbeitung demonstrieren.
Ebeneneffekte, damit du die gewünschten Ergebnisse erzielen kannst.
Wenn du eigene Tools erstellen kannst, hast du die Kontrolle. Und jeder hat eigene Vorstellungen davon, was möglich sein sollte.
Anna Zhang, Creative Technologistin

Mehr Kontext bei jeder Konversation

Guter Kontext liefert nicht nur Informationen für den Agenten, sondern hat auch Auswirkungen auf das Ergebnis. Je näher der Agent an deinem Projekt, deiner Marke und deinen Arbeitsweisen ist, desto genauer wird die Ausgabe sein.

  • Dateien direkt anhängen: Ziehe Dateien wie Nutzerbefragungen, UX-Copy-Dokumente oder Datenberichte in den Agenten-Chat. Der Agent verwendet sie während der gesamten Konversation als Referenz, damit die Ausgabe den Kontext und die Ausrichtung deines Projekts widerspiegelt.
  • Auf andere Figma-Dateien verweisen: Wenn du einen Figma-Datei-Link einfügst, erhält der Agent die vollständige Struktur (d. h. Komponenten, Token, Layout und Stile) und kann Designmuster verstehen und reproduzieren, statt sich an einem flachen Bild orientieren zu müssen.
  • Web durchsuchen: Der Agent kann Live-Daten abrufen, ohne Figma zu verlassen, zum Beispiel echte Restaurantnamen und Fotos für ein Listing, aktuelle UX-Muster von Wettbewerbern und aktuelle Inhalte für realistische Mockups.
  • Deine Tools verbinden: MCP-Verbinder bringen Kontext von GitHub, Atlassian, Slack und anderen Tools direkt in den Agenten und können Updates zurückposten. Ziehe Produkttickets von Linear für Informationen zu einem Design oder referenziere Daten von Hex, ohne sie kopieren und einfügen zu müssen.
Design-Arbeitsfläche, die eine dunkel gestaltete Benutzeroberfläche mit einem Museums-Plan neben einer KI-Prompt-Karte anzeigt. Die Karte verweist auf eine angehängte CSV-Datei mit dem Namen „exhibits.csv“ und enthält die Anweisung: „Erstelle eine dynamische Karte für die Museumsausstellungen unter Verwendung des angehängten Stils und der Daten“, was die KI-gestützte Erstellung auf Basis strukturierter Daten demonstriert.Design-Arbeitsfläche, die eine dunkel gestaltete Benutzeroberfläche mit einem Museums-Plan neben einer KI-Prompt-Karte anzeigt. Die Karte verweist auf eine angehängte CSV-Datei mit dem Namen „exhibits.csv“ und enthält die Anweisung: „Erstelle eine dynamische Karte für die Museumsausstellungen unter Verwendung des angehängten Stils und der Daten“, was die KI-gestützte Erstellung auf Basis strukturierter Daten demonstriert.
Hänge Dateien direkt im Agenten-Chat an.
Figma-Benutzeroberfläche mit dem erweiterten Verbinder-Menü. Optionen umfassen Atlassian, Dovetail, GitHub, Granola, Hex, Notion und Slack, wobei Notion hervorgehoben ist, was den Zugang zu verbundenen externen Tools und Wissensquellen veranschaulicht.Figma-Benutzeroberfläche mit dem erweiterten Verbinder-Menü. Optionen umfassen Atlassian, Dovetail, GitHub, Granola, Hex, Notion und Slack, wobei Notion hervorgehoben ist, was den Zugang zu verbundenen externen Tools und Wissensquellen veranschaulicht.
Bringe Kontext aus externen Tools in den Agenten ein.

Deine Sichtweise skalieren

Gute Prompts vermitteln eine Sichtweise. Mit Skills kannst du diese Überlegungen speichern, mit deinem Team teilen und deine Kreativität auch jenseits deiner eigenen Dateien in die Tat umsetzen.

  • Benutzerdefinierte Skills erstellen:Skills wandeln Prompts, die du immer wieder verwendest, in wiederverwendbare Slash-Befehle um, damit du schnell bestimmte ästhetische Stile anwenden, Designs überprüfen oder bewährte Schritte automatisieren kannst.
  • Skills für dein Team veröffentlichen: Teile einen Skill, damit dein gesamtes Team deinen Ansatz nutzen kann – sei es eine Designphilosophie, eine charakteristische Ästhetik oder eine Feedback-Perspektive. So haben alle Teammitglieder die Möglichkeit, diesen Ansatz zu implementieren, daraus zu lernen und darauf aufzubauen.
  • Prompts deiner Mitarbeiter*innen sehen: Der Iterationsverlauf ist nicht nur ein Log, sondern ein Fenster in die Denkweise einer Person. Konversationen mit Agenten sind standardmäßig für alle sichtbar, die an deiner Datei mitarbeiten. So wird der Prozess zu einer gemeinsamen Ressource. Du kannst Prompts bei Bedarf als privat festlegen.
Das Menü „Skills und Befehle“ wird in einer Chat-Benutzeroberfläche angezeigt. Ein benutzerdefinierter Befehl „/Kontrastverbesserungen“ wird ausgewählt und zeigt eine Beschreibung über das Ersetzen von Farbkontrasten mit geringem Kontrast durch barrierefreie Alternativen, die den WCAG-Standards entsprechen. Ein Prompt darunter fordert dazu auf, alle Designs mit dem ausgewählten Skill zu überprüfen.Das Menü „Skills und Befehle“ wird in einer Chat-Benutzeroberfläche angezeigt. Ein benutzerdefinierter Befehl „/Kontrastverbesserungen“ wird ausgewählt und zeigt eine Beschreibung über das Ersetzen von Farbkontrasten mit geringem Kontrast durch barrierefreie Alternativen, die den WCAG-Standards entsprechen. Ein Prompt darunter fordert dazu auf, alle Designs mit dem ausgewählten Skill zu überprüfen.
Erstelle und teile benutzerdefinierte Skills, die wiederholbare Workflows in Ein-Klick-Befehle umwandeln.

Der schönste Moment für Designer*innen ist der Moment, wenn die eigene Idee auf dem Bildschirm erscheint. Heute hast du mehr Möglichkeiten, deine Ideen zum Leben zu erwecken. Dein Code, deine Plugins, deine Shader, dein Kontext – alles auf der Figma-Arbeitsfläche. Der Design-Agent von Figma macht genau das möglich.

Der Design-Agent von Figma ist als offene Beta-Version für Nutzer*innen mit Full-Lizenz in Professional-, Organization- und Enterprise-Abos verfügbar. Nutzer*innen mit Collab-, Dev- und View-Lizenzen können den Agenten in ihren Entwürfen verwenden. Der Agent ist in der Beta-Version kostenlos nutzbar. Experimentiere mit dem Agent in der Testumgebungsdatei oder lerne praktische Möglichkeiten kennen, wie du KI in deinen Design-Workflow integrieren kannst. Mehr über den Figma-Agenten und generative Plugins und Shader erfährst du in unserem Hilfe-Center.

Collage-artige Produktgrafik, die KI-unterstützte Design- und Entwicklungs-Workflows zeigt, mit Prompts zur Plugin-Erstellung, Steuerelementen für visuelle Effekte, Codegenerierungstools und interaktiven UI-Komponenten, die auf einem kreativen Workspace angeordnet sind.Collage-artige Produktgrafik, die KI-unterstützte Design- und Entwicklungs-Workflows zeigt, mit Prompts zur Plugin-Erstellung, Steuerelementen für visuelle Effekte, Codegenerierungstools und interaktiven UI-Komponenten, die auf einem kreativen Workspace angeordnet sind.

Lies den Rückblick auf Config von Figma-CEO und Mitbegründer Dylan Field.

Verwandte Artikel

Mit Figma kreativ sein und zusammenarbeiten

Kostenlos loslegen