Du hast deinen ersten Prompt erstellt und bist jetzt bereit für das, was als Nächstes kommt. Hier sind einige häufige Anwendungsfälle und Anforderungen, die nach der ersten Erstellung deiner App oder eines funktionalen Prototyps auftreten.
- Unterstützung mehrerer Benutzer*innen
- Wechsel zu Figma Design
- Teile deine Arbeit
- Hole dir deinen Code
- Erkläre den Code
- Vor dem Ändern planen
Unterstützung mehrerer Benutzer*innen
Viele Apps müssen mehrere Benutzer*innen unterstützen. Beispiel:
- Eine App, mit der Benutzer*innen Tournierpläne ausfüllen und teilen können
- Eine Social-Media-App, bei der sich Benutzer*innen anmelden, Profile erstellen und Beiträge veröffentlichen können
- Ein Spiel, das eine globale Rangliste oder Multiplayer-Funktionen bietet
In all diesen Fällen verwendest du Supabase, um ein Backend für deine App bereitzustellen, das es Benutzer*innen ermöglicht, sich anzumelden und Daten wie Konten, Beiträge, Punkte oder andere Inhalte zu speichern.
Beispiel-Prompt
Ich möchte, dass meine App mehrere Benutzer*innen unterstützt. Verwende Supabase, um Benutzer*innen die Möglichkeit zu geben, Konten zu erstellen und sich anzumelden. Implementiere die entsprechende Backend-Funktionalität pro Benutzer*in.Probiere es in dieser Community-Datei aus
Um den Beispiel-Prompt auszuprobieren, remixe diese Community-Datei und füge den Prompt in den KI-Chat ein. Du kannst den Prompt modifizieren, um mit zusätzlichen Funktionen zu experimentieren.
Beispiel-App: Markdown-Notizen
Warum das funktioniert
Der Beispiel-Prompt erklärt Figma Make klar und deutlich, dass du ein Backend hinzufügen möchtest, um mehrere Benutzer*innen zu unterstützen. Der Prompt löst den Supabase-Backend-Fluss aus. Aufgrund der Formulierung berücksichtigt Figma Make den Kontext deines bestehenden Gesprächs und erstellt eine angemessene Backend-Unterstützung für die App, an der du arbeitest.
Wechsel zu Figma Design
Deine App befindet sich in einem Zustand, den du in Figma Design übertragen möchtest. In diesem Fall verwendest du die Funktion Design kopieren. In der Vorschau deiner App gelangst du zu der Ansicht, die du kopieren möchtest, und befolgst dann die Anweisungen in Kopieren von Figma Make-Vorschauen als Designebenen.
Derzeit kannst du keine funktionsfähige Version deiner Figma Make-Datei in Figma Design erhalten, und Änderungen, die du an Ebenen in Figma Design vornimmst, werden nicht in deine Figma Make-Datei zurückübertragen.
Probiere es in dieser Community-Datei aus
Um die Funktion Design kopieren zu testen, remixe diese Community-Datei. Du kannst Elemente auf der Arbeitsfläche hinzufügen, Ebenen verschieben und die Arbeitsfläche erweitern, um die Ansicht zu füllen. Probiere die Funktion Design kopieren mit verschiedenen Arbeitsflächenstatus aus und füge die Ebenen in Figma Design ein, um das Ergebnis zu sehen.
Beispiel-App: Arbeitsflächen-Editor
Warum das funktioniert
Wenn du die Funktion Design kopieren verwendest, wird der aktuelle Status der Vorschau in deine Figma Make-Datei kopiert. Das bedeutet, dass du zu verschiedenen Teilen deiner App gehst, beispielsweise ein Menü erweitern oder eine Überlagerung öffnen, und dann diesen Status der Vorschau als bearbeitbare Ebenen in Figma Design kopierst.
Teile deine Arbeit
Du bist jetzt bereit, die Arbeit, die du in Figma Make geleistet hast, zu teilen. Es gibt verschiedene Ansätze für die Freigabe, je nach deinen Anforderungen:
- Die ganze Figma Make-Datei teilen: Wenn du deinen Teamkolleg*innen die Möglichkeit geben möchtest, deinen Chatverlauf zu sehen und mit dir zusammenzuarbeiten, kannst du die Figma Make-Datei selbst teilen.
- Andere deine Arbeit weiterentwickeln lassen: Wenn du deinem Team die Möglichkeit bieten möchtest, Iterationen auf eine Weise durchzuführen, die sich nicht auf deine Originaldatei auswirken, kannst du die Figma Make-Datei als Vorlage veröffentlichen.
- Eine funktionierende Version intern anzeigen: Wenn du den Chatverlauf verbergen und einer begrenzten Anzahl von Personen eine funktionierende Version deiner App oder eines funktionalen Prototyps zur Verfügung stellen möchtest, kannst du eine passwortgeschützte Version deiner App veröffentlichen oder sie nur für deine Organisation veröffentlichen.
- Deine Arbeit im Internet teilen: Wenn du bereit bist, das Ergebnis deiner Arbeit mit allen zu teilen, kannst du deine App im Live-Web veröffentlichen.
Hole dir deinen Code
In einigen Fällen möchtest du deinen Code möglicherweise in Editoren oder Systeme außerhalb von Figma übertragen, z. B. um ihn in ein GitHub-Repository zu verschieben oder ihn in VS Code oder einer anderen IDE zu ändern.
Es gibt zwei Ansätze, um an deinen Code zu gelangen:
- Lade im Code-Editor für deine Figma Make-Datei den Code herunter: Wenn du Code von Figma Make herunterlädst, erstellt das Produkt eine ZIP- Datei, die den Code für deine App enthält. Du kannst die ZIP- Datei herunterladen und den Inhalt in die von dir bevorzugte IDE ziehen. Änderungen, die du am Code vornimmst, können nicht automatisch an Figma Make zurückgeschoben werden. Du kannst deine Änderungen jedoch manuell kopieren und auf der Oberfläche einfügen oder die Änderungen im KI-Chat teilen.
- Code zu GitHub schieben: Alle Benutzer*innen von Figma Make können Code zu GitHub schieben. Wenn du diese Funktion verwendest, erstellt Figma Make ein GitHub-Repository in deinem GitHub-Konto oder deiner Organisation, das der Figma Make-Datei entspricht, in der du dich befindest. Dann kannst du die Änderungen von Figma Make zu diesem Repository schieben, während du weiterarbeitest.
Erkläre den Code
Manchmal möchtest du besser verstehen, was der Code deiner App tut. Du kannst Figma Make auffordern, den Code zu erklären, ohne tatsächliche Änderungen an deiner App vorzunehmen.
Beispiel-Prompt
Erkläre mir den Code dieser App. Beginne mit den Grundlagen.Probiere es in dieser Community-Datei aus
Remixe diese Community-Datei und probiere den Beispiel-Prompt aus, um eine Erklärung des Codes in der Figma Make-Datei zu erhalten.
Beispiel-App: Tetromino-Spiel
Beispielergebnis
Tetromino-Spiel – Codeerklärung
High-Level-Architektur
Dies ist ein klassisches Tetris-ähnliches Spiel, erstellt mit React und TypeScript. Die App folgt einer komponentenbasierten Architektur mit drei Hauptteilen:
1. Komponentenstruktur
`App.tsx` – Der Hauptspielcontroller, der die gesamte Spielelogik und den Spielstatus enthält
`GameBoard.tsx` – Visuelle Komponente, die das 10x20 Spielfeld rendert
`NextPiece.tsx` - Vorschaukomponente, die das nächste Tetromino zeigt
`types.ts` – TypeScript-Schnittstellen für Typsicherheit
2. Kernspielkonzepte
Das Spiel verwaltet mehrere wichtige Zustandskomponenten:
Spielbrettzustand: Ein 20x10 Raster mit Zellen, die entweder leer oder mit einem farbigen Block gefüllt sind
Aktuelles Teil: Das aktive fallende Tetromino mit seiner Form, Farbe und Position
Nächstes Teil: Vorschau, was als nächstes kommt
Spielstatistiken: Punktzahl, Level, gelöschte Linien
Spielstatus: Spielend, pausiert oder Spiel beendet
3. Spielablauf
```
Spiel starten
↓
Neues Teil erscheinen lassen
↓
Nach unten bewegen (alle x ms basierend auf Level)
↓
Kollision prüfen
↓
Bei Kollision → Teil mit Brett verschmelzen → Fertige Reihen löschen → Neues Teil erscheinen lassen
Keine Kollision → Weiter bewegen
↓
Wiederholen
```
---
Detaillierte Aufschlüsselung
App.tsx - Die Spiel-Engine
Konstanten & Daten
TETROMINOES-Array: Definiert alle 7 klassischen Formen (I, O, T, S, Z, J, L) mit ihren Rotationsmatrizen und Farben
BRETTBREITE/HÖHE: 10 Spalten × 20 Reihen
Wichtige Zustandsvariablen
```typescript
board // 2D Array aus Zellen
currentPiece // Aktive Tetromino-Form
currentPosition // {x, y}-Koordinaten
nextPiece // Vorschau-Teil
score, level, linesCleared
isPlaying, isGameOver
```
Kernfunktionen
1. Kollisionsprüfung (`checkCollision`)
Prüft, ob ein Teil an einer bestimmten Position überlappen würde mit:
Brettgrenzen (links, rechts, unten)
Bereits platzierten Blöcken
2. Teilebewegung (`moveLeft`, `moveRight`, `moveDown`)
Versucht, das Teil in Richtung zu bewegen
Aktualisiert die Position nur, wenn keine Kollision festgestellt wird
3. Rotation (`rotate`)
Transponiert die Formmatrix und kehrt die Zeilen um (90° im Uhrzeigersinn)
Dreht nur, wenn die neue Ausrichtung nicht kollidiert
4. Verschmelzen & Löschen (`mergePieceToBoard`, `clearLines`)
Wenn ein Teil landet, wird es dauerhaft zum Brett hinzugefügt
`clearLines` prüft auf vollständige Reihen (alle 10 Zellen gefüllt)
Entfernt vollendete Zeilen und fügt oben leere Reihen hinzu
Punktesystem: 1 Zeile = 100 Punkte, 2 = 300 Punkte, 3 = 500 Punkte, 4 = 800 Punkte (multipliziert mit dem Level)
5. Harter Fall (`hardDrop`)
Lässt das Teil sofort an die niedrigste gültige Position fallen
Nützlich für schnelles Gameplay
Spielschleife (useEffect)
```typescript
setInterval(() => moveDown(), speed)
// Geschwindigkeit nimmt ab, wenn das Level steigt
// Löscht das Intervall, wenn pausiert/Spiel beendet
```
Tastatursteuerung (useEffect)
Pfeiltasten zur Bewegung
Leertaste/Pfeil nach oben zum Drehen
Eingabetaste für harten Fall
---
GameBoard.tsx - Die Anzeige
Diese Komponente ist rein visuell:
Nimmt Eigenschaften: Aktueller Brettzustand + aktives Teil
Kombiniert sie: Erstellt ein temporäres Anzeigebrett, indem das aktive Teil auf das statische Brett gelegt wird
Rendert das Raster: Verwendet CSS Grid mit 30px Zellen
Stil: Jede Zelle zeigt ihre Farbe, wenn gefüllt, dunkelgrau, wenn leer
```typescript
// Pseudo-Code
displayBoard = [...board]
Überlagerung currentPiece auf displayBoard an seiner Position
Rendert 200 Zellen (10×20) mit passenden Farben
```
---
NextPiece.tsx - Die Vorschau
Einfaches 4×4 Gitter, das das nächste Tetromino zeigt:
Kleinere Zellen (20px vs 30px)
Zentriert die Teilform innerhalb des Gitters
Gleiche Farbkennzeichnung wie das Hauptbrett
---
types.ts - Typdefinition
```typescript
Block: { filled: boolean, color: string } // Einzelne Zelle
Tetromino: { shape: number[][], color: string } // Teildefinition
Position: { x: number, y: number } s// Koordinaten
```
---
Wichtige Designentscheidungen
Unveränderliche Zustandsaktualisierungen: Erzeugt immer neue Arrays/Objekte anstatt zu mutieren
Callback-Hooks: Verwendet `useCallback`, um unnötiges erneutes Rendern zu vermeiden
Trennung der Zuständigkeiten: Anzeigekomponenten enthalten keine Logik
Spielschleife über setInterval: Einfaches zeitbasiertes Fallenlassen der Teile
Level-Fortschritt: Alle 10 Zeilen erhöht sich das Level und das Spiel wird schneller
Die Architektur ist klar und wartbar - die Spielelogik befindet sich in App.tsx, während das Rendering spezialisierten Komponenten überlassen wird!Warum das funktioniert
Figma Make kann die Code-Dateien, die es erstellt oder bearbeitet, lesen. Wenn Figma Make dazu aufgefordert wird, den Code einer App zu erklären, kann es den Inhalt der Code-Dateien zusammenfassen und detaillierte Erläuterungen zur Funktionsweise des Codes geben.
Vor dem Ändern planen
Wenn du mit Problemen in deiner App zu tun hast, beispielsweise wenn Figma Make Debug-Funktionen in den Code einfügt oder versucht, große, komplexe Änderungen auszuführen, solltest du Figma Make anweisen, die Änderungen zunächst zu planen.
Beispiel-Prompt
Erster Prompt:
Nimm keine Änderungen am Code der App vor. Erstelle eine Datei namens plan.md. Notiere in der Datei plan.md einen Plan, um die Änderungen umzusetzen, die ich vornehmen möchte.Zweiter Prompt:
Verwende die neueste Version des Plans in plan.md, um Änderungen an der App vorzunehmen.Probiere es in dieser Community-Datei aus
Remixe diese Community-Datei und sende den ersten Prompt im KI-Chat mit einigen spezifischen Änderungen, die Figma Make implementieren soll. Teile Figma Make beispielsweise mit, dass du die Möglichkeit hinzufügen möchtest, Turnierpläne zu speichern und zu importieren.
Experimentiere dann im Code-Editor, indem du Änderungen an der von Figma Make erstellten Datei plan.md vornimmst.
Sende abschließend den zweiten Prompt im KI-Chat, damit Figma Make die in der Datei plan.md aufgeführten Änderungen umsetzt.
Beispiel-App: Turnierpläne
Warum das funktioniert
Figma Make kann bestimmte Dateien erstellen, wenn du es entsprechend anweist. Die Datei plan.md enthält einen Plan, den Figma Make ausführen kann, um komplexe Änderungen an deiner App vorzunehmen. Vor der Durchführung der Änderungen durch Figma Make die Datei plan.md zu erstellen, bietet den Vorteil, dass du den Plan vorher im Code-Editor überprüfen und eigene Änderungen oder Ergänzungen an dem Plan vornehmen kannst.
Der nachfolgende Prompt weist Figma Make dann an, den Plan zu verwenden, einschließlich aller von dir vorgenommenen Änderungen.