Was ist Figma Make?
Figma Make ist ein KI-App-Builder, der direkt in die Plattform von Figma integriert ist und einen Text-Prompt nimmt und daraus eine funktionierende, codegestützte Frontend-Anwendung erstellt, ohne dass Sie die Figma-Arbeitsumgebung verlassen oder ein separates Tool einrichten müssen.
Es generiert React-Anwendungen mit vollem Zugriff auf den Quellcode, automatischer Versionshistorie und einer Live-Preview-URL, und es hebt sich von anderen KI-Buildern dadurch ab, dass Sie das zugrunde liegende Modell auswählen können, das die Arbeit erledigt: Claude Sonnet 4.6, Gemini 3 Flash, Gemini 3.1 Pro oder GPT-5.5, anstatt auf ein einziges Modell festgelegt zu sein, ohne Einblick darin, was gerade läuft.
Das Ergebnis ist keine Mockup-Datei oder Designdatei, sondern echter, bearbeitbarer Code, den Sie prüfen, anpassen und an GitHub übertragen können.
Für wen ist Figma Make geeignet?
- Produktdesigner, die bereits Figma nutzen. Make sitzt in dem Tool, in dem Sie bereits arbeiten, sodass es keine neue Plattform zu lernen gibt und kein zusätzliches Abo auf das draufkommt, was Sie ohnehin schon bezahlen.
- Nicht-technische Gründer, die schnell eine Demo brauchen. Eine komplexe App mit mehreren Bildschirmen, rollenbasierter Zugriffssteuerung und realistischen Daten entsteht in unter 10 Minuten, was schnell genug ist, um sie in ein erstes Investorengespräch mitzunehmen.
- Produktmanager, die zeigen statt erzählen müssen. Figma Make produziert etwas, das Sie tatsächlich einem Stakeholder zeigen und gemeinsam durchgehen können, statt ein PDF mit Screens zu präsentieren.
- Entwickler, die ein funktionierendes Grundgerüst wollen. Der generierte Code ist sauberes React mit TypeScript, und der vollständige Quellcode ist im kostenlosen Plan zugänglich, was ihn zu einem echten Ausgangspunkt statt zu einem Wegwerf-Prototypen macht.
Figma Make Vor- und Nachteile
- Erstellt komplexe Multi-Screen-Apps aus einem einzigen Prompt
- Der kostenlose Plan enthält vollen Zugriff auf den Quellcode
- Wählen Sie Ihr KI-Modell: Claude, Gemini oder GPT
- Automatische Versionshistorie speichert jede Build-Iteration
- Rollenbasierte Authentifizierung wird ohne zusätzliche Eingabe generiert
- GitHub- und Supabase-Integrationen sind nativ eingebaut
- Visueller Editor und Code-Editor in einer Arbeitsumgebung verfügbar
- Erste Builds kommen mit Code-Warnungen
- Das monatliche kostenlose Credit-Limit ist schnell aufgebraucht
- Eine benutzerdefinierte Domain erfordert einen kostenpflichtigen Figma-Plan
Bewertungsaufschlüsselung
Die unten stehenden Bewertungen spiegeln wider, was Figma Make derzeit in der öffentlichen Beta liefert. Für ein Produkt in diesem Stadium ist die Ausgabequalität deutlich besser, als ich erwartet hatte, und für Teams, die bereits einen kostenpflichtigen Figma-Plan haben, ist der Wert kaum zu bestreiten, da dafür nichts zusätzlich zu bezahlen ist.
| Funktion | Punktzahl (von 10) | Warum diese Punktzahl |
|---|---|---|
| Benutzerfreundlichkeit | 9.5 | Kein Setup, Prompt-first-Einstieg, zwei Bearbeitungswege und ein 8-minütiger Build-Zyklus machen den Einstieg in diesen KI-Builder zu einem der unkompliziertesten. |
| Funktionen & Funktionsumfang | 9.8 | Rollenbasierte Authentifizierung, Stripe-Zahlungs-UI, Multi-Chart-Reporting, Admin-Konsole, Modellauswahl und eine vollständige REST-API-Referenz, alles aus einem einzigen Prompt generiert. |
| Design & Anpassbarkeit | 9.4 | Die standardmäßige visuelle Ausgabe ist sauber und professionell, mit einem klickbaren visuellen Editor und vollem Zugriff auf den Quellcode sogar im kostenlosen Plan. |
| Preis-Leistungs-Verhältnis | 9.4 | Voller Codezugriff im kostenlosen Tarif ist wirklich ungewöhnlich, und Nutzer mit kostenpflichtigem Plan erhalten Make in einem bestehenden Figma-Abo statt als separaten Posten. |
| Leistung & Zuverlässigkeit | 9.9 | Acht Minuten bis zu einer mehrteiligen, rollenbewussten Anwendung mit Stripe-UI und Admin-Konsole sind das schnellste Verhältnis von Build-Zeit zu nutzbarer Ausgabe, das ich getestet habe. |
| Gesamt | 9.6 | Ein herausragendes Beta-Produkt, das bereits viele etablierte KI-App-Builder bei Ausgabequalität und Funktionstiefe übertrifft. |
Figma Make Funktionen
- Prompt-zu-App-Build in unter 10 Minuten
- Modellauswahl mit Claude, Gemini und GPT
- Rollenbasierte Benutzer-Authentifizierung automatisch generiert
- Klickbarer visueller Editor mit Inline-Style-Steuerungen
- Voller React-Quellcode auch im kostenlosen Tarif bearbeitbar
- GitHub- und Supabase-Integrationen ohne zusätzliche Konfiguration verfügbar
- Ein-Klick-Veröffentlichung auf einer figma.site-Subdomain
Mein ehrlicher Figma Make-Test: Was ich nach dem Ausprobieren festgestellt habe
Der Startbildschirm steht Ihnen sofort nicht im Weg
Der Startbildschirm ist ein einzelnes Prompt-Feld mit einem kurzen Slogan: „Make your ideas real with AI. Start with a design and prompt your way to a functional prototype, fast.“ Unter dem Eingabefeld erscheinen drei vorgeschlagene Startpunkte:
- Onboarding flow
- Data dashboard
- Gradient gallery
Sie können alle drei ignorieren und einfach irgendetwas eingeben.
Ich habe diesen Prompt vollständig eingegeben:
“Create a property management platform for landlords and tenants. Include user authentication, property listings, lease management, rent payments, maintenance requests, document uploads, messaging, notifications, admin dashboard, reporting, Stripe integration, PostgreSQL database, REST API, responsive design, and deployment instructions. The application should be production-ready and scalable.”
Das Tool hat ihn ohne Reibung akzeptiert und ist direkt mit dem Erstellen begonnen. Kein Projekttyp-Selektor, keine Vorlagen-Galerie, keinerlei Architektur-Vorkonfiguration.
Fazit: Der Einstieg ist so reibungslos wie bei kaum einem anderen KI-Builder, den ich getestet habe. Der Kompromiss ist, dass ein vager Prompt ohne klare Struktur zu einer vagen Ausgabe führt. Die Obergrenze dessen, was Sie erhalten, wird vollständig davon bestimmt, was Sie eingeben.
Die Anmeldung geht schnell und stellt keine Paywall zwischen Sie und das Ergebnis
Wenn Sie vor der Anmeldung auf den Pfeilbutton klicken, erscheint ein „Welcome to Figma“-Modal. Die zwei Optionen:
- Weiter mit Google (ein Klick, unter 10 Sekunden)
- Weiter mit E-Mail (E-Mail eingeben, verifizieren, insgesamt unter 30 Sekunden)
Beide Wege führen Sie in die Figma Make-Arbeitsumgebung, während Ihr Build bereits in der Warteschlange ist. Es gibt an dieser Stelle keinen Plan-Auswahlbildschirm, keine Kreditkartenabfrage und keine Upgrade-Sperre. Der kostenlose Starter-Plan wird automatisch aktiviert.
Wenn Sie bereits ein Figma-Konto haben, erscheint das Modal nicht, und Sie landen direkt im Builder.
Der Build läuft 8 Minuten und sagt Ihnen genau, was er tut
Die Arbeitsumgebung ist links in eine Chat-Spalte und rechts in eine Live-Preview aufgeteilt. Die Vorschau zeigt einen Platzhalter mit dem Text „Building your idea…“ gefolgt von „Working out the details…“, während das Tool voranschreitet.
Was das von einem generischen Ladescreen unterscheidet, ist das Reasoning-Panel in der Chat-Spalte, das das Denken des Tools in Echtzeit protokolliert.
Während meines Builds zeigte das Reasoning-Panel:
- Das Tool rief vor dem Schreiben einer einzigen Codezeile ein Theme-Tool auf
- Es protokollierte „Worked with 3 files“ während der Verarbeitung des Prompts
- Das Reasoning-Protokoll beschrieb seinen vollständigen Ansatz: Es kartierte die verbleibenden Funktionen (Property-Filterung, Mietvertragsverwaltung, Zahlungsverlauf, Wartungsanfragen, Messaging, Benachrichtigungen und Admin-Dashboards), erklärte, dass es die React-Komponente zuerst mit Typdefinitionen strukturieren würde, dann realistische Mock-Daten aufbauen und anschließend Navigation und Zustandsverwaltung für rollenbasierte Ansichten in allen Bereichen umsetzen würde
- Unter dem Reasoning erschien eine Statusmeldung: „Writing the component structure…“
Diese Abfolge ist wichtig. Das Tool plante Typdefinitionen, bevor es irgendeine UI schrieb, dann fügte es realistische Mock-Daten hinzu und baute danach die Navigation darum herum auf. Das ist ein strukturierter Ansatz, keine zufällige Generierung.
Build-Zeit: 15:58 Uhr bis 16:06 Uhr. Acht Minuten.
Der Modellauswahlschalter unten im Chat-Panel ermöglicht es Ihnen, die KI vor dem Start auszuwählen oder zwischen Builds zu wechseln:
| Modell | Beschreibung |
|---|---|
| Default | Von Figma empfohlen (konkretes Modell nicht offengelegt) |
| Claude Sonnet 4.6 | Ausgewogen, effizient |
| Gemini 3 Flash | Schnell, iterativ |
| Gemini 3.1 Pro | Tiefgehend, kreativ |
| GPT-5.5 | Leistungsfähig, schnell |
Von einem schnellen, iterativen Modell zu einem tiefergehenden zu wechseln, ohne das Tool zu verlassen oder von vorne zu beginnen, ist ein bedeutender Workflow-Vorteil.
Neben dem Modellauswahlschalter gibt es einen Build/Plan-Modus-Umschalter:
| Modus | Was er tut |
|---|---|
| Build | Erstellt und iteriert während des Prozesses |
| Plan | Stimmt sich bei komplexen Arbeiten ab und plant die Architektur, bevor Code geschrieben wird |
Für einen so detaillierten Prompt wie meinen hätte der Plan-Modus wahrscheinlich einen saubereren ersten Build mit weniger Warnungen erzeugt. Ich habe den Build-Modus verwendet und die Warnungen in einem zweiten Durchgang behoben.
Das fertige Ergebnis nannte sich PropVault und strahlte genau diese Sicherheit aus
Die fertige Anwendung, die das Tool ohne Aufforderung PropVault nannte, ist eine Property-Management-Plattform mit mehreren Bildschirmen, einer einheitlichen visuellen Identität, einer dunkelblauen Seitenleiste, klarer Typografie und kontextbezogenem Social Proof auf dem Login-Bildschirm. Der Login-Bildschirm zeigt:
- Ein dunkles linkes Panel mit dem PropVault-Logo, dem Slogan („Property management, simplified.“) und drei Mock-Statistiken: 86 verwaltete Objekte, 1,240 aktive Mieter, $2.1M monatlich eingenommen
- Ein rechtes Panel mit den Tabs Sign In / Create Account, vorausgefüllter E-Mail-Adresse (marcus@propvault.io) und Passwort sowie drei Rollen-Auswahlbuttons: Landlord, Tenant, Admin
- Einen Fußzeilenhinweis: „Demo: click a role above, then sign in“
Jeder Bildschirm in der linken Navigation öffnet einen funktionierenden, gefüllten Screen. Folgendes wurde in der gesamten Anwendung erstellt:
| Bildschirm | Was erstellt wurde |
|---|---|
| Dashboard | Vier KPI-Karten (monatlicher Umsatz, Belegungsrate, offene Anfragen, Gesamtobjekte), 12-Monats-Liniendiagramm Umsatz vs. Ausgaben mit einem „Live“-Badge, Feed mit aktuellen Aktivitäten, Warnhinweis zu überfälligen Zahlungen mit der Schaltfläche Send Reminders, auslaufende Mietverträge mit einzelnen Renew-Schaltflächen |
| Properties | Objektliste mit Filterung |
| Leases | Vertragsverwaltung mit Statusverfolgung |
| Payments | Zahlungshistorie-Tabelle mit Status-Badges, sichere Stripe-gestützte Zahlungs-Modal |
| Maintenance | Kanban-Board (Open / In Progress / Completed) mit Prioritäts-Badges und Zuweisung von Dienstleistern; Formular zum Einreichen durch Mieter |
| Messages | Zweispaltige Chat-UI mit realistischen Gesprächsverläufen und Senden-bei-Enter-Unterstützung |
| Documents | Drag-and-drop-Uploadbereich, Kategorie-Filter-Pills, Datei-Grid mit Hover-Aktionen |
| Reports | Balkendiagramm, horizontales Belegungsdiagramm, Wartungs-Kreisdiagramm, KPI-Metrik-Tabelle, Datumsbereich-Umschalter (3m / 6m / 12m) |
| Admin Console | Benutzerverwaltungstabelle, Panel für Systemzustand und Integrationen, vollständige REST-API-Referenz, Bereitstellungsanweisungen (PostgreSQL, Docker, Vercel, Stripe-Webhook-Konfiguration) |
Die Daten auf allen Bildschirmen sind simuliert. Die Backend-Verbindungen müssen konfiguriert werden, bevor etwas echte Daten speichert oder abruft. Was Sie nach acht Minuten erhalten, ist ein frontendseitiges Gerüst in Produktionsqualität mit genug Bildschirmabdeckung und Datendichte, um es als funktionierende Demo vorzuführen.
Alle drei Benutzerrollen sind korrekt abgegrenzt, und der Detailgrad ist beeindruckend
Rollenbasierte Zugriffskontrolle ist der Bereich, in dem KI-Builder am häufigsten Abstriche machen. Figma Make tat das nicht. Jede Rolle meldet sich in einer völlig anderen Erfahrung an, mit eigener Navigation, eigener Datenansicht und eigenem Umfang.
| Rolle | Navigationspunkte | Dashboard-Fokus |
|---|---|---|
| Landlord (Marcus Hewitt) | Dashboard, Properties, Leases, Payments, Maintenance, Messages, Documents, Reports | Plattformweite Kennzahlen über alle Objekte und Mieter hinweg |
| Tenant (Priya Nair) | Dashboard, Leases, Payments, Maintenance, Messages, Documents | Persönliche Kennzahlen nur für diesen Mieter |
| Admin (Cassandra Voss) | Alle Landlord-Elemente plus Admin | Dasselbe Dashboard wie der Landlord mit Zugriff auf die Admin-Konsole |
Spezifische Details zum Landlord-Dashboard:
- Monthly Revenue: $41,900 (Apr 2024, +2.8% vs last month)
- Occupancy Rate: 88% (76/86 units, +1.2% vs last month)
- Open Requests: 5 maintenance tickets
- Total Properties: 6 properties, 86 total units
- Revenue vs. Expenses chart spanning May to April (12 months)
- Recent activity feed: rent received, overdue payments, new maintenance request, expiring lease, tenant message
- Alert banner: “2 overdue payments require attention” with Tomás Reyes ($2,100) and Fatima Al-Sayed ($2,650) named, and a Send Reminders action button
Details zum Tenant-Dashboard (Priya Nair):
- Next Payment: $1,850, due April 1, 2024
- Lease Status: Active, ends August 31, 2024
- Open Requests: 1 (HVAC repair pending)
- Messages: 2 unread
- Payment history showing Maple Grove #4B, $1,850, Paid
- Maintenance request showing “HVAC not cooling,” In Progress badge, dated March 28, 2024
Wenn im Tenant-Modus auf der Payments-Seite auf „Pay Now“ geklickt wird, öffnet sich ein Stripe-gebrandetes Modal:
- Header: “Secure Payment. Powered by Stripe.”
- Payment line: April Rent, Maple Grove #4B, $1,850.00
- Card Number field (pre-formatted)
- Expiry (MM/YY) and CVC fields
- Pay button pre-labelled: “Pay $1,850.00”
- Footer: “256-bit SSL encryption · PCI DSS compliant”
Admin Console (Cassandra Voss):
Die Admin Console hat vier Tabs (Users, System, API Docs, Deployment) und öffnet sich auf der Tabelle zur Benutzerverwaltung.
Jede Zeile hat Schaltflächen zum Bearbeiten und Entfernen. Oben rechts in der Tabelle befindet sich eine Invite User-Schaltfläche. Tomás Reyes ist korrekt als Delinquent markiert, was mit dem auf dem Landlord-Dashboard angezeigten Hinweis auf überfällige Zahlungen übereinstimmt.
Die Bearbeitung nutzt zwei parallele Werkzeuge, und beide sind kostenlos zugänglich
Nach Abschluss des Builds stehen gleichzeitig zwei Bearbeitungswege zur Verfügung, keiner davon hinter einem kostenpflichtigen Plan.
Weg 1: Visueller Editor
- Klicken Sie auf ein beliebiges Element in der Live-Vorschau, um es auszuwählen und eine schwebende Bearbeitungsleiste zu öffnen
- Die Bearbeitungsleiste enthält: Schriftfamilienauswahl, Schriftgröße (mit Minus- und Plus-Steuerung), fett, kursiv, Textausrichtung, Breitensteuerung, Abstände und Löschen des Elements
- Das ausgewählte Element wird gleichzeitig in das Chat-Eingabefeld übernommen, sodass das Anklicken eines Elements und anschließendes Tippen im Chat eine Änderungsanfrage sendet, bei der dieses Element bereits im Kontext ist
- Wenn Sie einen Container auswählen, wird oberhalb der Symbolleiste der genaue Komponententyp und die Verschachtelung angezeigt (zum Beispiel „div x 4“), wodurch präziser Layout-Kontext entsteht, ohne den Code zu öffnen
Die Verbindung zwischen dem visuellen Selektor und dem Chat-Eingabefeld ist der praktischste Teil dieses Bearbeitungsworkflows.
Sie müssen sich nicht zwischen beiden entscheiden. Sie klicken, um das Element zu identifizieren, und tippen dann im Chat, was geändert werden soll, und die KI setzt es mit vollem Bewusstsein dafür um, welches Bauteil Sie ausgewählt haben.
Weg 2: Code-Editor
Wenn Sie auf das Code-Symbol oben in der Arbeitsumgebung klicken, öffnet sich der vollständige React-Quellcode. Die Dateistruktur:
src/
app/
components/
App.tsx (1,300+ lines)
styles/
fonts.css
globals.css
index.css
tailwind.css
theme.css
guidelines/
ATTRIBUTIONS.md
default_shadcn_theme.css
package.json
pnpm-workspace.yaml
postcss.config.mjs
vite.config.ts
App.tsx ist in benannte View-Funktionen organisiert (DashboardView, ReportsView, MaintenanceView und so weiter) mit Abschnittskommentaren, die jeden Bildschirm voneinander trennen.
Der Code ist lesbar, gut strukturiert und direkt im Browser bearbeitbar. Kein Download und keine externe IDE sind erforderlich. Dieser vollständige Quellcodezugriff ist im kostenlosen Plan verfügbar.
Änderungen, die über den visuellen Editor, den Chat oder den Code-Editor vorgenommen werden, fließen alle in dieselbe Live-Preview ein und werden sofort angezeigt.
Zehn-plus Warnungen im ersten Build, mit einem Klick korrekt behoben
Nach Abschluss des ersten Builds erschien unten im Chat-Panel ein Banner: “10+ warnings” mit einer “Fix for me” Schaltfläche und einem Schließen-Symbol.
Wenn man die Browser-Konsole öffnete, die über ein Konsolen-Symbol in der Arbeitsumgebung erreichbar ist, wurde die Ursache sichtbar: doppelte SVG-Gradienten-IDs in der Recharts-Charting-Bibliothek.
Die Ursache: Die Dashboard- und Reports-Bereiche registrierten dieselben generischen Gradientennamen (revGrad, expGrad) als SVG-Elemente. Recharts registriert Gradienten-IDs im SVG-Namensraum, sodass generische Namen aus mehreren Diagramminstanzen im selben Dokument kollidieren. Die Konsole zeigte eine lange Liste minimierter JavaScript-Referenzen, die alle auf diesen Konflikt zurückzuführen waren.
Ein Klick auf „Fix for me“ löste einen zweiten Build-Durchlauf aus. Das Tool identifizierte drei konkrete Probleme und setzte gezielte Korrekturen um:
- Dashboard AreaChart: Gradienten-IDs von den generischen Bezeichnungen revGrad / expGrad in eindeutige Bezeichner dash-area-rev / dash-area-exp umbenannt, um den Namensraumkonflikt zu verhindern
- Occupancy BarChart: Cell-Keys von numerischem Index (key={i}) auf stabile String-Keys mit dem Property-Namen umgestellt (key={\occ-${entry.property}`}`), sodass jede Zelle einen stabilen, eindeutigen Key hat
- Maintenance PieChart: Dieselbe Key-Korrektur mit dem Eintragsnamen angewendet (key={\pie-${entry.name}`}`)
Dieser Build wurde automatisch als Version 2 gespeichert. Das Versionshistorien-Panel (zugänglich durch Klicken auf das Versionslabel oben in der Arbeitsumgebung) zeigt ein klares Protokoll:
| Version | Bezeichnung | Zeit |
|---|---|---|
| Version 1 | Property Management Platform | 4:06 PM |
| Version 2 | Resolve code warnings | 4:19 PM |
Nach dem zweiten Durchlauf zeigte die Konsole nur noch saubere vite Hot-Reload-Meldungen, und das Warnungsbanner verschwand. Das Zurückspringen auf Version 1 ist mit einem einzigen Klick aus dem Versionshistorien-Panel möglich.
Der gesamte Korrekturzyklus vom ersten Build bis zur sauberen Konsole dauerte 13 Minuten, ohne manuelle Codebearbeitung.
Das Einstellungsfenster hat mehr Tiefe, als man von einem Beta-Tool erwarten würde
Das Einstellungsfenster wird über das Zahnrad-Symbol oben rechts in der Arbeitsumgebung geöffnet. Das Dropdown ordnet die Optionen in zwei Gruppen:
Make-Einstellungen:
- General
- Domains
- Fonts
- Chat preferences
- Audio
Integrationen:
- GitHub
- Supabase
- Adjust guidelines
General settings umfasst Veröffentlichungsstatus und SEO-Konfiguration:
| Einstellung | Detail |
|---|---|
| Status | Nicht veröffentlicht (Publish-Button direkt verfügbar) |
| Titel | Bearbeitbarer Projektname |
| Meta-Beschreibung | Automatisch aus dem Build-Kontext übernommen |
| Sprache | ISO-Sprachcode-Feld |
| Google Analytics ID | Eine GA4-Property für das Tracking verbinden |
| Von Suchmaschinenergebnissen ausschließen | Checkbox, auf dem kostenlosen Plan standardmäßig aktiviert |
| Chat-Kontext löschen | Löscht dauerhaft die Gesprächs-Erinnerung von Make; der Chat-Verlauf bleibt sichtbar |
Die Option Chat-Kontext löschen ist wichtig zu verstehen. Sie löscht das Gedächtnis der KI an die Build-Konversation, ohne das sichtbare Chat-Protokoll zu entfernen. Das ist nützlich, wenn ein langer Build-Thread die KI dazu bringt, sich bei neuen Änderungsanfragen zu stark an frühere Kontexte zu binden.
Domains zeigt:
- Basisdomain: example.figma.site (die kostenlose Subdomain, geht bei Veröffentlichung live)
- Verbundene Domains: Option, eine benutzerdefinierte Domain von einem Drittanbieter hinzuzufügen (kostenpflichtiger Plan erforderlich)
Integrationen:
- GitHub: Code-Export und Repository-Synchronisierung
- Supabase: Ein echtes Backend und eine Datenbank verbinden, um die simulierte Datenebene zu ersetzen
- Adjust guidelines: Eigene Anweisungen festlegen, an die sich die KI bei Änderungen hält, etwa zu Komponentbibliotheks-Konventionen, Benennungsstandards oder Designvorgaben, die bei jedem Build und jeder Iteration berücksichtigt werden sollen
Die Option Adjust guidelines ist eine bedeutende Ergänzung, die in den anderen Bereichen des Tools nicht so prominent sichtbar ist. Sie ermöglicht es Ihnen, vor Beginn eines Builds festzulegen, wie sich die KI verhalten soll, anstatt unerwünschte Muster im Nachhinein zu korrigieren.
Veröffentlichen ist ein Klick, und die kostenlose Plan-URL sieht wie eine echte eigenständige App aus
Ein Klick auf den Publish-Button oben rechts öffnet ein Panel mit allem, was zum Livegang nötig ist:
| Feld | Detail |
|---|---|
| Titel | Bearbeitbarer Projektname |
| URL | example.figma.site |
| Status | Nicht veröffentlicht |
| In Community hervorheben | Schalter, um die App in der Figma-Community-Galerie aufzulisten |
Der Schalter In Community hervorheben erweitert einen Vorschaubereich, der zeigt, wie die App in der Figma Community neben anderen veröffentlichten Apps erscheinen wird.
Von hier aus:
- können Sie bis zu fünf Tags auswählen, um die App zu kategorisieren (Optionen umfassen Apps, Dashboards und mehr über „Show more“)
- steuert ein Häkchen bei „Show chat history“, ob die Build-Konversation für Community-Besucher sichtbar ist
- bestätigt ein Hinweis: „By publishing to Community, you agree to Figma’s Creator Agreement“
Nach der Veröffentlichung öffnet sich die figma.site-URL in einer eigenständigen Browseransicht. Es gibt keine Figma-Editor-Rahmen, kein Wasserzeichen und kein sichtbares „built with Figma Make“-Badge um die App herum. Sie lädt und verhält sich wie eine echte eigenständige Webanwendung, nicht wie ein gerahmter Prototyp.
Die Veröffentlichung im kostenlosen Plan umfasst:
- Eine teilbare figma.site-Subdomain-URL
- Eine eigenständige App-Ansicht ohne sichtbares Figma-Branding
- Die Möglichkeit, die App in der Figma Community hervorzuheben
Die Veröffentlichung im kostenpflichtigen Plan umfasst zusätzlich:
- Eine benutzerdefinierte Domain von einem Drittanbieter
- Mehr KI-Credits für weitere Builds und Iterationen
Figma Make Preise & Pläne
Figma Make wird nicht als eigenständiges Produkt verkauft. Der Zugriff ist in die Figma Full Seat-Pläne eingebunden, und KI-Credits werden über alle Figma-KI-Funktionen hinweg geteilt, nicht nur über Make. Ein Build in Figma Make entnimmt dasselbe monatliche Kontingent wie die KI-Tools von Figma Design, die Bildbearbeitung und jede andere KI-gestützte Aktion auf der Plattform.
Der kostenlose Starter-Plan enthält Figma Make, aber die monatliche Credit-Obergrenze ist so niedrig, dass ein einzelner komplexer Build einen großen Teil davon verbraucht. Der Starter-Plan eignet sich zum Evaluieren des Tools und für gelegentliche Tests, nicht für Teams, die Make regelmäßig in ihren Build-Prozess einbinden.
Kostenpflichtige Pläne sind nach Seat-Typen strukturiert. Full Seats auf den Tarifen Professional, Organization und Enterprise enthalten jeweils deutlich mehr KI-Credits pro Monat, wobei jede Stufe das monatliche Kontingent erhöht. Wenn Sie bereits einen kostenpflichtigen Figma-Plan hauptsächlich für Design-Zugriff haben, ist Make darin bereits ohne zusätzliche Kosten innerhalb Ihres bestehenden Credit-Pools enthalten.
Zusätzliche KI-Credits können als Add-on über kostenpflichtige Pläne hinweg erworben werden, was sinnvoll ist, wenn Ihr Team mehrere Make-Builds pro Woche zusammen mit der regulären Figma-KI-Nutzung ausführt.
Es gibt keine separate kostenlose Testversion außerhalb des Starter-Plans, und eine Geld-zurück-Garantie wird in den veröffentlichten Figma-Bedingungen nicht genannt. Kündigungen im Jahresplan führen nicht zu einer Rückerstattung für die verbleibende Laufzeit. Kündigungen des Professional-Plans können über das Admin-Dashboard vorgenommen werden; Kündigungen der Tarife Organization und Enterprise erfordern die Kontaktaufnahme mit dem Vertriebsteam.
Für die praktische Plan-Auswahl: Der Starter-Plan deckt Evaluierung und gelegentliche Nutzung ab. Ein Professional Full Seat ist der minimale realistische Einstiegspunkt für Teams, die Make mehr als ein- oder zweimal im Monat nutzen wollen, ohne mitten im Projekt an die Credit-Grenzen zu stoßen.
Alternativen zu Figma Make
Der direkteste Konkurrent zu Figma Make ist derzeit Lovable. Während Figma Make eine Frontend-Anwendung innerhalb der Figma-Arbeitsumgebung erstellt, ist Lovable ein speziell entwickelter KI-App-Builder, der den gesamten Stack abdeckt: Frontend, Backend, Datenbank, Authentifizierung und One-Click-Deployment, und das von einer eigenständigen Plattform mit über 8 Millionen gemeldeten Nutzern.
Für alle, die nicht bereits einen kostenpflichtigen Figma-Plan haben oder die eine produktionsverbundene Anwendung statt eines ausgefeilten Prototyps brauchen, bringt Sie Lovable schneller und mit weniger Konfiguration zu einer bereitgestellten, datenverbundenen App.
| Funktion | Figma Make | Lovable |
|---|---|---|
| Benutzerfreundlichkeit | Prompt-first ohne Setup erforderlich | Prompt-first ohne Setup erforderlich |
| Am besten geeignet für | Designer und Teams, die bereits einen kostenpflichtigen Figma-Plan haben | Nicht-technische Gründer, die MVPs bauen und bereitstellen wollen |
| Backend & Daten | Nur Frontend; Supabase als Integration verfügbar | Integriertes Supabase-Backend von Anfang an enthalten |
| Design-Flexibilität | Visueller Editor, Chat-Bearbeitung und voller Quellcodezugriff | Chat-basierte Bearbeitung mit verfügbarem Code-Export |
| Preismodell | Gebündelt mit Figma Full Seat; gemeinsamer KI-Credit-Pool | Eigenständiges Abo mit eigenem Credit-System |
Endgültiges Urteil: Ist Figma Make es wert?
Für alle, die bereits für einen Figma Full Seat bezahlen, ist die Antwort klar: ja, und zwar deutlich. Die Ausgabequalität setzt Figma Make vor die meisten KI-App-Builder, die schon länger auf dem Markt sind.
Ein einziger Prompt erzeugte eine mehrteilige, rollenbewusste Property-Management-Plattform mit Stripe-Zahlungsmodal, einem Live-Analyse-Dashboard, einem Kanban-Wartungsboard, einer zweispaltigen Messaging-UI und einer vollständigen Admin-Konsole mit Benutzermanagement-Tabelle, REST-API-Dokumentation und Bereitstellungsanweisungen. All das in acht Minuten, mit vollem Quellcodezugriff im kostenlosen Plan und einer sauberen, eigenständigen veröffentlichten URL. Nichts davon ist für ein Beta-Produkt gewöhnlich.
Für Teams, die nicht bereits bei Figma sind, erfordert die Entscheidung einen ehrlichen Blick auf das, was Sie tatsächlich brauchen. Um einen sinnvollen Zugriff auf Figma Make zu erhalten, ist ein Full Seat in einem kostenpflichtigen Figma-Plan nötig, was eine breitere Plattforminvestition bedeutet als bei jedem eigenständigen KI-Builder. Wenn das Hauptziel darin besteht, eine funktionierende Webanwendung mit einer Live-Datenbank und echten Nutzern zu veröffentlichen statt eines Prototyps, bringt Sie Lovable mit weniger Konfiguration und ohne eine Designplattform-Subscription schneller ans Ziel.
Die Zielgruppe, die derzeit am meisten von Figma Make profitiert, sind Designer und Produktteams, die die Lücke zwischen einem statischen Figma-Prototyp und einem testbaren, codegestützten interaktiven Build schließen wollen, ohne die Tools zu wechseln oder auf einen Entwickler warten zu müssen. Für diesen konkreten Anwendungsfall ist Figma Make die beste verfügbare Option.
