Hinter den Kulissen: Generative Plugins und Shader in Figma

Wir haben generative Plugins und Shader in die Arbeitsfläche gebracht, weil wir dir die Möglichkeit bieten wollten, nach Bedarf die Tools zu designen, die du brauchst – ob zur Erzeugung von Layouts oder zum Hinzufügen von Linsenverzerrungen. Seit der Config 2026 arbeiten wir intensiv an diesen Fähigkeiten und freuen wir uns, sie jetzt vorstellen zu dürfen:

• Veröffentlichung in der Community und intern: Mit einem Organization- oder Enterprise-Abo kannst du die Plugins und Shader, die du mit dem Figma Design-Agenten erstellt hast, in der Figma-Community oder privat für die Mitglieder deiner Organisation veröffentlichen.
• Animierte und interaktive Shader: Der Agent kann jetzt Bewegung und Interaktivität in jeden Effekt integrieren, den du beschreibst.
• Zugriff auf den Code: Du kannst den Code ansehen und herunterladen, der hinter jedem Shader oder Plugin steckt, und nach Wunsch mit einem Drittanbieter-Agenten bearbeiten.
• MCP-Updates: Verwende den Figma MCP-Server, um generative Plugins und Shader mit deinem Agenten anzusehen und zu ändern, oder exportiere die Shader an einen Agenten, der sie präzise in React-Code implementiert.

Diese Updates bilden die moderne Entwicklungsarbeit in einem Mikrokosmos ab: Zusammenarbeit mit KI, fließender Wechsel zwischen Design und Code, gemeinsame Arbeit auf der Arbeitsfläche. Ich möchte die Geschichte hinter der Entwicklung unserer generativen Plugins und Shaders erzählen, denn die Realisierung dieser Vision sagt viel über über den aktuellen Zustand des Designs aus. Hie erfährst du, wie wir die Idee zum Leben erweckt, das richtige Team zusammengebracht und etwas erschaffen haben, das größer ist als alles, was wir alleine hätte erreichen können.

Vibe-Coding mit Vision

Ich war jahrelang besessen davon, die Power von Shadern in Figma zu realisieren. Aber erst seit Kurzem kann ich dank der KI-Sprachmodelle meine Vision zeigen (und nicht nur „erzählen“). Für den Anfang habe ich ein WebGPU-Umfeld programmiert, das sich wie Figma verhält, wo du Shader-Effekte auf jede Ebene der Arbeitsfläche anwenden kannst, darunter Vektoren, 3D-Ebenen und sogar Partikelsysteme. Dabei habe ich mich auf drei wesentliche Dinge konzentriert:

• Composability, um mit der Ausgabe eines Shaders den nächsten zu füttern
• Editor-Ergonomie, damit das Design mithilfe von dynamisch generierten Steuerelementen erlebbar wird, was mit einfachem Prompting nicht möglich wäre
• Agentische Kreation, sodass die KI Steuerelemente vorschlagen kann, die wir dann weiterentwickeln können

Es hatte uns zwar Monate gekostet, die progressive Weichzeichnung in Figma Draw zu entwickeln, aber jetzt konnte ich denselben Shader-Effekt mit einem einzigen Prompt erstellen –höchstens zwei, wenn er perfekt sein musste. Ich musste das Projekt auf die Beine bekommen, aber ich konnte nicht einfach ein Loom aufnehmen, es in Slack veröffentlichen und auf das Beste hoffen. Um es zu entwickeln, brauchten wir eine überzeugende Geschichte, einen Pitch und ein Team.

Das richtige Team

Ich wandte mich mit meinen Fragen an den Rendering- und Animationsingenieur Yassir Solomah: Würde das wirklich funktionieren? Ging ich richtig vor? Würde das die Leistung in Figma beeinträchtigen? Schließlich ist eine Vibe-codierte Annäherung an eine WebGPU-App der Arbeitsfläche etwas ganz anderes als das kachelgerenderte Enterprise-Original. (Versuch du einmal, eine leistungsfähige unendliche Arbeitsfläche zu erstellen. Das ist schwieriger, als man glauben möchte.)

Zum Glück kam Yassir mit an Bord. Wir ersetzten mein WebGL 2 Fragment-Shader-System durch ein WebGPU-Pipeline-System, sodass die Shader zu Miniaturprogrammen werden konnten: Sie renderten 3D-Objekte und wandten Logik basierend auf der Mausposition und Zeit an, um die Visuals innerhalb der Ebenen zu steuern. Mit dieser Architektur konnten wir die Grafikgenerierungsskripte in jeweils eigenen Sanboxes isolieren und gleichzeitig die volle Leistung von WebGPU nutzen. Dies bedeutete sicherere benutzergeführte Skripte, Logik-, Partikelsysteme, Berechnungsshader, 3D-Unterstützung und mehr.

Yassir bestätigte meinen Prototyp, indem er funktionierende Versionen davon in Figma Design produzierte. Da bekam die Produktmanagerin Georgia Rust Wind von unserer Idee. Sie hat einen guten Überblick über alles, was bei Figma passiert. Also wusste sie auch, wie sie unsere Arbeit mit der anderer Teams verknüpfen konnte, und beschaffte uns die Ressourcen, die wir brauchten, um dies zu verwirklichen. Zum Beispiel war Produktdesigner Jason Calleiro etwa zur gleichen Zeit gerade dabei, Prototypen von adaptiven und generativen Plugins in Figma Design zu teilen. Georgia ermutigte uns also, unsere Kräfte unter dem Dach der generativen Tools zu bündeln und eine Suite von Möglichkeiten zu entwickeln, um mit Agenten direkt auf der Arbeitsfläche im Handumdrehen benutzerdefinierte Plugins und Shader zu erstellen.

Nach ein paar Planungssitzungen hatten Georgia, Yassir und ich unsere Idee zu einem Pitch ausgebaut, der die Unternehmensleitung überzeugen würde. Ich präsentierte eine Live-Demo der Fähigkeit, Shadereffekte mit Agenten zu prompten, komplett mit den Handles und den dynamischen Steuerelementen für die Arbeitsfläche. Yassir unterstützte dies mit der Kernimplementierung, dem Sicherheitsmodell und einer Vision, wie wir die gute Leistung aufrechterhalten würden. Georgia legte dar, was wir als Erstes entwickeln würden, mit wem wir es entwickeln würden und wohin wir uns als Nächstes wenden könnten. Unser Vorschlag wurde angenommen an und wir bekamen grünes Licht. Unsere Deadline war die Config. Wir hatten also zwei Monate Zeit.

Ich entwarf ein Team-Logo im Stil der 80er Jahre, das generative Tools und Effekte kombinierte, symbolisiert durch den Schraubenschlüssel und den Blitz. Der Regenbogen vermittelt, dass sich Prompten wie Zaubern anfühlen kann, und die Vorwärtsneigung drückt Dynamik und Beschleunigung aus.

Neue Wege der Entwicklung finden

Angesichts der extrem kurzen Frist kehrten wir zu unseren Wurzeln zurück: keine PRDs, keine Crits, nur Prototypen sowie Demos statt formaler Reviews. Es gab einen riesigen Slack-Kanal für alle unsere Ingenieure und Designer, und jede Woche präsentierten wir unsere Arbeit den wichtigsten Entscheidungsträgern. Je mehr Demos wir in Meetings mit den Führungskräften zeigten, desto mehr gewannen wir an Schwung und konnten unser anfängliches Team von 15 Personen weiter ausbauen.

Generative Plugins und Shader teilten sich eine gemeinsame Infrastruktur: promptbare, dynamische, iterative codebasierte Elemente für unsere neue Werkzeugleiste. Obwohl die Plugins die bestehende Plugin-API nutzen würden, wollten wir, dass sie wie Figma aussehen und sich für die Designer vertraut anfühlen würden. Für die Shader brauchten wir eine völlig neue API. Also entwickelte ich das webkomponenten-basierte Figma-UI-KitPropsKit, das Agenten verwenden konnten.

Nach meinen Erfolgen mit Vibe-Coding wollte ich, dass jedes Design als funktionierender Prototyp beginnt. Das, so dachte ich, würde uns helfen, schneller voranzukommen, das Erlebnis zu spüren und den Entwicklern etwas Konkretes als Grundlage zu geben Es stellte sich heraus, dass Vibe-codierte Prototypen zwar ausgezeichnete Tools für Designer waren – sie ließen uns unsere eigenen Annahmen validieren und in Frage stellen –, jedoch keine hilfreichen Referenzen für Entwickler, PMs und Stakeholder.

Also änderten wir die Herangehensweise. Wir entwickelten statische Mockups in Figma, um Explosionsansichten aller möglichen Zustände zu bieten und uns als Erstes bezüglich der wichtigen Funktionen zu einigen. Dann gingen wir zu funktionierenden Code-Prototypen über, um die besten Lösungen zu prüfen und zu finden, ohne das übliche Hin und Her zwischen Implementieren, erneutem Designen, erneutem Implementieren und Testen. Sie halfen uns, schneller zu besseren Lösungen zu gelangen, ohne wertvolle Entwicklungszeit zu verschwenden. Ich schrieb sogar Produktionscode in der Figma-Codebasis und machte ein paar PRs. In unserem Slack-Kanal war mächtig was los: Demos, PR-Überprüfungen und viel spontane Entscheidungen. Die Energie war richtig spürbar.

Über die Ziellinie

Zwei Wochen vor der Config waren wir zu 90 % fertig, aber die letzten 10 % waren der schwierigste Teil. Wir kamen so schnell voran, dass eine Version bereits veraltet war, noch bevor die Führungskräfte und Entscheidungsträger sie fertig geprüft hatten. Es gab Momente, in denen wir glaubten, dass das Projekt in der Mülltonne landen würde.

Wir kommunizierten schnell und oft, trafen instinktive Entscheidungen und entwickelten Lösungen spontan. Die Layouts in Plugins passten noch nicht ganz? Wir bauten drei neue UI-Komponenten, um die Entscheidungsfindung des Agenten zu unterstützen. Die benutzerdefinierten Eigenschaftssteuerungen für Farbpaletten brauchten noch drei weitere Tage Entwicklungsarbeit? Wir machten in der Zwischenzeit mit einer Auswahlliste weiter. Irgendetwas brauchte noch einen letzten Feinschliff? Wir öffneten einen PR. Als Designer und Urheber dieses Projekts fiel es mir besonders schwer, auf Dinge zu verzichten. Aber ich musste lernen, wo ich mich besser zurückhalten und wo ich insistieren sollte.

Als Georgia und ich während der Config Keynote auf die Bühne gingen, um die generativen Plugins und Shader vorzustellen, repräsentierten wir die harte Arbeit eines unglaublichen Teams und eine völlig neue Art zu arbeiten.

Dieses Projekt zeigte uns auch, wie wir Figma auf neue Weise nutzen und die Reibungsflächen zwischen Design und Produktion verringern konnten. Unsere Config-Microsite für Shader nutzte zum Beispiel in großem Umfang den Figma MCP-Server. Heutzutage geht ein Ingenieur, der mit einem lokalen Agenten arbeitet, davon aus, dass er das Design mit unserem MCP mit get_design_context lesen kann. Code auf der Arbeitsfläche ist, mit anderen Worten, nicht viel anders als Design auf der Arbeitsfläche. Wir haben die Shader so entwickelt, dass sie in HTML und React exportierbar sind, und freuen uns, diese Funktion als Teil des heutigen Updates präsentieren zu können.

Ich freue mich schon sehr darauf, wenn unsere Benutzer*innen unsere Funktionen ausprobieren. Wir arbeiten kontinuierlich daran, mehr Ausdruck und Nutzen bereitzustellen, und sind gespannt zu sehen, was unsere Kunden mit der Welt teilen werden.

Beginne mit unserer Testumgebungsdatei für generative Plugins und Shader. Jeder, der Zugang zum Figma Design-Agenten hat, kann generative Plugins und Shader erstellen. Der Agent ist in der offenen Beta-Version für Benutzer*innen mit Full-Lizenz in allen Abonnements verfügbar. Collab-, Dev- und View-Lizenzen können den Agenten in ihren Entwürfen verwenden. In Beta ist der Agent noch kostenlos, wird aber nach wenigen Wochen beginnen, KI-Credits zu verbrauchen.