Was ist Figma Make?
Figma Make ist Figmas KI-gestütztes Prompt-to-App-Tool[1]. Du beschreibst eine Idee als Text und/oder hängst einen Figma-Frame oder ein Bild an, und es generiert in wenigen Minuten einen funktionalen, interaktiven Prototyp – ganz ohne Design- oder Programmierkenntnisse.
Figma Make läuft direkt in Figmas Ökosystem und liefert echten App-Code, den du veröffentlichen oder übergeben kannst.
Prompt-to-Prototype kostenlos testen >
Schritt für Schritt: App bauen mit Figma Make
Um zu zeigen, wie Figma Make funktioniert, baue ich eine Programmier-Lern-App für Kinder von Grund auf neu – angelehnt an das Duolingo-Interface. Zusätzlich nutze ich andere Figma-KI-Features wie den Figma Agent, um wie ein Profi auf der Überholspur zu arbeiten.
Hinweis: Mein Figma Make KI-Tutorial basiert auf Figma Pro[2]. Aber selbst wenn du die eingeschränkte Version im Figma AI Freemium-Tarif nutzt, sind die Schritte genau dieselben.
Figma Make öffnen und einrichten
Sobald du das Figma-Dashboard öffnest, siehst du das Figma Make-Banner ganz oben als interaktive Prompt-Eingabeleiste. Starte dort oder direkt unter „www.figma.com/make“; ich bevorzuge Letzteres.
Hier beschreibst du deine App-Idee in einfachem Englisch. Du kannst auch UI-Referenzen wie ein Bild, eine Design-MD-Datei, ein PRD oder sogar einen Link zu einem Figma-Design-Frame hinzufügen. Das Beste daran: Du kannst wählen, welches KI-Modell deine Figma Make-App antreiben soll: Gemini, GPT oder Claude. Ich entscheide mich für das designfokussierte Gemini 3.1 PRO.
Webdesign mit Gemini 3.1 PRO: So geht's >
Text-Prompt eingeben und/oder Referenzen hochladen
Im Prompt kannst du einen einzelnen Screen oder einen kompletten Flow beschreiben. Lass die KI das Styling bestimmen oder gib ihr textliche oder visuelle Vorgaben. Mein Tipp für ernsthaftes „Vibe Coding“: Sei so detailliert wie möglich.
Ich starte mit einem Prompt für das Q&A-Level meiner App (die ich Coddly nenne) und lade ein paar Duolingo-Screens als Referenz hoch:
"Baue eine Programmier-Lern-App für Kinder namens Coddly. Starte mit einem Home-/Unit-Map-Screen, der einen Lernpfad mit gesperrten und freigeschalteten Levels zeigt. Danach einen Lektions-Screen mit 2 Frage-Typen: (1) Wähle das richtige Bild (aus vieren) zu einer Beschreibung einer Programmiersprache, (2) Schreibe eine kurze Zeile Code durch Tippen auf Wort-Chips. Beende das Ganze mit einem Level-Complete-Screen, der die verdienten XP zeigt.
Nutze ein verspieltes, gamifiziertes UI inspiriert vom angehängten Duolingo-UI. Aber verwende eine lila-gelbe Farbpalette, abgerundete Karten, einen Maskottchen-Charakter, eine Fortschrittsanzeige oben und eine Tab-Navigation unten."
Während die KI deine Anfrage verarbeitet, kannst du ihren Denkprozess live mitverfolgen. Sie arbeitet im Hintergrund, solange der Tab offen ist, und benachrichtigt dich, wenn sie fertig ist. Ich musste nicht mal viele Details für den Q&A-Screen angeben – sie hat ihn im Kontext super ausgefüllt.
Das Verarbeiten meines Prompts dauerte ca. 4 Minuten und kostete 54 KI-Credits. Das Ergebnis ist eine interaktive App mit 4 Screens inklusive Flow, und der Stil entspricht genau meinen Vorstellungen.
Manuelles und KI-gestütztes Bearbeiten eines Screens
Jetzt möchte ich, dass ein richtiges Maskottchen entworfen wird, das „Unit 1“ in „Coddly“ umbenannt wird und beides auf allen Screens im Header zu sehen ist. Hier glänzt das Zwei-Wege-Editing von Figma Make:
i) Manuelles Point & Edit
Ich wähle die Option „Manual Edit“ unter der Chatleiste. Klicke einfach auf das (Text-)Element, das ich bearbeiten möchte, und tippe den neuen Text ein.
Manuelle Bearbeitungen in Figma Make kosten keine Credits. Sie sind perfekt für schnelle, punktuelle Änderungen auf einem Screen.
ii) Bearbeiten per KI-Prompt
Für komplexere Änderungen, die mehrere Screens betreffen, fragst du am schnellsten einfach direkt im Chatbot danach:
„Ersetze das aktuelle Logo im Start- und End-Screen durch das im Prompt angehängte Maskottchen-Bild. Mache außerdem alle Screen-Header identisch mit dem des Homescreens.“
*Hinweis: Das Maskottchen habe ich mit dem Text-to-Vector-Tool von Figma Weave entworfen.
Und in nur 4 Minuten und für 90 Credits war mein Maskottchen wie gewünscht auf allen 4 Screens platziert.
Einzigartige UIs erstellen mit Lovable >
Einen neuen Screen per Prompt hinzufügen
Jetzt, da wir mit den aktuellen Screens zufrieden sind, fügen wir einen neuen hinzu – sagen wir einen „Streak-Log“. Das können wir dem Figma App Maker einfach in natürlicher Sprache mitteilen. Er übernimmt automatisch die Logik und das Design der bestehenden Screens; diesmal ohne Duolingo-Referenz.
„Füge einen Screen für ‚Streak-Log und Herausforderungen‘ im Stil der bestehenden App hinzu. Er soll über das Zielscheiben-Icon in der Navbar erreichbar sein.“
Das Ganze war in 2 Minuten erledigt, kostete 56 Credits und passt perfekt.
Man merkt schnell, wie viel Zeit Vibe Coding in Figma Make beim Erstellen von Gerüsten, Screen-UIs und deren Verknüpfung im Vergleich zum manuellen Aufbau spart.
Ich habe die besten Vibe-Coding-Tools von 2026 getestet >
Interaktionen im Preview-Modus testen
Bevor du das Backend und APIs anbindest und die App veröffentlichst, solltest du die Interaktionen im Figma Make Preview-Modus testen. Klicke dazu einfach auf das Play-Icon oben rechts, und es öffnet sich ein neues Vorschaufenster.
In meiner Vorschau funktionieren die Interaktionen super: Der Flow stimmt, Buttons reagieren wie gewollt, die Richtig-/Falsch-Zustände im Q&A passen und die Mikro-Animationen machen Spaß. Die Vorschau kostet dich natürlich keine Credits.
Du kannst den Vorschau-Link mit jedem teilen oder die App direkt über die Option „Publish“ im Header als live gehostete App bereitstellen.
Vorschau meiner Coddly-App von Figma Make ansehen >
Figma Make App als Code exportieren
Mit der fertigen 5-Screen-App von Coddly und getesteten Interaktionen ist der nächste logische Schritt die Übergabe an die Entwicklung. Figma Make bietet dir dafür zwei Wege.
Erstens: Wechsle einfach in die Code-Ansicht und klicke auf das Download-Icon. Du erhältst sofort eine ZIP-Datei mit allen Code-Dateien. Darin befindet sich ein sauberes React + TypeScript-Projekt mit Tailwind CSS, Vite-Konfiguration und jedem Screen als eigene Komponente (Home.tsx, Lesson.tsx, Celebration.tsx, StreakAndChallenges.tsx). Gemeinsame Elemente wie die BottomNav und der Header werden automatisch ausgelagert. Bilder sind gebündelt, Routen eingerichtet. Einfach in VS Code öffnen und starten.
Zweitens: Die integrierten IDE-Schnittstellen von Figma Make für GitHub und Supabase. Damit kannst du direkt aus dem Browser in ein Repo pushen und ein echtes Backend anbinden.
Außerdem gibt es einen Figma MCP-Server, mit dem KI-Coding-Agents wie Claude Code oder Cursor den Kontext deiner Figma-Datei direkt auslesen können, was die Prompt-to-Code-Übergabe in Figma extrem präzise macht.
Falls du beim Bauen Produkt-Kontext integrieren musst: Die Connectors von Figma Make unterstützen Notion, Slack, Monday.com, Marvin und Sprig.
Kostenlose Figma-to-Code-KIs im Vergleich >
Meine Tipps für die Nutzung von Figma Make
Der Figma Make App-Builder ist extrem schnell und beeindruckend leistungsstark – wie das gesamte Figma AI-Toolkit. Allerdings verbraucht er schnell Credits, missversteht manchmal Prompts oder liefert generische Designs. Da dies bei fast jedem KI-App-Builder vorkommt, habe ich ein paar Tipps gesammelt, um das Beste aus Figma Make herauszuholen:
Sei im ersten Prompt extrem präzise: Figma Make liefert zu Beginn die besten Ergebnisse. Beschreibe Screen-Anzahl, Flow-Logik, UI-Stil, Farbpalette und Interaktionen direkt am Start. Je mehr Kontext im ersten Prompt steckt, desto weniger Credits zahlst du später für Korrekturen.
Und wenn du dir unsicher bist und erst brainstormen willst, nutze beim Setup den „Plan“-Modus statt des „Build“-Modus.
Nutze manuelle Bearbeitung für kleine Details: Point-and-Click-Editing kostet keine Credits. Hebe dir KI-Prompts für strukturelle Änderungen wie neue Screens, Layout-Anpassungen und Routing-Logik auf. Verschwende keine Credits für das Ändern eines einfachen Labels.
Frage die KI immer nur nach einer Sache auf einmal: Zu viele Änderungen in einem Prompt führen oft zu unvollständigen Ergebnissen oder Missverständnissen. Eine klare Anweisung pro Schritt hält Figma Make fokussiert und macht Änderungen leicht rückgängig.
Nutze den Code-Tab für schnelle Fixes: Kleine Fehler wie eine falsche Farbe oder falsches Padding lassen sich im Code-Tab oft schneller direkt beheben, als der KI einen neuen Prompt zu schreiben.
Erst Vibe Design, dann Vibe Code: Die Design-Ergebnisse von Figma Make wirken oft etwas generisch. Um das elegant, schnell und kostengünstig zu umgehen, empfehle ich, vor dem Coden auf Vibe Design mit Banani AI zu setzen.
Hier siehst du, wie Banani dieselben App-Screens mit denselben Prompts designt hätte.
Bananis Entwurf der Coddy-App ansehen >
Figma Make im Zusammenspiel mit Figma-KIs
Figma Make ist Teil des großen Figma AI-Ökosystems im Jahr 2026. Du kannst es mit anderen KI-Tools für einen lückenlosen Workflow kombinieren. Starte mit Figma Weave, um UI-Assets zu generieren, und setze sie mit dem Figma Agent auf dem Canvas zusammen. Wenn das Design steht, importierst du die Frames direkt in Figma Make, um den Code zu generieren und das Backend anzubinden. Anschließend bringt Figma Sites deine App mit nur einem Klick als Live-Website ins Netz.
Allerdings befindet sich dieser Figma-KI-Stack noch in der Beta-Phase und Credits sind schnell aufgebraucht. Wenn du eine spezialisierte Design-to-Code-KI mit tiefer Figma-Integration suchst, teste Banani AI.
FAQs zu Figma Make AI
Welches KI-Modell nutzt Figma Make?
Figma Make unterstützt verschiedene Modelle: Claude Sonnet 4.6 & Opus, Gemini 3 Flash & 3.1 Pro sowie GPT-5.5. Du kannst das Modell vor der Generierung frei wählen.
Welche Programmiersprache nutzt Figma Make?
Figma Make generiert React und TypeScript, gestaltet mit Tailwind CSS. Der Code wird als Standard-Vite-Projekt inklusive Komponenten, Routen und Styles exportiert.
Wie generiert Figma AI Code aus Design-Komponenten?
Figma Make analysiert deinen Prompt und alle visuellen Referenzen und nutzt das gewählte KI-Modell, um modularen Code zu erstellen, der genau auf das beschriebene Layout, die Interaktionen und das Styling passt.
Was ist der Unterschied zwischen Figma Make und Figma Sites?
Figma Make generiert funktionale Web-Apps aus Prompts für interaktive Prototypen mit echtem Code-Unterbau. Figma Sites hingegen veröffentlicht bestehende Figma-Designs als responsive Websites.
Was ist die beste Alternative zu Figma Make für App-Design?
Für Full-Stack-Vibe-Coding sind Lovable und Bolt.new starke Optionen. Suchst du jedoch ein UI-fokussiertes Prototyping-Tool, ist Banani AI die beste Alternative zu Figma Make.
Referenzen
[1] https://www.figma.com/make
[2] https://help.figma.com/hc/en-us/articles/31304412302231-Explore-Figma-Make
