Zu Hauptinhalten gehen

Config 2026: Neue Materialien, neue Tools und eine ausdrucksstärkere Arbeitsfläche

Dylan FieldCo-founder & Chief Executive Officer, Figma
Produktgrafik im Collagenstil, die KI-gestützte Design- und Entwicklungsabläufe zeigt, mit Prompts zur Plugin-Erstellung, Steuerelementen für visuelle Effekte, Tools zur Codegenerierung und interaktiven UI-Komponenten, die über einen kreativen Arbeitsbereich verteilt sind.Produktgrafik im Collagenstil, die KI-gestützte Design- und Entwicklungsabläufe zeigt, mit Prompts zur Plugin-Erstellung, Steuerelementen für visuelle Effekte, Tools zur Codegenerierung und interaktiven UI-Komponenten, die über einen kreativen Arbeitsbereich verteilt sind.

Sprenge die Grenzen dessen, was du für möglich hieltest – mit Code-Ebenen, Figma Motion, Shadern, generativen Plugins und Weave-Tools. Auf der Arbeitsfläche.

Config 2026: Neue Materialien, neue Tools und eine ausdrucksstärkere Arbeitsfläche teilen

Design bedeutet, die schwierigen Fragen zu stellen. Im Moment erscheinen diese Fragen schwerwiegender denn je. Was ändert sich? Was ist möglich? Und was bedeutet überhaupt, etwas zu erschaffen? Wir bei Figma kommen immer wieder auf eine einfache Prämisse zurück: Kein Tool sollte die Möglichkeiten einer Idee einschränken.

Die diesjährigen Config-Ankündigungen drehen sich um grenzenlose Ausdrucksmöglichkeiten auf der Arbeitsfläche. Wir unterstützen neue Materialien, um alles auszudrücken, was Sie sich vorstellen können, und führen neue Tools ein, um diese Materialien weiter zu gestalten und zu entwickeln als je zuvor: Code, Bewegung, Shader, generative Plugins und Weave-Tools, alles auf der Figma-Arbeitsfläche.

Bei früheren Configs haben wir darüber gesprochen, dass KI die Anforderungen senkt und die Möglichkeiten erweitert. Doch während die KI die Grundvoraussetzungen gesenkt hat, wurde die maximale Leistungsgrenze dadurch nicht angehoben.

Designer*nnen, Kreative, Entwickler*innen: Ihr werdet neue Maßstäbe setzen.

Ich glaube, dass es in den kommenden Monaten und Jahren zu einer wahren Explosion an Kreativität, Risikobereitschaft und mutigem Selbstausdruck kommen wird. Unser Ziel bei Figma ist es, dir dabei zu helfen, völlig frei zu gestalten – mit Materialien und Werkzeugen, die sich miteinander kombinieren lassen und dir ermöglichen, in dem Tempo zu experimentieren und zu spielen, in dem du denkst. Die Arbeitsfläche ist mehr als nur der Ort, an dem dein Werk entsteht. Hier laufen auch alle Fäden zusammen.

Hier ist ein Blick auf alles, was wir bei der Config 2026 angekündigt haben.

Code auf der Arbeitsfläche

Seit Jahren diskutiert die Designbranche das Thema „Design versus Code“, und Tools (darunter auch Figma!) haben uns zu einer Entscheidung gezwungen. Aber diese Debatte geht am Thema vorbei. Design ist ein Prozess. Code ist eine Art von Material, genau wie Bilder, Vektorgrafiken und Design-Ebenen. Lange Zeit war Code in Single-Player-Umgebungen, die auf lineares Denken ausgelegt waren, zu finden. Anders ausgedrückt: Das Material war vom Prozess getrennt. Wir glauben, dass Code wie jedes andere Designmaterial behandelt werden sollte. Deshalb führen wir Code-Ebenen in Figma ein.

Auf der Arbeitsfläche kannst du jede Designebene mit nur einem Klick (oder einem Prompt) in eine interaktive Code-Ebene verwandeln. Du kannst eine Code-Ebene schnell duplizieren, um verschiedene Ansätze nebeneinander zu erkunden – genau wie bei einem Design-Frame.

Von da an funktioniert es genauso wie die Arbeitsfläche: Du kannst gemeinsam mit all deinen Teamkolleg*innen in derselben Datei Ideen entwickeln, Kommentare abgeben und Überarbeitungen vornehmen.

Wenn du mal vom Code zurück zu den Designebenen wechseln möchtest, kannst du Designrahmen in bearbeitbare Designebenen extrahieren. Wenn du dann bereit bist, zurückzugehen, wird die Code-Ebene mit einem Klick mit den Änderungen aktualisiert.

Trag dich auf der Warteliste unter figma.com/config-betas ein, um ab Juli, wenn „Code-Ebenen“ eingeführt wird, frühzeitig Zugang zu erhalten.

Weiterlesen →

Produktkonzept mit geteiltem Bildschirm, das eine Ausstellungswebseite, eine generierte Schnittstelle zur Ticketbuchung und die dazugehörige React-Code-Implementierung nebeneinander zeigt und so den Workflow vom Design bis zum Code veranschaulicht.Produktkonzept mit geteiltem Bildschirm, das eine Ausstellungswebseite, eine generierte Schnittstelle zur Ticketbuchung und die dazugehörige React-Code-Implementierung nebeneinander zeigt und so den Workflow vom Design bis zum Code veranschaulicht.
Entdecke die Möglichkeiten mit Code-Ebenen auf der Figma-Arbeitsfläche.

Erwecke Designs mit Figma Motion zum Leben

Bewegungsdesigner*innen erwecken Dinge auf eine Weise zum Leben, die schwer zu erklären ist – geschweige denn nachzumachen. Viele von uns haben sich danach gesehnt, diese Art von Magie zu erschaffen, aber sie schien unerreichbar. Und es bedeutete oft, in andere Tools zu wechseln. Ab heute kannst du direkt in Figma Animationen erstellen.

In Figma Design haben wir eine Zeitleiste hinzugefügt, die Keyframes, Voreinstellungen und vieles mehr enthält. Du kannst Animationen von Grund auf neu erstellen, sie auf bestehende Designs anwenden oder den Figma Agenten bitten, einen Ausgangspunkt zu generieren. Ich hoffe, dass du Figma Motion als leistungsstark, intuitiv und einfach spaßig findest. Wenn du bereits Bewegungsdesigner*in bist, nimmt dir Figma die Routinearbeiten ab, sodass du dich darauf konzentrieren kannst, deine Kreativität weiter voranzutreiben.

Da Bewegung auf der Figma-Plattform basiert, kann sie nun ein grundlegender Bestandteil deines Designsystems sein. Du kannst eine Komponente einmal animieren, und diese Bewegung überträgt sich auf jeden Bildschirm und in die Datei jedes Mitwirkenden – genau wie das bei Füllfarben und Typografie der Fall ist.

Und nicht zu vergessen: Figma Motion ist so konzipiert, dass es auch im Code funktioniert. Wenn du in den Dev Mode wechselst, ist die gesamte Zeitleiste sichtbar und kann überprüft werden: Jeder Zeitwert, jede Beschleunigungskurve, jeder Keyframe ist ohne weitere Interpretation lesbar. Du kannst Animationscode direkt in CSS, JSON oder im Framework-kompatiblen React kopieren. Motion ist außerdem MCP-kompatibel, sodass du jedes animierte Bild direkt an einen Coding-Agenten zur Umsetzung weiterleiten kannst. Du kannst die Dateien auch als MP4, WebM, animiertes SVG oder GIF exportieren, und wir arbeiten bereits daran, weitere Formate und Exportoptionen anzubieten.

Weiterlesen →

Animiere deine Designs mit der neuen Zeitleiste in Figma Design.

Shader-Füllungen und -Effekte

Shader gab es in Figma schon immer – sie sorgen hinter den Kulissen für die Darstellung unserer Arbeitsfläche. Aber das Erstellen von Shadern kann eine Herausforderung sein, und es ist schwierig, sie mit deinem Team zu teilen.

Jetzt kannst du beschreiben, was du möchtest, oder ein Bild als Vorlage verwenden, und der Figma Agent erstellt es für dich. Ein Effekt verändert das, was sich bereits in der Ebene befindet, und eine Füllung wirkt wie ein neues Material. Da das Ganze mit dem Figma Agenten erstellt wurde, sind Shader-Füllungen und Effekte standardmäßig parametrisiert. So kannst du Steuerelemente direkt auf der Arbeitsfläche hinzufügen und sie ganz nach Belieben gestalten.

Das Ergebnis sieht aus und verhält sich so, als wäre es schon immer Teil von Figma gewesen. Die Parameter werden als Steuerelemente angezeigt, lassen sich mit anderen Effekten kombinieren und können nahtlos in Code und gängige Formate konvertiert werden.

Interaktive Shader werden ebenfalls bald verfügbar sein, aber wir arbeiten noch daran, die Leistung genau richtig hinzubekommen.

Mehr erfahren →

Benutzeroberfläche eines Bewegungsgrafik-Editors, die einen generativen visuellen Effekt mit einstellbaren Partikelraster-Parametern, Steuerelementen für Keyframe-Animationen und einer Zeitleiste zur Animation prozeduraler Grafiken zeigt.Benutzeroberfläche eines Bewegungsgrafik-Editors, die einen generativen visuellen Effekt mit einstellbaren Partikelraster-Parametern, Steuerelementen für Keyframe-Animationen und einer Zeitleiste zur Animation prozeduraler Grafiken zeigt.
Kombiniere Shader-Effekte wie „Gradient Map“, „Riso Print“ und „Luminance Particles“.

Generative Plugins

Wir beobachten, dass immer mehr Teams ihre eigenen Tools entwickeln, und wir finden das großartig! Alle Designer*innen haben individuelle Arbeitsabläufe. Mit generativen Plugins kannst du alle Tools erstellen, die du dir wünschst. Um ein generatives Plugin zu erstellen, beschreibe einfach das Tool, das du brauchst: das Verhalten, die Bedienelemente und die Parameter. Keine Kenntnisse über lokale Entwicklungsumgebungen oder Plugin-APIs erforderlich. Das fühlt sich auf der Arbeitsfläche genauso natürlich an wie jedes andere Figma-Tool.

Sowohl bei generativen Plugins als auch bei Shadern kannst du etwas für dich selbst erstellen und es mit allen in deiner Datei teilen. Bald kannst du Tools für dein Team, deine Organisation oder die breitere Community veröffentlichen.

Mehr erfahren →

Ein Plugin zum Erstellen von Bild-Layouts hilft dir beim Organisieren von Assets.

Figma Weave-Tools

Figma Weave-Tools wenden denselben Ansatz auf visuelle Inhalte an und helfen dir dabei, aussagekräftige Workflows zu erstellen und wiederzuverwenden. Und sie sind jetzt auf der Figma-Arbeitsfläche verfügbar.

Ein wenig Kontext: Weave ist eine node-basierte Arbeitsfläche, auf der du generative Workflows erstellen kannst. Du kannst Modelle miteinander verknüpfen, Assets umwandeln, Ergebnisse verfeinern und Ansätze vergleichen. Anstatt nur ein einziges Ergebnis abzurufen, arbeitest du mit den Modellausgaben wie mit Ton, um einen Workflow mit mehreren Modellen zu gestalten, der es dir ermöglicht, alles, was dir im Kopf herumschwirrt, in einen sichtbaren Prozess zu verwandeln, den du überprüfen, weiterentwickeln und wiederverwenden kannst.

Heute kannst du in Weave Workflows erstellen und diese als Vorlagen veröffentlichen, damit andere sie nutzen oder anpassen können. Schon bald kannst du sie als Tools für dein Team, deine Organisation oder deine Community veröffentlichen. Damit du gleich loslegen kannst, haben wir eine Reihe von Weave-Tools hinzugefügt, die dich inspirieren sollen.

Mehr erfahren →

Eine Schnittstelle für den Stiltransfer, die ein Zielbild, ein Referenzbild für den Stil und eine Vorschau der generierten Webseite zeigt und so die KI-gestützte Anwendung visueller Stile auf verschiedene Designelemente veranschaulicht.Eine Schnittstelle für den Stiltransfer, die ein Zielbild, ein Referenzbild für den Stil und eine Vorschau der generierten Webseite zeigt und so die KI-gestützte Anwendung visueller Stile auf verschiedene Designelemente veranschaulicht.
Verwende das Tool „Stil übertragen“ (Weave), um einen Stil aus einem Quellbild auf ein Zielbild anzuwenden.

Ein Agent, der weiß, wie du arbeitest

Der Figma Agent (der gestern für alle freigeschaltet wurde!) wurde entwickelt, um die Design-Arbeitsfläche zu verstehen.

Mit „Skills“ fasst du deine Arbeitsabläufe und Konventionen zu wiederverwendbaren Anweisungen für den Agenten zusammen. Du kannst dein eigenes Projekt entwickeln, die Fähigkeiten deines Teams nutzen oder auf die Community zurückgreifen. Über Konnektoren kann der Agent auf die Tools zugreifen, die du bereits nutzt – zum Beispiel Notion, Slack, Granola, Hex, GitHub, Atlassian und viele mehr – und anschließend Aktualisierungen zurücksenden. Anhänge können Forschungsergebnisse, Zusammenfassungen oder sonstige relevante Unterlagen enthalten.

Agenten-Chats sind jetzt standardmäßig auch für deine Teamkolleg*innen sichtbar, sodass du sehen kannst, welche Ansätze andere verfolgen, und auf deren Überlegungen aufbauen kannst. Natürlich kannst du Chats auch auf privat setzen, wenn es nötig ist.

Der Agent wird auch auf weiteren Oberflächen verfügbar sein, wie FigJam und Slides. Trag dich auf der Warteliste für den frühen Zugang unter figma.com/config-betas ein.

Mehr erfahren →

Ein Design für ein mobiles Poster, umrahmt von Aktionen eines KI-Assistenten, mit schwebenden Prompts für das Erstellen von Plugins, das Anwenden von Stilen, das Erzeugen benutzerdefinierter Effekte und das Überprüfen der Barrierefreiheit innerhalb eines Design-Workflows.Ein Design für ein mobiles Poster, umrahmt von Aktionen eines KI-Assistenten, mit schwebenden Prompts für das Erstellen von Plugins, das Anwenden von Stilen, das Erzeugen benutzerdefinierter Effekte und das Überprüfen der Barrierefreiheit innerhalb eines Design-Workflows.
Füge Dateien hinzu, verbinde andere Tools und nutze deine Fähigkeiten, um deinem Design-Agenten mehr Kontext zu liefern.

Mit mehr Möglichkeiten denn je auf der Figma-Arbeitsfläche können wir es kaum erwarten zu sehen, wie du die Messlatte höher legst. Fang an, etwas zu erschaffen, das nur du kannst.

Schau in unserem Hilfe-Center vorbei und informiere dich über unsere Neuheiten, deren Verfügbarkeit und wie du loslegen kannst. Finde Antworten und Inspirationen zu allem von Figma unter Figma Learn.

Mit Figma kreativ sein und zusammenarbeiten

Kostenlos loslegen