AI design

Figma Make: Was es ist, wie es funktioniert, Credits und Limits (2026)14 min read

Reading Time: 8 minutesFigma Make ist das KI-Prompt-to-App-Tool von Figma. Hier erfahren Sie, was es ist, wie es Schritt für Schritt funktioniert, wer es verwenden kann, wie KI-Credits funktionieren, wie Code veröffentlicht und exportiert wird und wo seine Grenzen liegen.

Figma Make complete review: features, cost, updates, with Figma and Anima logos

Figma Make: Was es ist, wie es funktioniert, Credits und Limits (2026)14 min read

Reading Time: 8 minutes

Figma Make ist das KI-Prompt-to-App-Tool von Figma. Sie beschreiben, was Sie wollen, oder beginnen mit einem Figma-Design, und es erstellt einen funktionierenden Prototyp oder eine Web-App, die Sie in der Vorschau anzeigen, im Chat verfeinern, im Code bearbeiten und veröffentlichen können. Es befindet sich in Figma als dedizierte Make-Datei, sodass Ihre Designs und Bibliotheken als Kontext verwendet werden können. Es richtet sich an Designer, Produktmanager und alle, die eine Idee in etwas verwandeln möchten, das Menschen anklicken können.

Die Fakten wurden am 1. November 2026 anhand der Figma Make-Seite und des Figma-Hilfecenters überprüft. Pläne, Credits und Funktionen ändern sich häufig. Überprüfen Sie daher vor dem Kauf die aktuellen Details in Figma.

In diesem Leitfaden wird erklärt, was Figma Make ist, wie es Schritt für Schritt funktioniert, welche Funktionen wichtig sind, wer es nutzen kann, wie KI-Credits funktionieren, wie man veröffentlicht und exportiert und wo die Grenzen liegen. Wenn Sie zwischen Werkzeugen wählen, sind unsere Vergleich zwischen Figma Make und Anima Playground deckt Alternativen ab.

Was ist Figma Make?

Figma beschreibt Figma Make als ein KI-gesteuertes Prompt-to-App-Tool, mit dem Sie Ideen und bestehende Figma-Designs als funktionale Prototypen, Web-Apps und interaktive Benutzeroberfläche zum Leben erwecken können. Sie arbeiten in einem Chat neben einer Live-Vorschau und alles, was Sie erstellen, ist codegestützt, sodass Sie zwischen der Vorschau, Point-and-Click-Bearbeitungen und dem Code selbst wechseln können.

Figma stellte Make auf der Config 2025 vor und es hat sich von einer Einzelkomponenten-Idee zu einem vollständigen Produkt mit Planmodus, einem Code-Editor, Backends, Veröffentlichungen und Integrationen entwickelt. Es unterscheidet sich von Figma Design: Sie erstellen eine Make-Datei auf die gleiche Weise wie andere Figma-Dateien, indem Sie in Ihren Entwürfen die Schaltfläche Make verwenden.

Figma Make-Chat-Eingabeaufforderung, die neben dem generierten interaktiven Audio-Einstellungsfeld mit einem Equalizer nach einem Modal für Wiedergabeeinstellungen fragt
Bild: Figma. Eine Eingabeaufforderung und ein angehängtes Design werden zu einem interaktiven Einstellungsfeld.

Was kann man mit Figma Make bauen?

  • Ein anklickbarer Prototyp eines Ablaufs oder einer Funktion zum Testen mit Benutzern.
  • Eine interaktive Version eines vorhandenen Figma-Designs mit Übergängen und Logik.
  • Eine kleine Web-App oder ein internes Tool mit einem Backend für Daten und Anmeldung.
  • Eine Landingpage oder Microsite, die Sie unter einer öffentlichen URL veröffentlichen können.

Wie Figma Make funktioniert, Schritt für Schritt

  1. Erstellen Sie eine Make-Datei. Öffnen Sie im Figma-Dateibrowser Ihre Entwürfe und klicken Sie auf Make in der oberen rechten Ecke. Sie können auch mit einer Vorlage beginnen oder ein GitHub-Repository klonen.
  2. Schreiben Sie eine Aufforderung. Beschreiben Sie im Chat, was Sie aufbauen möchten. Sie können tippen oder diktieren. Machen Sie genaue Angaben zum Benutzer, zur Hauptaufgabe und zu den Bildschirmen.
  3. Kontext hinzufügen. Hängen Sie Figma-Designs an oder fügen Sie Frames in den Chat ein, bringen Sie Stilkontext aus einer Figma-Bibliothek (kostenpflichtige Pläne), fügen Sie ein Backend hinzu, verbinden Sie Tools über MCP-Konnektoren oder lassen Sie Make das Web durchsuchen oder eine URL abrufen.
  4. Planen Sie zuerst, wenn Sie die Kontrolle haben möchten. Bei kostenpflichtigen Plänen generiert der Planmodus einen strukturierten Plan, den Sie bearbeiten können, bevor Code geschrieben wird.
  5. Sehen Sie sich die Vorschau an. Make erstellt die App und zeigt sie live. Klicken Sie sich so durch, wie es ein Benutzer tun würde.
  6. Verfeinern. Chatten Sie weiter, verwenden Sie Point and Edit, um bestimmte Elemente zu ändern, Anmerkungen hinzuzufügen und diese zusammen zu versenden, oder öffnen Sie den Code-Editor und ändern Sie den Code direkt.
  7. Teilen oder veröffentlichen. Teilen Sie die Datei für Feedback mit Kommentaren, kopieren Sie die Vorschau als Ebenen zurück nach Figma Design, veröffentlichen Sie sie unter einer öffentlichen URL oder laden Sie den Code herunter.
Figma Make-Arbeitsbereich mit dem KI-Chat auf der linken Seite, in dem Sie nach einem Mediaplayer gefragt werden, und der Live-App-Vorschau auf der rechten Seite
Bild: Figma. Aufforderung im Chat links, Live-Vorschau der generierten App rechts.

Ein praktischer Tipp aus den Figma-Dokumenten: Hängen Sie einen Rahmen oder eine Komponente an, anstatt einen Link zu Ihrer Figma-Datei einzufügen. Make liest kein Design von einer URL und ein eingefügter Link kann zu unerwarteten Ausgaben führen.

Wichtige Figma Make-Funktionen

Besonderheit Was es bewirkt
Planmodus Erstellt vor Beginn der Generierung einen bearbeitbaren Plan, sodass Sie zunächst die Absicht klären können.
Anhänge Ermöglicht das Anhängen von Designs, Bildern, Videos, Audio-, Textdateien und PDFs als Orientierungshilfe für das Modell.
Zeigen und bearbeiten Klicken Sie in der Vorschau auf ein Element, um es neu zu gestalten, auszutauschen oder eine Änderung zu veranlassen.
Anmerkungen Wählen Sie mehrere Elemente aus, beschreiben Sie die Änderungen und senden Sie sie gleichzeitig an das Modell.
Code-Editor Sehen Sie sich den generierten Code an und bearbeiten Sie ihn, fügen Sie Ihre eigenen Dateien hinzu und fügen Sie Richtlinien hinzu, denen Make folgt.
Make-Kits Synchronisieren Sie npm-Pakete, Bibliotheksstile und Richtlinien, um Prototypen mit höherer Wiedergabetreue zu erstellen.
MCP-Anschlüsse Ziehen Sie Kontext aus externen Tools wie Dokumenten und Aufgaben ab.
Versionsgeschichte Vorschau, Favorit oder Wiederherstellung früherer Versionen, KIs oder manueller Versionen.
Kommentare und Handy Sammeln Sie Feedback zu einem Prototyp und sehen Sie es sich auf einem Telefon an.
Vorlagen und benutzerdefinierte Fähigkeiten Verwenden Sie einen bewährten Workflow wieder oder verpacken Sie Ihre eigenen Anweisungen für Make.
Figma Make zeigen und bearbeiten: ein ausgewähltes Überschriftenelement mit einem Eingabeaufforderungsfeld, in dem Sie aufgefordert werden, den Zeitstempel zu animieren, wenn ein Lied abgespielt wird
Bild: Figma. Mit „Zeigen und Bearbeiten“ können Sie ein Element in der Vorschau auswählen und eine Änderung veranlassen.

Figma Make vs. Figma Codeschichten vs. Figma Sites

Diese drei geraten durcheinander. Figma Make arbeitet in einer dedizierten Datei, in der Sie eine App erstellen und veröffentlichen. Mit Codeebenen können Sie interaktive Ideen neben Ihren Designs auf der Figma Design-Leinwand erkunden. Sehen Sie sich unseren Leitfaden an Figma-Codeebenen und Spezifikationen. Figma Sites dient zum Veröffentlichen von Websites, die in Figma erstellt wurden. Wählen Sie Make, wenn sich die Ausgabe wie eine App verhalten soll, und Codeebenen, wenn Sie neben Ihrem statischen Design ein interaktives Element wünschen.

Wer kann Figma Make nutzen und was kosten AI-Credits?

Figma Make ist für die Pläne Starter (mit Einschränkungen), Professional, Organization, Enterprise, Bildung (Hochschul- und Bootcamp-Benutzer) und Regierungspläne verfügbar. Ihr Sitzplatz entscheidet darüber, was Sie tun können:

Sitz Was Sie in Figma Make tun können
Voll Alles: Make-Dateien in Ordnern und Teams erstellen, teilen, veröffentlichen, den Code-Editor verwenden und Code exportieren.
Entwickler Probieren Sie Make in Entwürfen aus und exportieren Sie Code.
Zusammenarbeit und Ansicht Probieren Sie Make in Entwürfen aus.

Make läuft mit KI-Credits. Jeder Sitzplatz beinhaltet Credits, diese werden monatlich zurückgesetzt und können nicht geteilt oder übertragen werden. Aus der Dokumentation von Figma im Oktober 2026:

Plan (Vollplatz) AI-Credits pro Monat
Starter 500 (plus ein Tageslimit von 150)
Professional 3,000
Organization 3,500
Enterprise 4,250

Wie viele Credits eine Eingabeaufforderung verbraucht, hängt vom gewählten Modell und der Aufgabe ab. Die eigenen Beispiele von Figma, die auf dem Standardmodell im Februar 2026 basieren, sehen eine kleine Änderung vor, z. B. das Aktualisieren von Schriftarten bei etwa 30 oder mehr Credits und die interaktive Gestaltung eines angehängten Designs bei etwa 75 oder mehr. Die Wahl eines leichteren Modells für kleine Änderungen und die Verwendung des Planmodus für große Builds sorgt dafür, dass Ihre Credits lange erhalten bleiben.

Veröffentlichung, Backends und Umsetzung Ihrer Arbeit

Veröffentlichen

Klicken Sie auf „Veröffentlichen“, legen Sie einen Titel fest und Make gibt Ihnen eine öffentliche URL, die wie folgt aussieht: three-random-words.figma.site. Sie können eine benutzerdefinierte Domäne mit unterstützten Plänen verbinden. Veröffentlichte Apps werden auf Amazon Web Services mit Routing über Cloudflare gehostet, sie werden standardmäßig nicht von Suchmaschinen indiziert und Make verfügt über kein integriertes Analyse-Dashboard, obwohl Sie in den Einstellungen eine Google Analytics-ID hinzufügen können.

Figma Make-Schaltfläche „Veröffentlichen“ hervorgehoben über einem Raster veröffentlichter Website-Designs
Bild: Figma. Veröffentlichen Sie eine Make-App unter einer öffentlichen URL.

Backend

Um Daten zu speichern und die Anmeldung zu unterstützen, können Sie Make bitten, ein Payload-basiertes Backend mit einer Datenbank, Dateispeicherung, Authentifizierung und einem Admin-Panel zu erstellen, oder Ihr eigenes Supabase-Projekt über die Make-Einstellungen verbinden.

Figma Make-App-Vorschau neben einem CMS-Panel, das Ereignisse mit Titeln und Daten auflistet und ein Backend zeigt, das Daten speichert
Bild: Figma. Ein Backend mit einem CMS ermöglicht einer Make-App das Speichern und Verwalten von Daten.

Code exportieren

Benutzer mit einem Voll- oder Entwicklerplatz können alle Dateien in einer Make-Datei als ZIP über Dateiaktionen auf der Registerkarte „Dateien“ herunterladen. Behandeln Sie den Download als Prototyp-Codebasis: Führen Sie ihn lokal aus, überprüfen Sie ihn und überarbeiten Sie ihn, bevor Sie darauf aufbauen.

Figma Make-Chat-Panel mit 15 Codeänderungen, Schaltflächen „Änderungen überprüfen“ und „PR erstellen“ sowie einem Zweigmenü mit „Neuen Zweig erstellen“.
Bild: Figma. Überprüfen Sie die Codeänderungen, die Make hervorgebracht hat, und arbeiten Sie an Zweigen.

Verschieben Sie das Design zurück nach Figma

Bei kostenpflichtigen Plänen können Sie die aktuelle Vorschau als Designebenen kopieren und in Figma Design einfügen. Die Ebenen können bearbeitet werden, es handelt sich jedoch um eine Momentaufnahme. Sie sind nicht interaktiv, nicht mit der Make-Datei verknüpft und nicht automatisch an Ihr Designsystem gebunden.

Figma Make-Grenzwerte, die Sie kennen sollten, bevor Sie beginnen

  • Für die meisten Funktionen ist eine Volllizenz in einem kostenpflichtigen Plan erforderlich, und bei großen Builds kann das Guthaben schnell aufgebraucht sein.
  • Es ist für Prototypen und einfache Apps konzipiert. Produktionssoftware benötigt weiterhin technische Überprüfung, Tests, Sicherheit und Wartung.
  • Änderungen, die Sie an kopierten Ebenen in Figma Design vornehmen, fließen nicht in die Make-Datei zurück.
  • Wenn Sie das Modell auffordern, Supabase zu verwenden, und die Integration nicht verbunden ist, kann anstelle einer funktionierenden Verbindung Scheincode generiert werden.
  • SEO-Kontrollen und -Analysen sind für veröffentlichte Websites minimal.
  • Sie können ihm keinen Figma-Link übergeben und erwarten, dass er die Datei liest. Befestigen oder kleben Sie den Rahmen ein.

Wenn Sie echten Front-End-Code, einen Website-Klon oder eine App benötigen, die außerhalb von Figma läuft, schauen Sie sich eine Alternative an, z Anima Playground. Wir vergleichen sie ehrlich Figma Make vs. Anima Playground.

Schnelle Ideen für Figma Make

Gezielte Eingabeaufforderungen, die den Benutzer, die Aufgabe und die Zustände benennen, führen zu besseren ersten Ergebnissen. Versuchen Sie Folgendes:

  • „Erstellen Sie einen dreistufigen Onboarding-Ablauf für eine Budgetierungs-App. Zeigen Sie eine Fortschrittsanzeige an, validieren Sie jedes Feld und schließen Sie mit einem Erfolgsbildschirm ab.“
  • „Verwandeln Sie den beigefügten Preisrahmen in eine interaktive Seite. Fügen Sie auf jeder Plankarte einen monatlichen und jährlichen Umschalter und einen Hover-Status hinzu.“
  • „Erstellen Sie ein Support-Dashboard für einen Agenten, der Tickets selektiert. Fügen Sie Filter, einen Leerstatus und einen Ladestatus hinzu.“
  • „Erstellen Sie einen mobilen Checkout-Prototyp mit Gast-Checkout, Adressvalidierung und einer Bestellbestätigung.“

Erstellen Sie eine funktionierende App mit Anima Playground

Bevorzugen Sie eine echte Website oder App, die Sie exportieren und versenden können? Beschreiben Sie es und Anima wird es erstellen.

Figma Make-FAQ

Was ist Figma Make?

Figma Make ist das KI-gesteuerte Prompt-to-App-Tool von Figma. Es verwandelt eine Eingabeaufforderung oder ein vorhandenes Figma-Design in einen funktionalen Prototyp, eine Web-App oder eine interaktive Benutzeroberfläche, die Sie in der Vorschau anzeigen, im Chat oder im Code bearbeiten und veröffentlichen können.

Ist Figma Make kostenlos?

Mit Starter-Plänen können Sie Figma Make kostenlos mit Limits erkunden, darunter 500 AI-Credits pro Monat und ein Tageslimit. Volle Plätze bei kostenpflichtigen Plänen erhalten mehr Credits und Funktionen wie Teambibliothekskontext, Planmodus, Teilen und Veröffentlichen. Pläne ändern sich, schauen Sie sich also die Preise von Figma an.

Wie verwende ich Figma Make?

Klicken Sie in Ihren Figma-Entwürfen auf Make, schreiben Sie eine Eingabeaufforderung im Chat, hängen Sie Designs oder Stilkontext an, falls vorhanden, senden Sie ihn und verfeinern Sie das Ergebnis mit Chat, Zeigen und Bearbeiten oder dem Code-Editor. Dann teilen, veröffentlichen oder exportieren Sie es.

Kann Figma Make Code exportieren?

Ja. Benutzer mit einem Voll- oder Entwicklerplatz können den Code einer Make-Datei als ZIP über die Registerkarte „Dateien“ herunterladen. Es wird am besten als Prototyp-Codebasis behandelt, die Sie vor der Verwendung in der Produktion überprüfen.

Kann ich eine Figma Make-App veröffentlichen?

Ja. Volle Plätze können unter einer öffentlichen figma.site-URL veröffentlichen, und Starter-Benutzer können nur dann öffentlich veröffentlichen, wenn sie auch unter Figma Community veröffentlichen. Sie können bei unterstützten Plänen eine benutzerdefinierte Domäne hinzufügen und veröffentlichte Apps werden standardmäßig nicht von Suchmaschinen indiziert.

Was ist der Unterschied zwischen Figma Make und Anima Playground?

Figma Make erstellt Prototypen und Apps innerhalb des Figma-Ökosystems. Anima Playground ist ein eigenständiger Arbeitsbereich, der mit Eingabeaufforderungen, Figma-Designs, URLs oder Bildern beginnt und bearbeitbares HTML oder React erzeugt, das Sie exportieren, weitergeben und veröffentlichen können. Weitere Informationen finden Sie in unserem Vergleich.

|

Co-founder & CEO