Figma Make: Der komplette Leitfaden für Prompt-zu-Code Design (2026)

Figma Make ist die andere Hälfte von Figmas KI-Strategie. Während der Design Agent visuelle Designs auf der Leinwand erstellt, verwandelt Make diese Designs (oder schriftliche Beschreibungen) in funktionierenden Code — funktionale Prototypen, die Sie durchklicken, teilen und mit echten Nutzern testen können. Es ist Figmas Antwort auf v0, Bolt.new und jedes andere Prompt-zu-Code-Tool, das im vergangenen Jahr entstanden ist.

Make ist auch Figmas umstrittenste Funktion. Wenn es funktioniert, spart es tagelange Prototyping-Arbeit. Wenn nicht, verbrennt es Credits für Ausgaben, die Sie nicht verwenden können. Zu verstehen, wann man es verwendet — und wann man Alternativen nutzt — ist der Schlüssel, um Wert daraus zu ziehen.

Was kann Figma Make tatsächlich tun?

Der beste Workflow: Entwerfen Sie zuerst den Bildschirm visuell (mit dem Design Agent oder manuell), dann verwenden Sie Make, um ihn in einen funktionierenden Prototyp zu verwandeln. Dies gibt Make zwei Kontextquellen — Ihr visuelles Design UND Ihre Textanweisungen — und produziert höherwertigeren Code als jede Eingabe allein.

Credit-Kosten-Realität: Was Ihnen niemand sagt

Make ist die kreditaufwändigste Figma AI-Funktion. Die Kosten skalieren mit der Komplexität auf eine Weise, die nicht sofort offensichtlich ist:

Die Spalte "Typische Iterationen" ist der versteckte Multiplikator. Die erste Generierung produziert selten genau das, was Sie brauchen. Sie passen Ihren Prompt an, generieren neu, überprüfen, passen erneut an. Jede Iteration verbraucht Credits zum gleichen Satz. Ein "50 Credit"-Prototyp wird leicht zu einem "200 Credit"-Prototyp über 4 Iterationen hinweg.

Deshalb ist das Schreiben spezifischer, detaillierter Prompts speziell für Make so wichtig. Jede Neugenerierung, die Sie vermeiden, spart direkt Credits. Der kostenlose Prompt Optimizer fügt die Struktur hinzu, die Iterationen reduziert — und im Gegensatz zu Make kostet die Nutzung null Credits.

Wie schneidet Figma Make im Vergleich zu Alternativen ab?

Die ehrliche Empfehlung: Verwenden Sie Figma Make für Stakeholder-Demos, wo die Figma-Design-Integration wichtig ist. Verwenden Sie v0 oder Bolt.new für schnelle eigenständige Prototypen, wo Sie keine Figma-Integration benötigen. Verwenden Sie Claude Code oder Cursor für Produktionscode — deren Ausgabequalität ist deutlich höher als die von Make für alles über einfache Seiten hinaus.

5 Tipps, um mehr aus Figma Make herauszuholen

1. Beginnen Sie mit einem visuellen Design, nicht nur Text. Make produziert besseren Code, wenn es ein Figma-Design als Referenz hat. Entwerfen Sie zuerst den Bildschirm (auch grob), dann geben Sie Make sowohl das Design als auch Textanweisungen. Zwei Eingaben > eine.

2. Spezifizieren Sie den Technologie-Stack. "Erstelle das in React mit Tailwind CSS" produziert andere (und meist bessere) Ausgaben als die Tech-Wahl Make zu überlassen. Seien Sie explizit über Framework, Styling-Ansatz und alle Bibliotheken, die Sie wollen.

3. Beschreiben Sie Interaktionen, nicht nur Layout. "Wenn der Nutzer auf Senden klickt, zeige einen Ladekreisel für 2 Sekunden, dann eine Erfolgsmeldung" ist viel nützlicher als "füge einen Senden-Button hinzu." Make kann interaktives Verhalten generieren, aber nur wenn Sie es spezifizieren.

4. Unterteilen Sie komplexe Projekte in Bildschirme. Prompten Sie nicht "erstelle meine gesamte App." Prompten Sie "erstelle den Login-Bildschirm" → überprüfen → "erstelle das Dashboard" → überprüfen. Sequenzielle Einzelbildschirm-Generierungen produzieren bessere Qualität als ein massiver mehrseitiger Prompt.

5. Verwenden Sie zuerst den Prompt Optimizer. Bevor Sie Credits für Make ausgeben, lassen Sie Ihren Prompt durch den kostenlosen Prompt Optimizer laufen. Ein umstrukturierter Prompt mit explizitem Kontext, Einschränkungen und Spezifika reduziert Iterationen und spart direkt Credits.

Häufig gestellte Fragen

Ist Figma Make dasselbe wie Figma Sites?

Verwandt, aber unterschiedlich. Make generiert Prototypen (zum Testen und für Demos). Figma Sites veröffentlicht Websites (für die Produktion). Make-Ausgabe ist funktional, aber nicht produktionstauglich; Sites-Ausgabe ist für echte Bereitstellung gedacht. Denken Sie an Make als Prototyping und Sites als Veröffentlichung.

Kann ich Make-Code exportieren und in meinem Projekt verwenden?

Make produziert funktionierenden Code, aber er ist für Demonstration optimiert, nicht für die Produktion. Die Code-Qualität ist ausreichend für Prototyping und Stakeholder-Demos, benötigt aber typischerweise erhebliche Überarbeitung für den Produktionseinsatz. Für Produktionscode aus Figma-Designs verwenden Sie Claude Code über den MCP-Server.

Ist v0 besser als Figma Make?

Für eigenständige Code-Generierung: oft ja — v0 produziert saubereren React/Next.js-Code und verwendet ein Abonnementmodell statt Credits. Für Design-zu-Code (mit Ihrer Figma-Datei als Eingabe): Make ist besser, weil es Ihr Design-System liest. Sie dienen verschiedenen Ausgangspunkten: v0 von Text, Make von Figma-Designs.

Soll ich Make lernen oder programmieren lernen?

Für Designer, die ohne Programmierung prototypisieren wollen: Make bietet sofortigen Wert. Für Designer, die Produktionsfunktionen erstellen und ein tieferes Verständnis der Implementierung haben wollen: lernen Sie zu programmieren + verwenden Sie Claude Code. Langfristig ist Programmierfähigkeit vielseitiger und karrierewertvoller als Make-Kompetenz.

Was sind die Credit-Kosten eines realistischen Prototyps?

Planen Sie 100-300 Credits für einen mehrseitigen Prototyp mit 2-3 Iterationen ein. Einfache einseitige Prototypen können nur 20-40 Credits kosten. Komplexe Apps mit Navigation, Zustand und bedingter Logik können leicht 500 Credits über mehrere Runden der Generierung und Verfeinerung hinweg übersteigen.

Offenlegung: Einige Links in diesem Artikel sind Affiliate-Links. Wir empfehlen nur Tools, die wir persönlich getestet haben und regelmäßig verwenden. Siehe unsere vollständige Offenlegungsrichtlinie.