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.
Wenn du den Code deines funktionalen Prototyps oder deiner Web-App direkt mit Figma Make bearbeiten möchtest, bietet Figma Make einen schlanken Editor im Kontext deiner Datei.
Um den Code-editor zu öffnen, klicke oben in deiner Datei von Figma Make auf Code.
Figma Make bietet mehrere Funktionen für die Arbeit mit Code:
- Ein Code-editor, in dem du Änderungen an dem von Figma Make generierten Code vornehmen oder deinen eigenen Code schreiben oder einfügen kannst. Du kannst die Änderungen, die du vornimmst, auch formatieren oder in den Editor einfügen.
- Eine Möglichkeit, deinen Code herunterzuladen, einschließlich aller Dateien im Datei-Explorer für deinen funktionalen Prototyp oder deine Web-App.
- Ein Datei-Explorer, mit dem du durch die von Figma Make erstellten Dateien navigierst. Du kannst keine eigenen Dateien im Datei-Explorer erstellen, aber du kannst Figma Make anweisen, Dateien für dich zu erstellen.
- Ein Ort zum Hinzufügen von Richtlinien, die Figma Make beim Generieren von Code für deinen funktionalen Prototyp oder deine Web-App befolgt. Weitere Informationen findest du unter Richtlinien zu Figma Make hinzufügen.
Code bearbeiten
Im Code-Editor kannst du direkt Änderungen an Dateien vornehmen, die im Datei-Explorer vorhanden sind. App.tsx, die Hauptdatei für deinen funktionalen Prototyp oder deine Web-App, ist standardmäßig im Datei-Explorer ausgewählt.
Du kannst den vorhandenen Code bearbeiten, deinen eigenen Code schreiben oder Code direkt in den Editierbereich einfügen.
Änderungen am Code rückgängig machen
Wenn du Änderungen am Code vornimmst, erstellt Figma Make Prüfpunkte für diese Änderungen. Du kannst deine Code-Änderungen rückgängig machen, um zur Dateiversion aus dem letzten Schritt der Konversation zurückzukehren.
Um deine Änderungen an einer Datei rückgängig zu machen, klicke im KI-Chat neben der Datei, die du rückgängig machen willst, auf .
Deinen Code formatieren
Um den Code zu formatieren, drücke CMD + S (Mac) oder CTRL + S (Windows), oder klicke auf Code formatieren in der oberen rechten Ecke des Code-Editors. Beim Formatieren verschönert Figma Make den Code, z. B. das Korrigieren von Linien und Einrückungen.
Lade deinen Code herunter
So lädst du eine ZIP-Datei herunter, die alle Dateien in deiner Datei von Figma Make enthält, klicke in der oberen rechten Ecke des Editors auf Code herunterladen.
Dateien entdecken
Im Datei-Explorer auf der linken Seite des Code-Editors kannst du klicken, um Ordner zu erweitern und Dateien auszuwählen. Wenn du eine Datei auswählst, wird der Inhalt der Datei im Editierbereich angezeigt.
Du kannst im Datei-Explorer keine Dateien erstellen oder löschen. Wenn du dem Datei-Explorer neue Dateien hinzufügen möchtest, fordere Figma Make im KI-Chat auf. Zum Beispiel: „Füge eine Datei „Symbolleiste.tsx” mit etwas Vorlagencode hinzu.“