Figma Sites wurde auf der Config 2025 in der offenen Beta-Version veröffentlicht. Es wird in den kommenden Wochen für Einzelpersonen mit Full-Lizenzen in allen kostenpflichtigen Abos eingeführt. Erfahre mehr darüber, was in der Beta-Version enthalten ist.
Was ist Figma Make?
Figma Make ist ein KI-gestütztes Prompt-to-Code-Tool, mit dem du Ideen und bestehende Figma Designs als funktionale Prototypen, Web-Apps und interaktive UI zum Leben erwecken kannst. Durch Konversationen kannst du funktionale Prototypen und Web-Apps entwerfen, weiterentwickeln und verbessern.
Verwende Figma Make für Folgendes:
- Sieh dir das Erscheinungsbild deiner Designs in einer funktionalen Vorschau an
- Verwandle Vorschläge und Ideen in Prototypen, um deinen Produktansatz zu verfeinern
- Entdecke verschiedene Lösungen für ein Problem, das du lösen möchtest
Figma Make bietet mehrere Funktionen, die das Umwandeln von Figma-Designs in funktionale Prototypen vereinfachen:
- Füge vorhandene Figma-Designs, Komponenten und Community-Inhalte deinen Prompts hinzu.
- Verweise im weiteren Gesprächsverlauf auf bestimmte Teile der Vorschau, die du verbessern möchtest
- Arbeite mit deinem Team in denselben Konversationen zusammen und ändere gleichzeitig den erzeugten Code
- Teile Vorschauen deines funktionalen Prototyps oder deiner Web-App mit anderen Personen
- Veröffentliche deinen funktionsfähigen Prototyp oder deine funktionsfähige Web-App als Website mit einer eigenen URL
Falls die Beta-Version von Figma Make bereits in deinem Konto verfügbar ist und du loslegen möchtest, sieh dir Erstellen und Bearbeiten eines funktionsfähigen Prototyps oder einer funktionsfähigen Web-App an. Du kannst Figma Make-Dateien auf die gleiche Weise erstellen, wie du andere neue Dateien in Figma erstellst. Öffne deine Entwürfe im Datei-Browser, klicke oben rechts auf + Erstellen und wähle Make aus.
Wenn du Nutzer einer Full-Lizenz in einem kostenpflichtigen Abo bist und die Option „Make“ beim Erstellen von Dateien nicht siehst, bedeutet das, dass die Beta-Version für dich noch nicht freigeschaltet wurde. Der Zugang wird in den kommenden Wochen schrittweise eingeführt!
Finde dich zurecht
Figma Make bietet eine benutzerfreundliche Oberfläche, die dir hilft, so schnell wie möglich Prototypen aus deinen Designs zu erstellen. Figma Make hat zwei Hauptbereiche: den KI-Chat, in dem du das Modell ansprechen kannst, und die Vorschau, in der du eine funktionierende Version deiner App sehen und den Code bearbeiten kannst.
Chatten mit KI
Im KI-Chat von Figma Make teilst du Figma-Designs und -Bilder, kommunizierst mit dem Modell, um deinen funktionalen Prototyp oder deine Web-App zu erstellen, und iterierst durch Prompts.
Dein Design zu Figma Make bringen
Um deine vorhandenen Designs zur Erstellung einer App zu nutzen, klicke auf Design anhängen und wähle das gewünschte Design aus. Du kannst mehr als ein Design anhängen, um dem Modell zusätzliche Anweisungen zu geben.
Du kannst auch Frames und Komponenten aus deinen Designs direkt in den KI-Chat einfügen.
Verwende beim Erstellen mit Figma Make Bilder
Hast du eine Idee, die noch nicht in einer Design-Datei ist? Stelle Bilder im KI-Chat bereit, um deine App zu starten. Um ein Bild zu verwenden, klicke auf Bild anhängen und wähle das Bild aus, das du hinzufügen möchtest, oder füge das Bild direkt in den Chat ein.
Führe die KI mit Gesprächen
Hast du inspirierende Ideen oder Anweisungen, denen das Modell folgen soll? Schreibe sie einfach in den KI-Chat und arbeite iterativ mit Figma Make, um diese Ideen zum Leben zu erwecken.
Iteriere mit Gesprächen und dem Bearbeitungswerkzeug
Die Verbesserung deines funktionsfähigen Prototyps oder deiner funktionsfähigen Web-App ist so einfach wie die Fortsetzung des Gesprächs im KI-Chat. Du kannst weiterhin Designs und Bilder anhängen und in das Eingabefeld tippen, um das Ergebnis deines Gesprächs zu verbessern.
Du kannst auch das Bearbeitungs-Tool von Figma Make verwenden, um auf bestimmte Teile deines funktionsfähigen Prototyps oder deiner funktionsfähigen Web-App zu verweisen und direkt Änderungen vorzunehmen. Je nach Element kannst du Elemente wie Innenabstand, Ränder, Farben und Texteigenschaften ändern. Du kannst auch das Bearbeitungs-Tool verwenden, um die spezifischen Änderungen zu veranlassen, die du sehen möchtest.
Erstelle funktionsfähige Prototypen, Web-Apps und interaktive UI.
Bist du startklar? Schau dir Erstellen und Bearbeiten eines funktionalen KI-Prototyps oder einer Web-App an, wo du alle Details findest, die dir den Einstieg in das Erzeugen mit dem KI-Chat erleichtern.
Sobald du deinen funktionsfähigen Prototyp oder deine Web-App hast, kannst du ihn auch in einer speziellen Vollbildansicht anzeigen, ähnlich wie bei Figma Design-Prototypen.
Arbeite gemeinsam an funktionsfähigen Prototypen und Web-Apps und teile sie mit anderen
Nachdem du einen funktionsfähigen Prototyp oder eine Web-App erstellt hast, kannst du ihn mit deinen Teamkollegen oder anderen Personen im Web teilen.
Du kannst die Vorschau deines funktionsfähigen Prototyps oder deiner funktionsfähigen Web-App mit jeder gewünschten Person teilen, indem du die granularen Berechtigungen verwendest, um den Zugriff zu kontrollieren und deine Konzepte zu schützen.
Wenn du fertig bist, veröffentlichst du deinen Funktionsprototyp oder die Web-App im öffentlichen Web mit einer eigenen, dedizierten URL, bereitgestellt von Figma, oder du weist ihm/ihr eine benutzerdefinierte Domain zu, die dir gehört.
Berechtigungen in Figma Make
Deine Berechtigungen bestimmen, welche Aktionen du in Figma Make-Dateien ausführen kannst und ob du Änderungen an einem funktionsfähigen Prototyp oder einer funktionsfähigen Web-App vornehmen darfst.
Figma Make-Dateien in der Beta-Version teilen
Nur Personen in der Beta-Version von Figma Make können Figma Make-Dateien erstellen, mit ihnen interagieren und sie anzeigen. Wenn eine Figma Make-Datei mit einer Person geteilt wird, die noch nicht Teil der Beta-Version ist, wird dieser Person eine 404-Fehlerseite angezeigt.
Dateieigentümer*innen und alle Personen mit Schreibzugriff auf eine Figma Make-Datei können die Datei im öffentlichen Web veröffentlichen. Sobald Figma Make-Dateien als funktionale Prototypen oder Web-Apps veröffentlicht werden, sind sie im öffentlichen Web zugänglich. Besucher der Website können jedoch nicht auf die Figma Make-Datei zugreifen, die zur Veröffentlichung der Website verwendet wurde.
Dateien erstellen
Um Figma Make-Dateien zu erstellen, benötigst du Zugriff auf die Figma Make Beta-Version und eine Full-Lizenz in einem kostenpflichtigen Abo.
Personen mit einem Collab-, Dev- oder View-Lizenz können Figma Make-Dateien anzeigen, die mit ihnen geteilt werden. Sie können Dateien duplizieren, werden jedoch keine Änderungen an den Duplikaten vornehmen können.
Bearbeiten, Ansehen und Teilen
Je nach deinen Berechtigungen kannst du in einer Figma Make-Datei verschiedene Aktionen ausführen.
- Personen mit
Schreibzugriffkönnen Designs und Bilder anhängen, den Chatverlauf einsehen und Prompts im KI-Chat schreiben. Sie können die Vollbildvorschau ansehen. Sie können andere Editor*innen und Betrachter*innen zu der Datei einladen. Sie können die Figma Make-Datei im öffentlichen Web veröffentlichen. - Personen mit
Lesezugriffkönnen die Prompts im KI-Chat und den Chatverlauf einsehen, aber keine eigenen Prompts schreiben. Sie können die Vollbildvorschau ansehen. Sie können andere Betrachter*innen zur Datei einladen.
Nächste Schritte
Lies die folgenden Artikel, um mit Figma Make zu beginnen:
- Einen funktionalen Prototyp oder eine Web-App erstellen und bearbeiten
- Designs und Bilder an einen Prompt anhängen
- Vorschau eines funktionsfähigen Prototyps oder einer funktionsfähigen Web-App
- Veröffentlichen, aktualisieren oder die Veröffentlichung eines funktionalen Prototyps oder einer Web-App aufheben
Fragen zu Figma Make?
Bei Fragen zur Beta-Version von Figma Make oder zur Nutzung von Figma Make gehe zu den Häufig gestellten Fragen zu Figma Make.