Design-basiert erstellen: Neue Workflows für neue Ansätze
Dies sind alle unsere Neuerungen dazu, wie Teams und Agenten Design, Code und Kontext auf die Full-Stack-Kreativ-Arbeitsfläche von Figma bringen können.
Design-basiert erstellen: Neue Workflows für neue Ansätze teilen
Lange Zeit war Programmieren teuer. Jede Code-Änderung kostete Geld und Zeit und jede Umsetzung in Code wurde sorgfältig geplant.
KI hat das Programmieren heute preiswert gemacht hat und es war noch nie so einfach, etwas zu erstellen. Etliche Teams nutzen den Erstellungsprozess, um ihre Gedanken und Ideen auszuloten. Sie erstellen zuerst und nutzen dies als Ausgangspunkt, um ein Problem zu entwirren und zu testen, ob Ideen Bestand haben. Dieser Ansatz ist schnell, ungezielt und ein wenig chaotisch. Gleichzeitig geht es weniger um die Schaffung eines fertigen Produkts als darum, das eigene Denken zu hinterfragen und zu erweitern. Mit anderen Worten: Das Erstellen wird als Mittel zum Nachdenken genutzt.
Und dann gibt es das Erstellen mit dem Ziel, ein fertiges Projekt zu erhalten. Dieser Arbeitsansatz ist gezielt, präzise und konzentriert sich auf die Details.
Der Wechsel zwischen diesen Erstellungsansätzen ist schwierig. KI erleichtert den Schritt zum Proof of Concept durch Code, aber dieser Workflow ist oft ein Einzelspieler, der zu einem Tunnelblick führt, sodass du kein Gefühl dafür bekommst, ob du auf das richtige Ziel zusteuerst. Hier stellen wir neue Möglichkeiten vor, mit denen du beide Erstellungsansätze in Figma zusammenbringen kannst.
Mit Code auf der Arbeitsfläche zusammenarbeiten
Wenn jeder per Vibe Coding Prototypen erstellt, hat man schnell das Gefühlt, isoliert zu arbeiten. Zusammenarbeit bedeutet heutzutage mitunter sogar, dass man einen Link zu einem Prototyp oder einem Video teilt, sodass man das Endergebnis sehen kann, aber nicht die Schritte, die zu diesem Ergebnis geführt haben. Wir nutzen das Erstellen zum Denken, aber der Denkprozess ist unsichtbar geworden. Ein*e Kund*in hat das wie folgt beschrieben: „Es geht schnell, schnell, schnell… und dann plötzlich wieder langsam.“
Zudem haben wir von Figma-Benutzer*innen das Feedback erhalten, dass sie sich in Terminal- oder IDE-Umgebungen nicht zuhause fühlen. Sie möchten visuell und im Team in einer Umgebung arbeiten, die für sie gemacht ist. Deshalb haben wir Anfang des Jahres die Code-Ebenen angekündigt: Sie vermitteln das Gefühl, wieder gemeinsam auf der Arbeitsfläche zu gestalten. Ganz gleich, ob du bestehende Designs in funktionierenden Code umwandeln, aus einem lokalen Ordner hochladen, einen codierten Prototyp über MCP übertragen, aus GitHub importieren oder den Live-Inhalt deiner Website mit der Chrome-Erweiterung von Figma erfassen möchtest, kannst du mit den Code-Ebenen deine in Code ausgedrückten Ideen auf der Arbeitsfläche zu erkunden und deinem Denken einen Push geben. Im Laufe der Zeit möchten wir zudem die Möglichkeit bieten, mit komplexeren Codebasen zu arbeiten.
Code-Ebenen stehen ab heute für alle Abos als offene Beta-Version zur Verfügung. Wir haben auch unsere Chrome-Erweiterung verbessert... Es lohnt sich!
Mehr Kontrolle über deine Designsysteme
Designsysteme waren schon immer die Grundlage für Konsistenz und Kohärenz in deinem Produkt. Da Teams immer mehr mit Agenten erstellen, wird diese Grundlage noch wichtiger.
Wenn den Agenten die richtigen Muster und Grundsätze zur Verfügung stehen, können sie auf dem Wissen aufbauen, in das dein Team bereits investiert hat. Deshalb erweitern wir das, was deine Designsysteme in Figma beinhalten können: Designsysteme können jetzt Codequellen und Richtlinien enthalten, damit der Agent über alle benötigten Informationen verfügt und dein Designsystem besser reflektieren kann. Füge deinen veröffentlichten Designbibliotheken Richtlinien hinzu, damit der Agent etablierte Muster leichter berücksichtigen kann, und importiere Code aus einem GitHub-Repository oder einem npm-Paket, damit der Agent bessere Komponenten und Code-Ebenen erstellen und bearbeiten kann.
Wir präsentieren auch eine Vorschau für eine spezielle Plattform, auf der alle Bibliotheken deines Designsystems zusammengeführt, an einem Ort verwaltet und im Laufe der Zeit verbessert werden können. Eine Systemkarte hilft beim Nachverfolgen von Änderungen und Abhängigkeiten, während eine Systemprüfung Lücken in deinem Designsystem findet, z. B. fehlende Beschreibungen und interaktive Zustände.
Richtlinien (jetzt in der offenen Beta-Phase) und Codequellen (startet in der geschlossenen Beta-Phase) werden in allen kostenpflichtigen Abos verfügbar sein.
Gemeinsamer Kontext mit Figma Specs
Da Teams zunehmend mit Agenten zusammenarbeiten, ist Markdown allgegenwärtiger als je zuvor. Markdown-Dateien haben jedoch keine Beziehungen zueinander oder zu den Projekten, an die sie angehängt sind. Sie enthalten oft Verweise auf Bilder, URLs oder sogar andere Markdown-Dateien, die für Mitwirkende nicht einsehbar sein können. Deshalb haben wir Specs entwickelt: einen neuen nativen Container, mit dem Kontext vollständig ausgedrückt und in, aus und zwischen Figma-Elementen übertragen werden kann.
Specs bietet viele Möglichkeiten. Die damit erstellten Spezifikationen können zum Beispiel als Grundlage für die Generierung neuer Richtungen, die Erstellung von Datenberichten und hochdetaillierten PRDs dienen und die Übergabe von Kontext an Agenten ermöglichen. Du kannst mit einem Agenten externen Kontext hinzufügen, zusammenarbeiten, um vage Ideen in eine detaillierte Spezifikation zu verwandeln, und diese dann über den MCP-Server von Figma an deinen Coding-Agenten senden oder eine Code-Ebene darauf aufbauen und nach und nach verfeinern. Da Specs gemeinsam getroffene Entscheidungen enthalten und auf deine Arbeit auf der Arbeitsfläche verweisen, kannst du Kontext aus Diagrammen, Code-Ebenen, Designs und mehr kodifizieren und teilen.
Specs wird ab heute als offene Beta-Version auf Web, Desktop und Mobilgeräten eingeführt und ist in allen kostenpflichtigen Abos verfügbar.
Datengestützte Websites mit Payload veröffentlichen
Payload ist ein Open-Source-Inhaltsframework zum Erstellen interner Tools, Apps und Websites. In den letzten 12 Monaten haben sich die Payload-Downloads versechsfacht. Damit ist es jetzt das am schnellsten wachsende Open-Source-CMS auf NPM.
Letztes Jahr trat das Team hinter Payload, einem Open-Source-Content-Framework, Figma bei. Heute freuen wir uns, die Kompetenzen von Payload in Figma Make zu integrieren, damit du gemeinsam Web-Apps erstellen, verwalten und bereitstellen kannst. Payload ermöglicht Marketingteams die Verwaltung von Inhalten, ohne Zugang zum Quellcode oder Zeit von Entwickler*innen zu benötigen. Und die Inhalte, die sie hinzufügen, bleiben an dein Designsystem gebunden, sodass deine Marke genau dargestellt wird. Außerdem hast du alles an einem Ort – von Inhalten bis hin zu Workflows, APIs und einem Admin-Panel. Und da Figma es hostet, befinden sich deine Inhalte und Daten am selben Ort. Ganz gleich, ob du als Designer*in eine v1 in Figma Make anstößt, als Marketingspezialist*in einen Text aktualisierst oder als Entwickler*in die App mit dem Open-Source-Framework von Payload anpasst, stehen dem gesamten Team alle Informationen zur Verfügung, um eine App in die Produktion zu bringen. Ein weiteres Plus: Du kannst diese Daten auch mit Tools außerhalb von Figma nutzen.
Payload ist in allen Abos verfügbar, mit rollierendem Zugriff auf alle Konten in den kommenden Wochen.
Neue Möglichkeiten zum Erstellen mit deinen KI-Tools mithilfe von Figma MCP
Alle diese neuen Agent-nativen Funktionen und Workflows sind über den Figma-Agenten und MCP verfügbar. Der Agent (jetzt allgemein verfügbar und in die Design-Arbeitsfläche integriert) kann bei einer Vielzahl von Arbeiten repetitive Aufgaben automatisieren – von Prototypen bis hin zu Komponenten des Designsystems.
Wir aktualisieren auch den Figma MCP-Server, um mehr KI-gestützte Code- und Design-Workflows zu ermöglichen und Agenten die Skills und Tools zur Verfügung zu stellen, die Teams zum schnelleren Erstellen benötigen. Ab heute kannst du Code-Ebenen generieren und direkt mit Spezifikationen aus den KI-Tools arbeiten, die du bereits verwendest. Du kannst auch visuelle Assets erstellen und veröffentlichte Weave-Workflows ausführen, wodurch dein kreativer Prozess stärker in diese Tools einfließen kann. Durch verbesserte Anleitungen für Agenten und eine höhere Leistung des Figma MCP-Servers werden Fehler und die Token-Nutzung reduziert, sodass Agenten Figma-Aufgaben effizienter und zuverlässiger erledigen können.
Damit du deine Arbeit unabhängig von deinem Startpunkt mit Figma verbinden kannst, starten wir 20 neue MCP-Partnerintegrationen, darunter:
- OpenCode: Stelle deinem Coding-Agenten den Kontext aus dem Figma-Designsystem zur Verfügung, um genaueren Code zu erhalten, und sende die Prototypen dann zur Überprüfung zurück an Figma.
- Dia: Erkunde Ideen in einem KI-nativen Browser und übertrage die Web-UI als editierbare Designebenen an Figma, um diese zu verfeinern und zu überprüfen.
- Junie by Jetbrains:Übertrage deine codierten Prototypen als Code-Ebenen an Figma, damit du sie mit deinem Team iterieren und verfeinern kannst.
- Meta Muse: Inhaber*innen kleiner Unternehmen können die in Figma entworfene Marke an Muse übertragen, um weitere visuelle Inhalte zu erstellen und Weave-Workflows auszuführen.
Heute beginnt die Arbeit an verschiedenen Orten, geht durch viele Hände und nimmt dabei mehrere Formen an. Teams kommen zusammen und erkunden parallel Ideen. Sie verfeinern die Interaktionen, indem sie diese testen, und übertragen die Entscheidungen dann an etwas, das zur Auslieferung bereit ist. Der Prozess verläuft nicht geradlinig: Ideen bilden Zweige, Teams gehen zurück und eine Antwort auf eine Frage enthüllt eine noch bessere, noch grundlegendere Frage.
Genau das ist Design-basiertes Erstellen. Ganz gleich, wo du anfängst und wie du arbeitest, sind wir gespannt, was du auf der Full-Stack-Kreativ-Arbeitsfläche von Figma erschaffen wirst.
