Einen funktionalen Prototyp oder eine Web-App erstellen und bearbeiten

Vor dem Start

Wer diese Funktion verwenden kann

Figma Make ist für Full-Lizenzen in kostenpflichtigen Abos verfügbar.

Du kannst Figma Make mit anderen Lizenzen und Abos ausprobieren.

Mit Figma Make kannst du die Chat-Benutzeroberfläche nutzen, um funktionale Prototypen, Web-Apps, interaktive UI und mehr zu erstellen. Figma Make ist KI-gesteuert, was das Erstellen eigener interaktiver Prototypen so einfach macht wie das Teilen von Beispielen oder ein kurzes Gespräch. Du kannst deine funktionalen Prototypen und Web-Apps bearbeiten oder verbessern, indem du die Konversation fortsetzt, sowie die Vorschau und den Code direkt bearbeitest.

Erstelle einen funktionalen Prototyp oder eine Web-App

Um einen funktionalen Prototyp, eine Web-App oder eine interaktive UI mit Figma Make zu erstellen:

1. Erstelle eine Datei von Figma Make. Navigiere im Datei-Browser zu deinen Entwürfen. Klicke dann in der oberen rechten Ecke auf Make.

2. Sag dem Modell im KI-Chat, was du bauen möchtest. Du kannst eine oder mehrere der folgenden Optionen nutzen, um die KI zu steuern:
   • Figma-Designs anhängen.
   • Bring Stilkontext aus einer deiner Figma Design-Bibliotheken. (Nur kostenpflichtige Abos)
   • Füge ein Backend hinzu, um Daten und Geheimnisse sicher zu speichern und zu verwalten.
   • Füge Rahmen aus Figma-Designs und Bildern direkt in den Chat ein.
   • Gib deine Ideen und Anweisungen in das Eingabefeld ein.
3. Klicke auf Senden.

Nachdem du deine Prompt gesendet hast, beginnt Figma Make mit der Generierung des Codes für deinen funktionalen Prototyp oder deine Web-App. Je nachdem, wie komplex das Endergebnis ist, kann es einige Minuten dauern, bis Figma Make die Generierung des Codes abgeschlossen hat.

Wenn der Vorgang abgeschlossen ist, gibt Figma Make eine Zusammenfassung der Änderungen und eine interaktive Vorschau wird angezeigt.

Falls du Probleme hast, während du versuchst, das erste Ergebnis zu erzielen, sieh dir unsere Empfehlungen zur Fehlerbehebung in Figma Make an.

Bearbeite einen funktionalen Prototyp oder eine Web-App

Um einen vorhandenen Funktionsprototyp oder eine Web-App zu bearbeiten, befolgst du dieselben Schritte wie unter Einen Funktionsprototyp oder eine Web-App erstellen. Du führst das bestehende Gespräch fort, um das ursprüngliche Ergebnis zu iterieren und zu verbessern. Du kannst auch auf bestimmte Teile des ursprünglichen Ergebnisses hinweisen, die die KI ändern soll.

Verwende die folgenden Methoden, um deinen funktionalen Prototyp oder deine Web-App zu bearbeiten:

• Verwende das Point and bearbeiten -Tool, um auf bestimmte Teile deines Funktionsprototyps oder deiner Web-App zu verweisen, auf die sich Figma Make konzentrieren soll.
• Nutze den Versionsverlauf, um frühere Versionen deines Funktionsprototyps oder deiner Web-App zu bearbeiten
• Figma-Designs anhängen.
• Bring Stilkontext aus einer deiner Figma Design-Bibliotheken. (Nur kostenpflichtige Abos)
• Füge ein Backend hinzu, um Daten und Geheimnisse sicher zu speichern und zu verwalten.
• Füge Rahmen aus Figma-Designs und Bildern direkt in den Chat ein.
• Gib deine Ideen und Anweisungen in das Eingabefeld ein.

Die Vorschau wird jedes Mal aktualisiert, wenn du eine neue Eingabe machst und die KI Änderungen vornimmt.

Falls du beim Aktualisieren auf Probleme stößt, sieh dir unsere Empfehlungen zur Fehlerbehebung in Figma Make an.

Zeige- und Bearbeitungswerkzeug

Das Zeigen und Bearbeiten -Tool ermöglicht es dir, auf Elemente in deinem funktionalen Prototyp oder deiner Web-App zu zeigen. Abhängig von der Art des Elements und der Art und Weise, wie es generiert wurde, kannst du verschiedene Eigenschaften ändern, wie Farben, Innenabstand, Ränder, Textgestaltung und mehr. Du kannst das Modell auch dazu auffordern, Änderungen direkt an diesem Element vorzunehmen.

So benutzt du das Werkzeug Punkt und bearbeiten:

1. Klicke unten im Promptsfeld auf Point und bearbeiten.
2. Klicke in der Vorschau auf das Element, das du ändern möchtest.
3. Nehmen du Änderungen mithilfe der Symbolleiste vor.
4. Klicke optional auf und fordere das Modell auf, Änderungen an dem von dir ausgewählten Element vorzunehmen.

Die genauen Eigenschaften, die du bearbeiten kannst, hängen vom Typ des ausgewählten Elements ab. Einige Elemente können eine Mischung der unten beschriebenen Eigenschaften aufweisen.

Bilder bearbeiten

Wenn du ein Bild bearbeitest, kannst du:

• Lade ein neues Bild hoch, um das vorhandene zu ersetzen
• Ändere den Randradius
• Ändere den Abstand um das Bild herum (die Ränder und den Innenabstand)
• Gehe zum Quellcode

Text bearbeiten

Wenn du ein Element bearbeitest, das Text enthält, wie zum Beispiel einen Absatz oder eine Überschrift, kannst du:

• Wechsel zwischen kostenlosen Google-Schriftarten
• Ändere die Textfarbe
• Passe die Größe des Textes an
• Mach den Text fett
• Schreibe den Text kursiv
• Unterstreiche den Text
• Passe die Ausrichtung des Textes an
• Ändere den Abstand um den Text (die Ränder und den Innenabstand)
• Gehe zum Quellcode

Container bearbeiten

Wenn du ein Containerelement wie ein Div oder einen Abschnitt bearbeitest, kannst du:

• Ändere die Hintergrundfarbe
• Ändere den Randradius
• Ändere den Abstand des Containers (die Ränder und den Innenabstand)
• Gehe zum Quellcode

Prompt zum Bearbeiten

Wenn du ein Element mit dem Bearbeitungswerkzeug auswählst, kannst du das Modell auffordern, Änderungen direkt an diesem Element vorzunehmen. Wenn ein Element keine bearbeitbaren Eigenschaften hat, wird das Eingabefeld standardmäßig in der Symbolleiste angezeigt. Andernfalls klicke auf , um das Promptsfeld anzuzeigen.

Versionsverlauf

Während du im KI-Chat sprichst, wird für jede Version deines funktionalen Prototyps oder deiner Web-App ein Checkpoint erstellt. Du kannst durch den KI-Chat scrollen und frühere Versionen deines funktionalen Prototyps oder deiner Web-App wiederherstellen. Nutze den Versionsverlauf, wenn du mit früheren Versionen deines funktionalen Prototyps oder deiner Web-App arbeiten möchtest oder wenn du bei einem Schritt der Konversation auf Probleme stößt.

Um eine frühere Version wiederherzustellen, klicke auf Diese Version wiederherstellen.

Wenn du eine Version wiederherstellst, gehen keine Schritte der Unterhaltung oder Versionen verloren, die nach der wiederhergestellten Version erstellt wurden. Du kannst jederzeit zu diesen Versionen zurückkehren.

Nächste Schritte

Wenn Figma Make mit der Generierung des Codes deines funktionalen Prototyps, deiner Web-App oder deiner interaktiven UI fertig ist, kannst du:

• Teile die Vorschau mit anderen
• Veröffentliche einen funktionalen Prototyp oder eine Web-App in der Figma-Community
• Veröffentliche deinen funktionalen Prototyp oder deine Web-App

Best Practices

Im Folgenden findest du Best Practices für die Arbeit mit Figma Make, einschließlich allgemeiner Best Practices sowie Best Practices für die Arbeit mit Anhängen und das Beheben von Problemen.

Allgemeine Best Practices

Im Folgenden findest du einige Best Practices, die bei der Arbeit mit dem Chat Composer in Figma Make hilfreich sind:

• Sei klar und direkt. Wenn du im KI-Chat eine Eingabe machst, solltest du möglichst genau sagen, was für ein Ergebnis du haben willst. Wenn du genau sagst, was du willst, gibt das dem Modell weniger Möglichkeiten, Annahmen zu treffen, und es ist unwahrscheinlicher, dass es versucht, proaktiv Funktionen hinzuzufügen, die du nicht beabsichtigst.

  ✅ Prompt:

  Erstelle eine App zum Notizenmachen. Ich möchte in der Lage sein:

  1. Benenne eine Datei.
  2. Text hinzufügen und bearbeiten.
  3. Formatiere den Text, z. B. fett, kursiv oder durchgestrichen.
  4. Füge Links in den Text ein.
  5. Speichere die Datei im Markdown-Format.

  ⛔ Prompt:

  Erstelle eine App, in der ich Notizen machen kann.

• Verwende Beispiele. Wenn du im KI-Chat dazu aufforderst, solltest du Beispiele dafür geben, wie das Endergebnis aussehen soll. Die Beispiele können aufgeschrieben werden, und Figma-Designs können auch verwendet werden, um mehr Orientierung zu geben. Bilder können dabei helfen, das Modell näher an das gewünschte Ergebnis heranzuführen, allerdings gibt es dabei einige Einschränkungen. Das Modell ist beispielsweise nicht in der Lage, exakte Farben aus einem Bild herauszuarbeiten.

  ✅ Diese Methoden können einzeln oder zusammen in einem einzigen Prompt verwendet werden.

  Geschrieben

  Füge einen Login-Bildschirm hinzu. Füge gemeinsame Elemente für Login-Bildschirme ein. Du solltest beispielsweise ein Benutzernamenfeld mit der Bezeichnung „E-Mail“ und einen Link zum Erstellen von Konten mit der Bezeichnung „Benötigst du ein Konto?“ einfügen. Hier anmelden.

  Designs

  Verwende das beigefügte Design als Beispiel für den Warenkorb.

• Gib keine vertraulichen Informationen preis. Figma Make eignet sich zwar hervorragend zum Erstellen von Apps und interaktiven UI, aber du solltest keine Dinge wie API-Schlüssel, E-Mail- und Straßenadressen, persönliche Daten, ID-Nummern und ähnlich sensible Daten im Chat Composer selbst bereitstellen. Wenn du stattdessen eine App wünschst, die z. B. API-Anfragen für dich ausführen kann, weise das Modell an, welche Art von sicheren oder vertraulichen Funktionen du erstellen möchtest. Figma Make wird dir helfen, ein Backend hinzuzufügen, um Daten zu verarbeiten.

  ✅ Prompt:

  Ich möchte Anfragen an eine private API senden. Füge ein Eingabefeld hinzu, in das ich den Schlüssel einfügen kann.

  ⛔ Prompt:

  Verwende diesen Schlüssel für die API-Anfragen: 11qYAYKxCrfVS_7TyWQHOg

Arbeiten mit Anhängen

Wenn du mit dem Anhängen von Bildern und Designs an deine Prompt arbeitest, findest du hier einige Best Practices, die du befolgen solltest.

• Verwende in Designs nach Möglichkeit das Auto-Layout. Wenn du ein Design oder eine Komponente anhängst, versteht das System den Fluss von Inhalten mithilfe des Auto-Layouts gut.
• Konzentriere dich zuerst auf das Layout und dann auf die Funktionalität. Leite das System zum gewünschten Layout an und füge dann mit nachfolgenden Anweisungen Funktionen zu diesem Layout hinzu.
• Arbeite in Schritten. Anstatt zu versuchen, dem System eine vollständige End-to-End-Beschreibung des gewünschten Ergebnisses zu geben, beginne mit einer allgemeinen Beschreibung dessen, was du möchtest. Dann füge während der Arbeit immer mehr Details und Funktionen hinzu. Wenn du Komponenten und Bilder von komplexeren Designs anhängst, hänge sie Frame für Frame an, anstatt alles auf einmal.
• **Iteriere das Ergebnis.** Bei komplexen funktionalen Prototypen oder Web-Apps sind wahrscheinlich mehrere Gesprächsrunden nötig, um ein Ergebnis zu erzielen, das alle deine Anforderungen erfüllt. Zögere nicht, dem System mitzuteilen, wo die Funktionalität falsch ist. Gib dabei Beispiele für die gewünschten Ergebnisse.
• Gemeinsame Designelemente und Layouts sorgen für die besten Ergebnisse auf Anhieb. Zum Beispiel funktionieren einfache Galerien und Web-Apps, die nur einen primären Frame verwenden, bei ähnlichen Designansätzen gut. Komplexere oder neuartigere Layouts erfordern möglicherweise zusätzliche Prompts.
• Konzentriere dich auf Desktop- und Vollbild-freundliche Ergebnisse. Wir arbeiten daran, die mobile Ausgabe zu verbessern, aber im Moment funktionieren Inhalte, die auf Vollbildschirme passen, am besten.

Einzelne Anhänge

Wenn du mit einzelnen Anhängen arbeitest, findest du hier einige Best Practices, die du befolgen solltest.

• Gib einen exakten 1:1-Build oder eine Referenz als Stil an. Sag dem System in deiner Eingabe, ob du eine exakte 1:1-Erstellung des angehängten Dokuments möchtest oder ob das angehängte Dokument als Stilvorlage oder Referenz dienen soll.
• Füge Details für jeden Abschnitt des Builds hinzu. Für die genaueste 1:1-Nachbildung kannst du deine Wünsche genauer angeben. Versuche, dies Abschnitt für Abschnitt in deinem Design zu tun. Du kannst das Modell auch bitten, beim Verfassen einer detaillierteren Prompt zu helfen.

Mehrere Anhänge

Wenn du mit mehreren Anhängen arbeitest, findest du hier einige Best Practices, die du befolgen solltest.

• Bildschirm für Bildschirm erstellen. Du kannst mehrere Designs oder Bilder anhängen, aber um die besten 1:1-Ergebnisse zu erzielen, versuche, jeweils nur ein oder zwei Designs anzuhängen. Denk daran: Das System merkt sich, was du angehängt hast. Wenn es es also beim ersten Mal nicht erhalten hat, erinnere es daran, was du angehängt hast, und versuche es erneut.
• Stilverweise auf mehreren Bildschirmen. Du kannst mehrere Designs oder Bilder anhängen, um den gewünschten Stil zu erstellen. Denk aber daran, dem System mitzuteilen, dass die Bilder als Inspiration dienen sollen und nicht 1:1 übernommen werden sollen.

Probleme lösen

Wenn du versuchst, auftretende Probleme zu beheben oder zu umgehen, findest du hier einige Best Practices, die du befolgen solltest.

• Probiere kleinere Designs aus. Wenn dein Design nicht originalgetreu nachgebildet wird, versuche es mit einem kleineren Anhang für eine genauere Verarbeitung.
• **Versuche es mit weniger Bildern und weniger inhaltsreichen Designs.** Wenn du Designs anhängst, die viele Bilder, SVGs oder Vektorillustrationen enthalten, kann es manchmal zu Problemen mit dem System kommen. Versuche, die Bildqualität oder -größe zu verringern oder einen weniger umfangreichen Anhang zu verwenden.