Zu Hauptinhalten gehen

Einführung von Figma Make: Eine neue Art, Designs zu testen, zu bearbeiten und zu prompten

Peter NgProduct Designer, Figma
Rohit ChouhanSoftware Engineer, Figma
Tom DuncalfSoftware Engineer, Figma
In einem Chatfenster steht: „Erstelle diesen Musik-Player und lasse die Scheibe bei jedem neuen Titel drehen, um ihn zum Leben zu erwecken.“ Rechts wird eine CD neben einer Trackliste angezeigt.In einem Chatfenster steht: „Erstelle diesen Musik-Player und lasse die Scheibe bei jedem neuen Titel drehen, um ihn zum Leben zu erwecken.“ Rechts wird eine CD neben einer Trackliste angezeigt.

Heute stellen wir Figma Make vor – eine neue Prompt-to-Code-Funktion, mit der du schnell Ideen erkunden, iterieren und verfeinern kannst – sei es beim Erstellen hochauflösender Prototypen oder beim Eintauchen in die Details von Design und Code.

Einführung von Figma Make: Eine neue Art, Designs zu testen, zu bearbeiten und zu prompten teilen

Design ist die Kunst des Problemlösens. Aber Problemlösung verläuft selten linear – wo sie beginnt, endet oder wie sie sich entwickelt, hängt davon ab, wo du dich im Prozess befindest und wohin du denkst, dass es gehen könnte. Bei Figma suchen wir ständig nach Wegen, wie sich der Weg von der Idee zum fertigen Produkt einfacher gestalten lässt. Denn viele gute Ideen bleiben oft unerforscht. Sei es aus Zeitmangel, fehlenden Tools oder Wissenslücken. Heute launchen wir Figma Make, ein neues Prompt-to-Code-Tool für Designer*innen und Produktteams, um Möglichkeiten zu erkunden – ganz gleich, wo sie sich gerade im Prozess befinden: ob beim Ausprobieren verschiedener Designrichtungen, beim Bearbeiten im Code oder beim Prompten eines Proof of Concept.

Designs „realistisch genug“ zu gestalten, um damit zu experimentieren, ist meist zeitaufwändig oder erfordert Programmierkenntnisse. Deshalb haben wir Figma Make entwickelt: Damit du nicht nur erahnst, wie sich deine Designs anfühlen könnten – sondern sie tatsächlich erleben kannst. Starte einfach mit einem Design und beschreibe per Prompt, wie es zum Leben erweckt werden soll.

Ein Hinweis zu unserem Modell:

Figma Make verwendet derzeit Claude 3.7 Sonnet; wir werden in Zukunft weitere Modelle einführen.

Starte mit Design und nicht bei Null

Wir glauben, dass generative KI verändern wird, wer designen kann und wie – und dass Design selbst im Zeitalter der KI nur noch wichtiger wird. Denn der Designprozess ist selten ein klarer Weg von 0 auf 1. Design-Inspiration kann überall beginnen, nicht nur bei „0“ – sei es eine frühe Skizze oder ein vollständig ausgearbeiteter Prototyp – und außerdem ist „1“ selten der Endpunkt.

Mit Figma Make musst du nicht bei Null anfangen. Du kannst dem Modell einfach deine vorhandenen Designs übergeben, indem du Frames aus Figma Design kopierst – inklusive Struktur und Metadaten. Anhand natürlicher Spracheingaben kann Figma Make daraus interaktive Erlebnisse machen – ganz ohne, dass dabei die ursprüngliche Designidee und Absicht verloren geht.

Eine Chatfenster-Eingabeaufforderung lautet: „Füge eine Animation hinzu, wenn du das Einstellungs-Panel öffnest und schließt.“ Auf der rechten Seite umfassen die Audioeinstellungen Überblendung, Streaming-Qualität, Download-Qualität und einen Equalizer.Eine Chatfenster-Eingabeaufforderung lautet: „Füge eine Animation hinzu, wenn du das Einstellungs-Panel öffnest und schließt.“ Auf der rechten Seite umfassen die Audioeinstellungen Überblendung, Streaming-Qualität, Download-Qualität und einen Equalizer.
Nutze Prompts in natürlicher Sprache, um statische Designs in greifbare Erlebnisse zu verwandeln.

Von statisch zu interaktiv in Minuten

Ein statisches Design kann nur begrenzt Informationen vermitteln. Dadurch wird es schwierig, Konsens im Team oder Machbarkeit des Designs zu bewerten. Figma Make eröffnet neue Möglichkeiten für Teams im gesamten Designprozess:

  • Interaktives Prototyping: Verwandle statische Designs in vollständig interaktive Prototypen. Füge Animationen, interaktive Schaltflächen und Echtzeit-Feedback hinzu, ohne komplexen Code.
  • Dynamische Daten: Teste Funktionen mit echten Daten – lade Dateien hoch, visualisiere Informationen dynamisch und erlebe Designs, wie sie tatsächlich funktionieren würden.
  • Responsive Anpassungen: Transformiere Designs über verschiedene Formfaktoren hinweg. Erstelle eine Desktop-Version deiner mobilen App, um sie auf verschiedenen Plattformen zu testen.

Neben diesem Maß an Kontrolle und Genauigkeit wird es schon bald möglich sein, Drittanbieter-Datenbanken und Designsysteme zu integrieren und deinen Ideen so nicht nur Funktion, sondern auch Form zu geben.

Multiplayer-Exploration in Echtzeit

Da Figma Make in die Figma-Plattform eingebettet und für Kollaboration gemacht ist, wird es zum All-in-One-Tool für Designer*innen und Produktmanager*innen: von der ersten Idee über die Iterationen bis zum Feinschliff am Ende – alles in einer zentralen Quelle.

Jede Person im Team kann Funktionen hinzufügen, Daten einbinden oder neue Interaktionsmodelle testen – alles in derselben Datei, in Echtzeit – unabhängig von Rolle oder technischem Hintergrund. Indem die Hürde „Code“ wegfällt, ermöglicht Figma Make allen im Team, substanziell zum Design-Erlebnis beizutragen.

Point-and-Prompt-Präzision

Figma Make führt einen intuitiven Bearbeitungsansatz ein, der der natürlichen Arbeitsweise von Designer*innen entspricht. Du kannst einfach auf ein Element zeigen und beschreiben, was passieren soll – z. B. „Dieser Button soll eine Animation auslösen“ oder „Dieses Element soll auf Scrollen reagieren.“ Diese Präzision schließt die traditionelle Lücke zwischen Designabsicht und funktionaler Umsetzung. Der strukturierte Ansatz bewahrt auch dein Designsystem und die Komponentenhierarchie, während interaktive Verhaltensweisen hinzugefügt werden, wodurch die Designtreue während des gesamten Prozesses erhalten bleibt.

Ein Zeitstempel wird ausgewählt, und eine KI-Eingabeaufforderung lautet: „Animiere den Zeitstempel, wenn ein Lied abgespielt wird.“Ein Zeitstempel wird ausgewählt, und eine KI-Eingabeaufforderung lautet: „Animiere den Zeitstempel, wenn ein Lied abgespielt wird.“
Erfasse deine Designabsicht mühelos mit intuitiver Bearbeitung.

Nahtloser Workflow von der Arbeitsfläche zum Code

Figma Make lässt sich direkt in deinen vorhandenen Figma-Workflow integrieren, von Figma Design bis Figma Sites. Das schafft einen durchgehenden Pfad vom ersten Konzept über den interaktiven Prototyp bis zur veröffentlichten Website, ohne dass der Kontext gewechselt oder die Arbeit in verschiedenen Tools neu aufgebaut werden muss.

Ganz neue Designmöglichkeiten

Figma Make ersetzt nicht die sorgfältige, iterative Arbeit, die für gutes Design so entscheidend ist – es stärkt sie: Es hilft dir, Konzepte schneller zu validieren, Richtungen gründlicher zu erkunden und Ideen wirkungsvoller zu kommunizieren. Unser Ziel ist es, Designer*innen zu helfen, fließend zwischen Denken und Machen zu wechseln – Ideen schnell zu validieren, während Handwerk und Absicht beibehalten werden, und sie letztendlich zu befähigen, raffiniertere Produkte in kürzerer Zeit zu erstellen.

Figma Make unterstützt die schnelle Ideenfindung unabhängig vom Erfahrungsniveau, bringt dich schneller in den Flow und macht hoffentlich im gesamten Prozess auf dem Weg dorthin Spaß. Wir können es kaum erwarten zu sehen, was du kreierst.

Mit Figma kreativ sein und zusammenarbeiten

Kostenlos loslegen