Figma Make: KI-Prototypen, Anleitung und Grenzen

Was Figma Make aus Designs macht: vom Frame zum interaktiven Prototyp, mit Backend und Veröffentlichung. Dazu KI-Credits, Git-Grenzen und Alternativen.

Veröffentlicht am

Figma Make: KI-Prototypen, Anleitung und Grenzen

Figma Make spielt seine Stärken aus, wenn zur Produktidee bereits ein Frame oder Designsystem in Figma vorliegt. Das Tool kann funktionsfähige Web-Apps erstellen und bietet dafür zwei dokumentierte Backend-Optionen. Die Wahl des Backends entscheidet allerdings mit darüber, ob sich die Arbeit später über GitHub fortsetzen lässt. Make eignet sich, um ein entworfenes Nutzungserlebnis zu erproben. Wie die Entwicklung danach weitergeht, sollte feststehen, bevor Kundendaten ins Spiel kommen.

Öffentlich dokumentierte Funktionen und KI-Credit-Kontingente geprüft am 15. Oktober 2026. Diese Bewertung stützt sich auf die aktuelle Produktdokumentation und untersucht, wie sich die Arbeit fortsetzen lässt und welche Grenzen bei der Übergabe bestehen. Die Anleitung zeigt ein nachvollziehbares Beispielszenario. Sie beruht weder auf einem Test im angemeldeten Konto noch auf einer Messung der Ausgabequalität.

Was ist Figma Make?

Figma Make erzeugt aus Prompts und Designvorlagen eine Benutzeroberfläche mit bearbeitbarem Code. Damit lassen sich etwa eine Suche ausprobieren, ein Formular ausfüllen oder die Schritte eines Produktablaufs durchlaufen, statt nur ein statisches Mockup zu betrachten. Auch Web-Apps lassen sich veröffentlichen und mit gespeicherten Daten verbinden. Figma Design bleibt die Arbeitsfläche für den Oberflächenentwurf; Figma Sites ist ein eigenständiges Werkzeug zum Erstellen von Websites. In Make wird beschrieben und generiert, wie sich ein Design verhalten soll. Der Einstieg führt über Figma Make; die Anleitung zum Erstellen einer Make-Datei beschreibt den Weg vom Prompt zur Vorschau.

Öffentliche Produktseite von Figma Make mit Abläufen für Design und App-Erstellung
Figma Make: öffentlicher Produktüberblick

Für wen eignet sich Figma Make, und wann passen Alternativen besser?

Figma Make lohnt sich besonders für Designer und Produktmanager, die mit einer freigegebenen Oberfläche, gemeinsamen Komponenten und einem Team starten, das Entwürfe ohnehin in Figma bespricht. Auch Gründer mit einer groben Idee können damit arbeiten. Wer ohne vorhandene Vorlage mit einem leeren Prompt beginnt, verzichtet jedoch auf einen großen Teil dieses Vorteils.

Der folgende Vergleich betrachtet das Ausgangsmaterial, die anschließende Bearbeitung und den Weg zur Bereitstellung. Bewertet wird der Arbeitsablauf, nicht die Frage, welches Tool beim ersten Versuch die schönste Oberfläche erzeugt.

ToolGeeigneter AusgangspunktSinnvoller nächster SchrittEntscheidende Einschränkung
Figma MakeVorhandene Figma-Frames und das eigene DesignsystemInteraktive Prüfung, gehostete App oder unterstützter Code-WorkflowApps mit Payload-Backend unterstützen derzeit weder GitHub noch die Arbeit mit einer lokalen Codebasis
LovableBriefing für eine Web-App mit Benutzerkonten und DatensätzenVerwaltetes Cloud-Backend und GitHub-SynchronisierungCloud-Daten lassen sich nicht mit einem Klick in ein eigenes Supabase-Projekt migrieren
v0 by VercelEine Oberfläche, an der ein Entwickler weiterarbeiten wirdNext.js-App mit Backend-Endpunkten und DatenbankenPasst am besten, wenn das Team einen auf Next.js ausgerichteten Workflow akzeptiert
Claude DesignEin Konzept, Markenvorgaben oder ein visuelles BriefingInteraktives Mockup, exportiertes Ergebnis oder Weiterarbeit mit Claude CodeAuch ein fertiges Design braucht noch eine Umsetzung und jemanden, der den Betrieb verantwortet

Die Unterschiede bei Backend und Code beschreiben die Dokumentationen von Figma zu Backends, Lovable Cloud, v0 zu Full-Stack-Apps und Claude Design.

Lovable: wenn die App vor der Designdatei kommt

Lovable ist ein App-Builder mit verwaltetem Hosting, Datenbank, Authentifizierung und Speicher. Für Gründer, deren Ausgangspunkt etwa lautet „Kunden sollen Anfragen einreichen und Mitarbeiter sie verwalten können“, gehört es in die engere Auswahl. Über die GitHub-Integration können Änderungen aus dem aktiven Repository-Branch zurückfließen. Das wird relevant, sobald ein Entwickler zum Projekt hinzukommt.

Die Kehrseite betrifft die Verantwortung für den Betrieb. Laut Lovables Cloud-Dokumentation erfordert der Umzug zu einem eigenen Supabase-Projekt einen Datenexport und den erneuten Aufbau des Schemas in einem neuen Projekt. Die verwaltete Umgebung sollte deshalb zum geplanten Start passen. Zugleich muss klar sein, wer eine spätere Migration übernehmen würde.

Lovable-Dokumentation zum verwalteten Cloud-Backend
Lovable: Arbeiten mit einem verwalteten Backend

v0 by Vercel: wenn die Arbeit im Code weitergeht

v0 by Vercel erstellt Full-Stack-Anwendungen und setzt standardmäßig auf Next.js, ein Webframework, das Oberflächencode mit serverseitigen Funktionen verbindet. Die Dokumentation behandelt Backend-Endpunkte und Datenbankanbindungen. v0 kann außerdem Figma-Kontext importieren. Vorhandene Figma-Entwürfe als Ausgangspunkt zu verwenden, ist somit kein exklusiver Vorteil von Make.

v0 bietet sich an, wenn ein Entwickler die fertige Anwendung betreuen wird und einen solchen Framework-basierten Einstieg sucht. Steht zunächst eine Designbesprechung an und ist noch niemand bereit, den Anwendungscode zu verantworten, sollte v0 nicht die automatische erste Wahl sein. Entscheidend ist, was nach der Freigabe der Vorschau passiert.

v0-Dokumentation zum Import von Figma-Designs
v0: Figma-Kontext in einen Code-Workflow übernehmen

Claude Design: wenn es um mehr als Produktoberflächen geht

Claude Design erstellt Mockups und weitere visuelle Arbeiten, kann Designsystem-Kontext aus Code und Designdateien nutzen und ist mit Claude Code verbunden. Die aktuelle Produktseite beschreibt auch Exporte als PDF, PowerPoint und HTML. Diese Bandbreite passt zu Gründern, die neben einem Prototyp auch Materialien benötigen, um ihn zu erklären.

Claude Design eignet sich, wenn das kreative Briefing im Gespräch entsteht und die Arbeit anschließend in Claude oder an einem exportierten Ergebnis weitergeht. Für Teams, deren Abstimmung auf vorhandenen Figma-Frames beruht, bietet Make den direkteren Einstieg. Ein HTML-Export allein klärt noch nicht, wer Konten, Daten und Bereitstellung betreut.

Öffentliche Produktseite von Claude Design mit Funktionen für visuelle Gestaltung und Export
Claude Design: visuelle Ideen erproben und weiterbearbeiten

Weitere Kandidaten enthält unsere Übersicht der KI-Designtools.

Wie lässt sich Figma Make sinnvoll einsetzen?

Figma Make ist besonders nützlich, wenn schon der erste Prompt eine klar abgegrenzte Interaktion beschreibt. Bei „Baue mein Startup“ muss das Modell sowohl das Produkt als auch seine Oberfläche erfinden. Ein bereits gestalteter Buchungsablauf liefert dagegen eine konkrete Grundlage, die sich freigeben oder korrigieren lässt.

Figma Make: Tutorial vom Buchungs-Frame zum Prototyp

Als Beispiel dient folgende Aufgabe: Ein Besucher wählt eine Dienstleistung und einen freien Termin aus und sendet eine Anfrage ab. Der Einstieg erfolgt mit Beispielinhalten und ohne Kundenkonten. Zunächst geht es darum, ob der Ablauf verständlich ist. Wie Buchungen gespeichert werden, wird erst danach entschieden.

  1. Den Frame vorbereiten

    Den Figma-Design-Frame mit der Buchungsoberfläche auswählen. Er sollte aussagekräftige Schaltflächenbeschriftungen sowie die Zustände für Auswahl, Nichtverfügbarkeit und Fehler enthalten, die der Prototyp abbilden soll. Anschließend den Frame selbst kopieren. Figma empfiehlt strukturierte Frames statt Screenshots, wenn das Modell präzisen Designkontext benötigt.

  2. Die Make-Datei erstellen und die Vorlage anhängen

    Im Dateibrowser Drafts öffnen und auf Make klicken. Den kopierten Frame in den Prompt einfügen. Alternativ lässt sich über Add context im Anhangdialog ein Link zu einem Design oder Frame hinzufügen. Als Kontext sollte der tatsächliche Frame dienen, nicht lediglich eine URL im Gespräch.

  3. Verhalten und Grenzen beschreiben

    Make anweisen, das angehängte Design beizubehalten, die Auswahl einer Dienstleistung und eines verfügbaren Termins zu ermöglichen, Pflichtfelder zu prüfen und eine Bestätigung anzuzeigen. Für diese erste Version ausdrücklich Beispieldaten und kein Backend verlangen. Mit Send wird die Vorschau erzeugt.

  4. Fehlerfälle durchspielen

    Das Formular ohne ein Pflichtfeld absenden, einen nicht verfügbaren Termin auswählen, die Dienstleistung nach der Terminwahl wechseln und von der Bestätigung zurückgehen. Dabei prüfen, ob die Oberfläche verständlich erklärt, was passiert ist. Eine Schaltfläche, die reagiert, hilft nur dann, wenn sie richtig reagiert.

  5. Den Fehler möglichst gezielt korrigieren

    In einer neuen Make-Datei über Edit ein Element auswählen, seine Eigenschaften ändern und auf Apply klicken. Alternativ einen konkreten Fehler mit einer Anmerkung markieren. Eine Verhaltenskorrektur sollte getrennt von einer umfassenden visuellen Überarbeitung erfolgen. So lässt sich erkennen, ob das eigentliche Problem behoben wurde.

Diese Bedienelemente entsprechen Figmas Anleitungen zum Erstellen, Anhängen von Dateien und Bearbeiten. Ältere Make-Dateien können noch die bisherige Bearbeitungsoberfläche verwenden.

Öffentliche Figma-Anleitung zum Erstellen einer Make-Datei mit Prompt und Vorschau
Figma Make: einen funktionsfähigen Prototyp erstellen

Figma Make: Prompt-Beispiele für denselben Buchungsablauf

Erster Prompt: „Verwende den angehängten Buchungs-Frame als visuelle Vorlage. Erstelle den Ablauf, in dem Besucher eine Dienstleistung und einen verfügbaren Termin wählen, die erforderlichen Kontaktdaten eingeben und eine Bestätigung erhalten. Nutze fiktive Beispielinhalte. Behalte die Hierarchie des Frames und die Gestaltung der Komponenten bei. Binde noch kein Backend an. Erkläre, welche Funktionen simuliert sind.“

Korrektur-Prompt: „Wenn sich die ausgewählte Dienstleistung ändert, lösche die bisherige Terminauswahl und verlange eine neue Auswahl. Behalte Layout und visuelle Gestaltung bei. Zeige direkt neben der Terminauswahl eine Erklärung an.“

Das sind Vorgaben für eine erste Fassung und deren Korrektur, kein Bericht über ein tatsächlich generiertes Ergebnis. Übernimmt die erste Version einen unpassenden Termin in die nächste Dienstleistung, zielt die Korrektur auf einen Fehler in der Zustandsverwaltung: Die Anwendung muss ihren gespeicherten Zustand aktualisieren, sobald sich eine vorherige Auswahl ändert.

Ebenso konkret sind die handwerklichen Anforderungen. Zu prüfen sind Textumbrüche, Tastaturfokus, nicht verfügbare Zustände, lange Dienstleistungsnamen und das Layout auf schmalen Ansichten. Ein ansprechender Screenshot belegt nichts davon. Der Prototyp erfüllt seinen Zweck, wenn eine prüfende Person die Aufgabe abschließen und nachvollziehen kann, warum eine Aktion gesperrt ist.

Figma Make und Designsysteme: mehr bewahren als die Farben

Figma Make gewinnt an Nutzen, wenn es mit den Komponenten und Regeln des eigenen Systems arbeiten kann, statt nur einen fertigen Bildschirm nachzubilden. Ein Design-Token ist ein benannter Wert, etwa für eine Farbe oder einen Abstand. Eine Komponente ist ein wiederverwendbares Oberflächenelement mit festgelegtem Verhalten. Ein passender Token bedeutet noch nicht, dass auch die richtige Komponente zum Einsatz kommt.

Figma Make kits: Komponenten und Regeln bündeln

Figma Make kits können npm-Pakete, veröffentlichte Bibliotheksstile und Variablen sowie schriftliche Richtlinien bündeln. Ein npm-Paket stellt wiederverwendbaren Code bereit. Ein Kit kann somit neben visuellen Vorlagen auch Kontext für die Implementierung liefern. Der dokumentierte Weg führt über Settings → Create a kit → Assemble your kit. Danach werden die benötigten Ressourcen hinzugefügt, Richtlinien verfasst und das Kit getestet und für Kollegen veröffentlicht. Kits erfordern einen Full Seat in einem kostenpflichtigen Tarif. Figmas Anleitung zu Make kits

Dokumentation zu Figma Make kits mit der Konfiguration von Paketen und Bibliotheken
Figma Make: Pakete, Bibliotheksstile und Richtlinien

Vor dem Generieren des Ablaufs im Prompt-Bereich der App auf Select a Make kit klicken und das veröffentlichte Kit auswählen. Für das Buchungsbeispiel sollten die freigegebenen Komponenten für Schaltflächen, Eingaben und Terminauswahl enthalten sein, soweit vorhanden. Dazu gehören Regeln für ihren Einsatz: Die primäre Schaltfläche sendet eine gültige Anfrage ab; nicht verfügbare Termine bleiben erkennbar, lassen sich aber nicht auswählen; Validierungshinweise stehen unmittelbar am betroffenen Feld.

Solche Regeln sind wichtiger als die Anweisung „Gestalte es passend zur Marke“. Ein generiertes violettes Rechteck kann wie die primäre Schaltfläche aussehen, ohne deren deaktivierten Zustand, Fokusdarstellung oder barrierefreie Beschriftung zu besitzen. Zu prüfen sind daher der Komponenteneinsatz und die Bedeutung der Interaktionen, nicht nur die vertraute Akzentfarbe.

Die Vorbereitung erfordert Arbeit. Laut Figmas Anforderungen an Pakete muss das Paket mit der Build-Umgebung funktionieren und darf nicht voraussetzen, dass der umgebende Workspace vorhanden ist. Hängen die eigenen Komponenten von privaten Modulen ab, die über ein größeres Repository verteilt sind, sollte ein Entwickler das Paket vorbereiten.

Beim Extrahieren einer Bibliothek bleiben nicht alle Tokens vollständig erhalten. Laut der Anleitung zu Make kits wird eine Teilmenge der Variablen als vereinfachtes CSS mit direkten Werten übernommen; die genaue Variablensyntax bleibt nicht erhalten. Zustandsregeln sollten deshalb in den Richtlinien stehen und die generierten Stile geprüft werden, bevor das Designsystem im Prototyp als vollständig übernommen gilt.

Figma Make: Vorlagen für wiederkehrende Aufgaben

Figma Make-Vorlagen eignen sich für Abläufe mit demselben Ausgangspunkt, während ein Kit wiederverwendbaren Systemkontext liefert. Eine geprüfte Grundlage für Buchungen lässt sich einmal aufbauen und anschließend von Kollegen für Varianten nutzen. Figma beschreibt Vorlagen zusammen mit den weiteren Möglichkeiten zum Teilen und Wiederverwenden.

Guidelines eignen sich für dauerhaft geltende Projektregeln, Custom Skills für eine wiederholbare Prüfung, die ausdrücklich aufgerufen wird. Teams mit einem etablierten System finden in unserem Designsystem-Paket mit Custom Skills für Figma Make eine Ausgangsstruktur. Die Anweisungen müssen an die eigenen Tokens und Komponenten angepasst werden; die abschließende Bewertung bleibt eine menschliche Entscheidung.

Eine Web-App bauen, die Daten dauerhaft speichert

Figma Make dokumentiert inzwischen zwei Lösungen: Payload, ein Anwendungs-Backend und Content-Management-System, sowie Supabase, einen Datenbank- und Backend-Dienst. Ein Backend speichert Informationen und erledigt Aufgaben hinter der sichtbaren Oberfläche. Darin liegt der Unterschied zwischen einer angezeigten Buchungsbestätigung und einer Anfrage, die Mitarbeiter auch dann noch abrufen können, wenn der Besucher den Browser geschlossen hat.

Bei Payload wird die App beschrieben, die Erstellung des Backends bestätigt und anschließend werden die Datensätze im CMS-Tab verwaltet, der Oberfläche für die Inhaltsverwaltung. Figma hostet App und Daten. Supabase wird separat unter Make settings → Integrations → Supabase angebunden. Die Make-Anbindung verwendet Schlüssel-Wert-Speicher, also einfache gespeicherte Einträge, statt ein vollständiges Datenbankschema mit verknüpften Tabellen anzulegen. Figmas Backend-Dokumentation

Figmas Backend-Anleitung zum Erstellen eines Payload-Backends und Verwalten von Inhalten
Figma Make: gehostetes Payload-Backend und angebundenes Supabase

Das bisherige Briefing lässt sich so fortsetzen: „Ergänze ein Payload-Backend für Dienstleistungen und Terminanfragen. Besucher können Anfragen einreichen, Mitarbeiter können sie verwalten. Trenne öffentliche Informationen zu Dienstleistungen von privaten Kontaktdaten. Erkläre die Zugriffsregeln, bevor du sie implementierst.“

Anschließend eine gespeicherte Anfrage in der Verwaltungsansicht prüfen. Die Besucheransicht neu laden und kontrollieren, ob sie die vorgesehenen gespeicherten Informationen abruft. Außerdem prüfen, ob Besucher ohne Anmeldung Datensätze erreichen können, die nur Mitarbeitern zugänglich sein sollen. Das sind Abnahmeprüfungen für die eigene Implementierung, keine Zusicherung, dass die generierte Anwendung sie bereits besteht.

Eine Terminanfrage und eine garantierte Reservierung sind unterschiedliche Produkte. Eine Anfrage kann auf die Freigabe durch Mitarbeiter warten. Eine Reservierung benötigt Regeln für kollidierende Anfragen, Stornierungen und geänderte Verfügbarkeiten. Muss das Unternehmen einen Termin verbindlich garantieren, gehört ein Entwickler hinzugezogen, bevor der Ablauf als fertig gilt.

Schnittdarstellung aus Knete, die Aussehen, funktionierendes Verhalten und gespeicherte Daten voneinander trennt
Eine überzeugende Oberfläche, eine funktionierende Interaktion und ein gespeicherter Datensatz belegen jeweils etwas anderes.

Der praktische Vorteil: Oberfläche und Datensatzverwaltung lassen sich gemeinsam erproben. Die Grenze liegt bei der Verantwortung. Jemand muss über Datenmodell, Berechtigungen und Wiederherstellungsverfahren entscheiden. Eine generierte Verwaltungsoberfläche nimmt diese geschäftlichen Entscheidungen nicht ab.

Die App veröffentlichen und die weitere Betreuung klären

Figma Make kann direkt veröffentlichen; der Umweg über Figma Sites ist nicht erforderlich. Dazu in Make auf Publish klicken, den Titel festlegen und die App veröffentlichen. Sie erhält eine eigene URL; außerdem lässt sich eine eigene Domain einrichten. Spätere Änderungen müssen durch eine Aktualisierung der veröffentlichten Version übernommen werden. Anleitung zur Veröffentlichung mit Make

Figma-Make-Dokumentation mit App-Einstellungen und Bedienelementen zur Veröffentlichung
Figma Make: direkt im Web veröffentlichen

Beim Buchungsprototyp muss klar sein, ob er sich an prüfende Kollegen oder potenzielle Kunden richtet. Wer den Prototyp prüft, braucht eine ehrliche Auskunft darüber, welche Funktionen simuliert sind. Kunden benötigen einen vollständigen Service: eine eindeutige Bestätigung, eine Möglichkeit zur Fehlerkorrektur und jemanden, der auf eingereichte Anfragen reagiert. Die abschließende Prüfung sollte über die veröffentlichte URL erfolgen, damit sie genau das erfasst, was Besucher erhalten.

Wann eignet sich Figma Sites besser zur Veröffentlichung?

Figma Sites passt zu einer Marketingwebsite, die über einen visuellen Editor gepflegt wird. Der dokumentierte Ablauf: einen Frame aus Figma Design in einen Sites-Breakpoint kopieren, die responsiven Layouts anpassen und veröffentlichen. Ein Breakpoint steht dabei für ein Layout, das auf einen bestimmten Bereich von Ansichtsgrößen ausgelegt ist. Dieser Weg eignet sich, wenn vor allem Seiten gestaltet und aktualisiert werden sollen. Designs nach Figma Sites übertragen

Für die Buchungsinteraktion bietet sich Make an. Für die umgebende Marketingwebsite kommt Sites infrage, sofern das Bearbeitungsmodell zur zuständigen Person passt. Die Möglichkeiten, die Plattform später zu verlassen, sind allerdings nicht identisch: Laut Figmas Dokumentation zur Veröffentlichung mit Sites lässt sich der Website-Code derzeit nicht für eine externe Veröffentlichung exportieren.

Was gehört zur Übergabe an die Entwicklung?

Der Code-Editor von Figma Make bietet einen ZIP-Download. Die aktuelle Dokumentation zu Git-Workflows beschreibt außerdem das Klonen eines autorisierten GitHub-Repositorys, die Arbeit in Branches und das Erstellen eines Pull Requests. Ein Pull Request ermöglicht es der Entwicklung, Änderungen zu prüfen, bevor sie in die gemeinsame Anwendung einfließen. Das sind unterschiedliche Einstiegswege mit jeweils eigenen Voraussetzungen.

Figma-Dokumentation zum Klonen von GitHub-Repositorys sowie zur Arbeit mit Branches und Pull Requests
Figma Make: die Arbeit über ein Repository fortsetzen

Zusammen mit dem Code gehören das vorgesehene Verhalten, bekannte simulierte Funktionen, die Zuständigkeit für Daten, Zugriffsregeln und offene Fehler in die Übergabe. Für den Buchungsablauf muss ausdrücklich feststehen, ob ein Termin eine Anfrage oder eine bestätigte Reservierung ist. Sonst übernimmt die Entwicklung womöglich eine sauber ausgearbeitete Umsetzung der falschen Geschäftsregel.

Figma Make: KI-Credits und Kostenplanung

Für die gemeinsame Arbeit am Designsystem empfiehlt sich ein Professional Full Seat: Er enthält 3.000 KI-Credits/Monat. Starter bietet dagegen 500/Monat mit einem Limit von 150/Tag. Make greift auf das gemeinsame KI-Kontingent zu; der Verbrauch hängt von Modell, Aufgabe und Kontext ab. Das Credit-Kontingent pro Seat wird monatlich zurückgesetzt, ungenutzte Credits werden nicht übertragen. Vor der Entscheidung sollten die Informationen zu Figma AI credits und die Figma-Preise geprüft werden. Ein Kontingent garantiert keine bestimmte Anzahl fertiger Prototypen.

Welche Einschränkungen sind für die Entscheidung wichtig?

Die Grenzen von Figma Make hängen vom gewählten Workflow ab. Weder „Es kann kein Backend bauen“ noch „Es übernimmt das ganze Produkt“ ist eine tragfähige Grundlage für die Kaufentscheidung.

Bei gehosteten Payload-Apps entfällt derzeit die Weiterarbeit über Git

Laut Figmas Dokumentation zum Payload-Backend stehen GitHub-Integration und Workflows mit einer lokalen Codebasis für Apps mit Payload-Backend noch nicht zur Verfügung. Das aktuelle Payload-Hosting findet demnach im Osten der USA statt. Diese Punkte gehören in die Auswahlentscheidung und sollten nicht erst nach dem Aufbau der App auffallen. Einschränkungen von Payload

Muss die Entwicklung dasselbe Projekt unmittelbar über ihr Repository weiterführen, ist vor der Entscheidung für Payload ein kompatibler Weg zu prüfen. Die Ankündigung eines künftigen Features erfüllt keine Übergabeanforderung, die schon heute gilt.

Von Figma Make zurück zu Figma Design entsteht keine automatische Synchronisierung

Die Standardfunktion Copy design in Figma Make erzeugt bearbeitbare Ebenen aus der aktuellen Vorschau. Diese Ebenen sind statisch, von der Make-Datei getrennt und nicht automatisch mit dem Designsystem verknüpft. Vorhandene Variablen können allerdings zugeordnet werden. Dokumentation zu Copy design

Figmas Dokumentation zu Copy design erklärt bearbeitbare Momentaufnahmen der Vorschau
Figma Make: eine Vorschau als Designebenen kopieren

Die Kopie eignet sich für Designkritik und visuelle Experimente. Wird die Terminauswahl auf der Designfläche geändert, muss ausdrücklich geklärt werden, wie diese Änderung in die funktionierende App zurückfließt. Andernfalls können Designbesprechung und Prototyp unbemerkt unterschiedliche Produkte beschreiben.

Eine bewegliche Tür aus Knete wird als flacher Abdruck kopiert und veranschaulicht so eine statische Designaufnahme
Die Standardfunktion Copy design bewahrt eine Ansicht, aber keine aktive Verbindung zu ihrem Verhalten.

Die Git-Funktionen sind nicht austauschbar

Die separate Funktion Push to GitHub von Figma Make erstellt ein eigenes Repository und überträgt Änderungen nur in eine Richtung. Spätere Pushes können Änderungen überschreiben, die außerhalb von Make vorgenommen wurden. Diese Einschränkung gilt nicht pauschal für den oben beschriebenen neueren Workflow zum Klonen eines Repositorys.

Die Arbeit mit einer lokalen Codebasis ist eine weitere eigenständige Option. Sie ist als begrenzte geschlossene Beta dokumentiert und setzt die Figma Beta-Desktop-App für Mac sowie ein freigeschaltetes Konto voraus. Zudem muss das Repository vorbereitet werden. Bevor versprochen wird, dass Designer direkt an der bestehenden produktiven App arbeiten können, muss feststehen, welcher Weg dem Team tatsächlich offensteht.

Der Passwortschutz von Figma Make gilt für die veröffentlichte App; für die Vorschau gelten die Freigabeberechtigungen der Datei. Beides sollte geprüft werden, bevor ein vertrauliches Konzept das Team verlässt. Veröffentlichung und Freigabe sind getrennte Zugriffsentscheidungen. Einstellungen für Veröffentlichung und Zugriff

Auch generiertes Verhalten braucht Abnahmekriterien

Ein mit Figma Make erstellter Ablauf kann vollständig wirken, obwohl schwierige Geschäftsfälle noch ungeklärt sind. Beim Buchungsbeispiel sind konkurrierende Anfragen, stornierte Termine, nicht barrierefrei bedienbare Elemente und irreführende Bestätigungen zu prüfen. Das sind Anforderungen an die Prüfung, keine hier in einem Test beobachteten Fehler.

Eine brauchbare Definition von veröffentlichungsreif lautet: „Die vorgesehene Person kann ihre Aufgabe erledigen, und die verantwortliche Person kann das Ergebnis betreuen.“ Ein realistisch wirkendes Mockup allein erfüllt keine dieser beiden Bedingungen.

Fazit: Mit Make das Design erproben und den späteren Betrieb mitplanen

Figma Make ist eine überzeugende Wahl für Gründer, Produktmanager und Designer, die bereits Figma-Material haben und ein funktionierendes Produkterlebnis beurteilen möchten. Kits, gezielte Bearbeitung und Backend-Optionen erweitern die Diskussion über das bloße Aussehen eines Bildschirms hinaus.

Die Entscheidung fällt anders aus, wenn die nächste verantwortliche Person im gewählten Workflow nicht weiterarbeiten kann. Eine gehostete Payload-App kann zur Inhalts- oder Anfrageverwaltung passen. Ihre aktuelle Git-Einschränkung ist jedoch relevant, wenn die Entwicklung unmittelbar übernehmen soll. Lovable bietet sich für einen App-zentrierten Einstieg mit verwalteter Infrastruktur und Git-Synchronisierung an, v0 für eine von Entwicklern betreute Next.js-Lösung und Claude Design für breitere visuelle Erkundungen mit anschließender Weiterarbeit in Claude.

Für die nächste Woche bietet sich ein konkreter Schritt an: einen repräsentativen Frame auswählen, die kleinste vollständige Interaktion bauen und die später zuständige Person prüfen lassen, wie sie daran weiterarbeiten kann. Prototyp und Übergabe sollten gemeinsam freigegeben werden. Das ist ein nützlicherer Meilenstein als weitere generierte Bildschirme.

Häufige Fragen

Was kann man mit Figma erstellen?

Im hier beschriebenen Workflow dient Figma Design zum Entwerfen der Oberfläche, Make zum Generieren funktionierender Interaktionen und Apps und Sites zum visuellen Erstellen von Websites. Zuerst sollte das gewünschte Ergebnis feststehen, dann das passende Werkzeug.

Wie erstelle ich eine neue Datei in Figma?

Für eine Make-Datei im Dateibrowser Drafts öffnen und auf Make klicken. Anschließend den Frame anhängen und das gewünschte Verhalten beschreiben. Die Anleitung oben folgt dem von Figma dokumentierten Ablauf.

Ist Figma ein UI- oder ein UX-Tool?

Beides trifft auf die Arbeit damit zu. UI betrifft die Oberfläche, die Menschen sehen und bedienen; UX beschreibt ihr Erlebnis beim Erledigen einer Aufgabe. Make kann helfen, einen funktionierenden Ablauf zu untersuchen. Ob er das richtige Problem löst, muss weiterhin durch Recherche und eigenes Urteil geklärt werden.

Was unterscheidet Figma Design von Figma Make?

Figma Design ist die Arbeitsfläche für den Entwurf; Make erzeugt eine funktionierende Oberfläche auf Codebasis. Die Standardfunktion Copy design überträgt eine statische Ansicht als bearbeitbare Ebenen zurück, ohne spätere Änderungen automatisch zu synchronisieren.

Gibt es bessere Alternativen zu Figma Make?

Für bestimmte Aufgaben ja. Lovable ist eine starke Alternative für eine verwaltete App samt Backend, v0 für einen auf Next.js ausgerichteten Entwicklungsworkflow und Claude Design für visuelle Erkundungen über verschiedene Formate hinweg. Make überzeugt besonders dann, wenn vorhandene Figma-Entwürfe und das eigene Designsystem den Ausgangspunkt bilden.

Kehren Nutzer Figma den Rücken?

Dieser Artikel misst keine Kundenabwanderung. Einzelne Beschwerden oder Wechselbeispiele belegen keinen allgemeinen Trend. Für die eigene Entscheidung zählt, welche konkrete Design- oder Übergabeaufgabe der bisherige Workflow nicht bewältigt.

Warum geht es mit Figma bergab?

Die Frage kann sich auf den Aktienkurs, die Nutzung oder eine persönliche Einschätzung des Produkts beziehen. Nichts davon entscheidet, ob Make zum eigenen Workflow passt. Dieser Artikel trifft keine Aussage über die Marktentwicklung, sondern bewertet die dokumentierten Wege für Design, Backend und Übergabe.

Wer ist Figmas größter Konkurrent?

Kein einzelner Wettbewerber deckt jeden Make-Anwendungsfall gleichermaßen ab. Für diese Kaufentscheidung gehören Lovable für den App-zentrierten Aufbau, v0 für die Weiterarbeit am Code und Claude Design für visuelle Arbeit im Dialog in die engere Auswahl. Maßstab ist die Aufgabe, die tatsächlich erledigt werden muss.

Was ist besser: Canva oder Figma?

Für den hier behandelten Workflow zur Gestaltung von Produktoberflächen eignet sich Figma. Geht es um Marketingmaterialien, hilft der oben verlinkte breitere Vergleich der KI-Designtools bei der Auswahl nach dem gewünschten Ergebnis. Dieser Artikel vergleicht nicht die Ausgabequalität von Canva und Figma.

Ist Figma Make kostenlos?

Make lässt sich im Starter-Tarif ausprobieren. Zu den dokumentierten Einschränkungen gehört, dass Stile aus Teambibliotheken nicht als Kontext verfügbar sind und die Veröffentlichung im öffentlichen Web an eine Veröffentlichung in der Figma Community gekoppelt ist. Für vertrauliche gemeinsame Produktarbeit sollte der kostenpflichtige Workflow mit einem Full Seat geprüft werden. Weitere Informationen bieten die Hinweise zum Zugang zu Figma Make und das oben beschriebene Credit-Kontingent.

Die Checkliste zur Prüfung von KI-Workflows im Unternehmen hilft dabei, Verantwortliche, benötigte Daten und die Übergabe des Prototyps festzulegen, bevor die Entscheidung für den Workflow fällt.

Veröffentlicht
Kategorie
Design
Napkin AI: Diagramme aus Text für den Geschäftsalltag

Napkin AI: Diagramme aus Text für den Geschäftsalltag

Napkin AI für Angebote, Beiträge und Berichte: Was Diagramme und Slides leisten, welche Kosten anfallen und worauf es bei Exporten und Kundendaten ankommt.15. Okt. 2026Design
Riverside-Alternative Descript: Für wen lohnt sich der Wechsel?

Riverside-Alternative Descript: Für wen lohnt sich der Wechsel?

Descript oder Riverside für Unternehmenspodcasts und Videos? Der Vergleich zeigt, was bei Aufnahme, KI-Schnitt, Untertiteln und Teamarbeit den Ausschlag gibt.14. Okt. 2026Design
Framer AI: Was der Website-Baukasten leistet und kostet

Framer AI: Was der Website-Baukasten leistet und kostet

Framer AI für Unternehmenswebsites: Gestaltung, CMS, SEO und Übersetzung im Überblick. Mit klarer Kostenrechnung für Tarife, Team und zusätzliche Sprachen.14. Okt. 2026Design
Ideogram: Was der KI-Bildgenerator im Arbeitsalltag leistet

Ideogram: Was der KI-Bildgenerator im Arbeitsalltag leistet

Ideogram für Bilder mit Text: Was 4.5 bei Korrekturen leistet, wie viel Tarife und API kosten und wo Grenzen bei Export und kommerzieller Nutzung liegen.13. Okt. 2026Design
KI-Design-Generator 2026: Welches Tool passt zur Aufgabe?

KI-Design-Generator 2026: Welches Tool passt zur Aufgabe?

Welcher KI-Design-Generator passt zu UI, Grafik oder Website? Acht Tools im Vergleich mit Preisen, Gratiszugängen und Kosten für eine Person oder fünf.13. Okt. 2026Design
KI-Bilder erstellen: Midjourney-Alternativen für Unternehmen

KI-Bilder erstellen: Midjourney-Alternativen für Unternehmen

Welche Midjourney-Alternative passt zum Unternehmen? Sechs KI-Bildgeneratoren im Vergleich: Preise, Bildbearbeitung, Markengrafiken, API und Nutzungsrechte.12. Okt. 2026Design
KI-Stimmen-Generator ElevenLabs: Lohnt sich das Abo?

KI-Stimmen-Generator ElevenLabs: Lohnt sich das Abo?

ElevenLabs für Unternehmen: Stimmenklonen, Dubbing, API und Agents im Überblick. Was Tarife kosten und welche Grenzen für Produktion und Nutzungsrechte gelten.12. Okt. 2026Design
Wie Figma Claude Code in den Designprozess einbindet

Wie Figma Claude Code in den Designprozess einbindet

Claude Code mit Figma verbinden: laufende Oberflächen als bearbeitbare Frames erfassen, im Team prüfen und freigegebene Designs wieder im Code umsetzen.12. Okt. 2026Design
Newsletter

Ein Brief, jeden Sonntag.Funktionierende Systeme, keine heißen Takes.

Wöchentlich. Kein Spam. Jederzeit abbestellbar.