Aller plus loin : utiliser Figma Make

Vous avez créé votre premier prompt et maintenant vous êtes prêt pour la suite. Voici quelques cas d'utilisation courants ainsi que des besoins qui suivent la génération initiale de votre application ou prototype fonctionnel.

Prise en charge de plusieurs utilisateurs

De nombreuses applications devront prendre en charge plusieurs utilisateurs. Par exemple :

  • Une application qui permet aux utilisateurs de créer, puis de partager, des calendriers de tournoi
  • Un réseau social où les utilisateurs se connectent, ont des profils et publient
  • Un jeu qui dispose d'un classement ou d'une fonctionnalité multijoueur

Dans tous ces cas, vous utiliserez Supabase pour fournir un backend à votre application qui permet aux utilisateurs de se connecter et de stocker des données telles que des comptes, des publications, des scores ou d'autres contenus.

Exemple de prompt

Je veux que mon application prenne en charge plusieurs utilisateurs. Utilisez Supabase pour offrir un moyen aux utilisateurs de créer un compte et de se connecter. Mettez en œuvre la fonctionnalité backend par utilisateur appropriée.

Essayez-le dans ce fichier Communauté

Pour essayer le prompt exemple, remixez ce fichier communautaire et collez le prompt dans le chat IA. Vous pouvez modifier le prompt pour expérimenter des fonctionnalités supplémentaires.

Exemple d'application : Markdown Notes

Fichier de la communauté

Pourquoi cela fonctionne ?

L'exemple de prompt explique clairement à Figma Make que vous voulez ajouter un backend pour prendre en charge plusieurs utilisateurs. Le prompt déclenche le flux backend Supabase. En raison de la formulation, Figma Make prend en compte le contexte de votre conversation existante et construit un support backend approprié pour l'application sur laquelle vous travaillez.

Déplacement vers Figma Design

Votre application est maintenant prête à être transférée dans Figma Design. Dans ce cas, vous utiliserez la fonctionnalité Copier le design. Dans l'aperçu de votre application, accédez à la vue que vous souhaitez copier, puis suivez les instructions dans Copier un aperçu Figma Make en tant que calques de design.

Actuellement, vous ne pouvez pas obtenir une version fonctionnelle de votre fichier Figma Make dans Figma Design, et les modifications que vous apportez aux calques dans Figma Design ne sont pas appliquées à votre fichier Figma Make.

Essayez-le dans ce fichier Communauté

Pour tester la fonctionnalité Copier le design, remixez ce fichier communautaire. Vous pouvez ajouter des éléments au plan de travail, déplacer des calques et étendre la toile pour remplir la vue. Essayez la fonctionnalité Copier le design avec différents états du plan de travail et collez les calques dans Figma Design pour voir le résultat.

Exemple d'application : Canvas Editor

Fichier de la communauté

Pourquoi cela fonctionne ?

Lorsque vous utilisez la fonctionnalité Copier le design, elle copie l'état actuel de l'aperçu dans votre fichier Figma Make. Cela signifie que vous accédez à différentes parties de votre application, comme développer un menu ou ouvrir une superposition, puis copier cet état de l'aperçu dans Figma Design sous forme de calques que vous pouvez éditer.

Partagez votre travail

Vous êtes prêt à partager le travail que vous avez réalisé dans Figma Make. Il existe plusieurs approches différentes pour partager en fonction de vos besoins :

Obtenez votre code

Dans certains cas, vous voudrez peut-être intégrer votre code dans des éditeurs ou des systèmes en dehors de Figma, comme déplacer le code dans un dépôt GitHub, ou le modifier dans VS Code ou un autre IDE.

Il existe deux approches pour obtenir votre code :

  • Dans l'éditeur de code de votre fichier Figma Make, téléchargez le code : Lorsque vous téléchargez le code de Figma Make, le produit crée un fichier .zip qui contient le code de votre application. Vous pouvez télécharger le fichier .zip et en importer le contenu dans l'IDE de votre choix. Les modifications du code que vous faites ne peuvent pas être répercutées automatiquement vers Figma Make, bien que vous puissiez copier et coller manuellement vos modifications dans l'interface, ou partager les modifications dans le chat IA.
  • Poussez le code sur GitHub : Tous les utilisateurs de Figma Make peuvent pousser leur code sur GitHub. Lorsque vous utilisez cette fonctionnalité, Figma Make crée un dossier GitHub dans votre compte ou votre organisation qui correspond au fichier Figma Make dans lequel vous vous trouvez. Ensuite, vous pouvez pousser les modifications de Figma Make vers ce dossier au fur et à mesure que vous continuez à travailler.

Expliquez le code

Parfois, vous voulez mieux comprendre ce que fait le code de votre application. Vous pouvez inviter Figma Make à expliquer le code sans apporter de modifications réelles à votre application.

Exemple de prompt

Expliquez-moi le code de cette application. Commencez par un niveau élevé.

Essayez-le dans ce fichier Communauté

Remixez ce fichier communautaire et essayez l'exemple de prompt pour obtenir une explication du code dans le fichier Figma Make.

Exemple d'application : jeu Tetromino

Fichier de la communauté

Exemple de résultat

Tetromino - Explication du code

Architecture de haut niveau

Il s'agit d'un jeu classique de type Tetris construit avec React et TypeScript. L'application suit une architecture basée sur les composants avec trois parties principales :

1. Structure du composant
`App.tsx` - Le contrôleur principal du jeu contenant toute la logique du jeu et l'état
`GameBoard.tsx` - Composant visuel qui rend le champ de jeu 10x20
`NextPiece.tsx` - Composant de prévisualisation affichant le prochain tétrimino
`types.ts` - Interfaces TypeScript pour la sécurité des types

2. Concepts Clés du Jeu

Le jeu gère plusieurs éléments clés de l'état :
État du plateau : Une grille de cellules de 20x10, chacune vide ou remplie par un bloc coloré
Pièce actuelle : Le tetromino tombant avec sa forme, couleur et position
Pièce suivante : Aperçu de la pièce à venir
Statistiques du jeu : Score, niveau, lignes effacées
Statut du jeu : En cours, en pause ou terminé

3. Flux de la boucle de Jeu

```
Démarrer le jeu
    ↓
Faire apparaître une nouvelle pièce
    ↓
Descendre (toutes les X ms selon le niveau)
    ↓
Vérifier la collision
    ↓
Si collision → Fusionner la pièce au plateau → Effacer les lignes complètes → Faire apparaître une nouvelle pièce
Si pas de collision → Continuer à descendre
    ↓
Répéter
```

---

Analyse détaillée

App.tsx - Le moteur du jeu

Constantes et données
Tableau TETROMINO : il définit les 7 formes classiques (I, O, T, S, Z, J, L) avec leurs matrices de rotation et leurs couleurs
LARGEUR/HAUTEUR_DU_PLATEAU : 10 colonnes × 20 rangées

Variables d'état clés
```typescript
plateau              // Tableau 2D de cellules
pièceActuelle        // Forme du tetrimino actif
position actuelle     // Coordonnées {x, y}
pièce suivante        // Pièce d'aperçu
score, niveau, lignes effacées
est en cours, est terminé
```

Fonctions principales

1. Détection de collision (`checkCollision`)
Teste si une pièce à une position donnée chevaucherait :
Les limites du plateau (gauche, droite, bas)
Des blocs déjà placés

2. Mouvement de la pièce (`moveLeft`, `moveRight`, `moveDown`)
Tente de déplacer la pièce dans la direction
Met à jour la position uniquement si aucune collision n'est détectée

3. Rotation (`rotate`)
Transpose la matrice de la forme et inverse les rangées (90° dans le sens des aiguilles d'une montre)
Ne tourne que si la nouvelle orientation ne provoque aucune collision

4. Fusionner et effacer (`mergePieceToBoard`, `clearLines`)
Lorsque la pièce atterrit, elle est ajoutée de façon permanente au plateau
`clearLines` vérifie les rangées complètes (toutes les 10 cellules remplies)
Retire les lignes complètes et ajoute des rangées vides en haut
Score : 1 ligne = 100 pts, 2 = 300 pts, 3 = 500 pts, 4 = 800 pts (multiplié par le niveau)

5. Chute rapide (`hardDrop`)
Fait tomber instantanément la pièce jusqu'à la position valide la plus basse
Utile pour un jeu rapide

Boucle de jeu (`useEffect`)
```typescript
setInterval(() => moveDown(), vitesse)
// La vitesse diminue à mesure que le niveau augmente
// Efface l'intervalle lorsqu'en pause/jeu terminé
```

Contrôles clavier (`useEffect`)
Touches fléchées pour le mouvement
Barre d'espace/flèche haut pour la rotation
Entrée pour la chute rapide

---

GameBoard.tsx - L'affichage

Ce composant est purement visuel :

Prend des props : état actuel du plateau + pièce active
Les combine : Crée un plateau d'affichage temporaire en superposant la pièce active sur le plateau statique
Rend une grille : utilise CSS Grid avec des cellules de 30 px
Style : Chaque cellule montre sa couleur si remplie, gris foncé si vide

```typescript
// Pseudo-code
plateauAffichage = [...plateau]
Superposition de la pièce actuelle sur plateau - Affichage de sa position
Afficher 200 cellules (10×20) avec les couleurs appropriées
```

---

NextPiece.tsx - Aperçu

Une simple grille 4×4 montrant le prochain tetromino :
Cellules plus petites (20px vs 30px)
Centre la forme de la pièce dans la grille
Même codage couleur que le plateau principal

---

types.ts - Définitions des types

```typescript
Bloc: { filled: boolean, color: string }  // Cellule unique
Tetromino : { shape: number[][], color: string }  // Définition de la pièce
Position : { x: number, y: number }  // Coordonnées
```

---

Décisions clés de conception

Mises à jour d'états immuables : crée toujours de nouveaux tableaux/objets plutôt que de modifier
Hooks de rappel : utilise `useCallback` pour éviter les rendus inutiles
Séparation des préoccupations : Les composants d'affichage ne contiennent pas de logique
Boucle de jeu via setInterval : Chute de pièces basée sur le temps, simple
Progression de niveau : augmentation du niveau et accélération du jeu toutes les 10 lignes

L'architecture est propre et fonctionnelle : la logique du jeu vit dans App.tsx tandis que le rendu est délégué à des composants spécialisés !

Pourquoi cela fonctionne ?

Figma Make est capable de lire les fichiers de code qu'il crée ou modifie. Lorsqu'on lui demande d'expliquer le code d'une application, Figma Make est capable de résumer le contenu des fichiers de code, ainsi que de donner des explications détaillées sur le fonctionnement du code.

Prévoyez avant de modifier

Lorsque vous rencontrez des problèmes dans votre application, tel que Figma Make ajoutant une fonctionnalité de débogage dans le code ou tentant d'exécuter des changements grands et complexes, vous pouvez vouloir instruire Figma Make de planifier les changements d'abord.

Exemple de prompt

Premier prompt :

Ne faites aucun changement au code de l'application. Créez un fichier appelé plan.md. Dans plan.md, rédigez un plan pour mettre en œuvre les modifications que je souhaite apporter.

Deuxième prompt :

Utilisez la dernière version du plan dans plan.md pour apporter des modifications à l'application.

Essayez-le dans ce fichier Communauté

Remixez ce fichier communautaire et envoyez le premier prompt dans le chat IA avec des changements spécifiques pour que Figma Make les mette en œuvre. Par exemple, indiquez à Figma Make que vous souhaitez ajouter la capacité de sauvegarder et d'importer des calendriers de tournoi.

Ensuite, dans l'éditeur de code, expérimentez en apportant des modifications au fichier plan.md que Figma Make crée.

Enfin, envoyez le deuxième prompt dans le chat IA pour que Figma Make mette en œuvre les changements détaillés dans le fichier plan.md.

Exemple d'application : calendriers de tournoi

Fichier de la communauté

Pourquoi cela fonctionne ?

Figma Make est capable de créer des fichiers spécifiques lorsque vous lui demandez de le faire. Le fichier plan.md contiendra un plan que Figma Make peut exécuter afin d'apporter des modifications complexes à votre application. L'avantage de créer le fichier plan.md avant que Figma Make n'exécute les modifications est que vous pouvez valider le plan dans l'éditeur de code, et apporter vos propres modifications ou ajouts au plan.

Le prompt suivant demande alors à Figma Make d'utiliser le plan, y compris toutes les modifications que vous avez apportées.

Cet article vous a-t-il été utile ?

Your feedback helps us improve Figma’s Help Center. To get help from support, submit a request through our contact form.

Your feedback helps us improve Figma’s Help Center. To get help from support, submit a request through our contact form.

Thank you for helping us improve Figma’s Help Center!