Modifier le code d'un prototype fonctionnel ou d'une application web

Lorsque vous souhaitez modifier directement le code de votre prototype fonctionnel ou de votre application web, Figma Make fournit un éditeur léger dans le contexte de votre fichier.

Pour accéder à l'éditeur de code, veuillez cliquer sur Code en haut de votre fichier Figma Make.

Figma Make fournit plusieurs fonctionnalités pour travailler avec du code :

• Un éditeur de code, où vous pouvez modifier le code généré par Figma Make, ou écrire ou importer votre propre code. Vous pouvez également mettre en forme les modifications que vous apportez ou collez dans l'éditeur.
• Un moyen de télécharger votre code, y compris tous les fichiers dans l'explorateur de fichiers, pour votre prototype fonctionnel ou votre application web.
• Un explorateur de fichiers que vous utilisez pour parcourir les fichiers créés par Figma Make. Vous ne pouvez pas créer vos propres fichiers dans l'explorateur de fichiers, mais vous pouvez demander à Figma Make de créer des fichiers pour vous.
• Un endroit pour ajouter des directives que Figma Make suivra lors de la génération de code pour votre prototype fonctionnel ou votre application web. Pour en savoir plus, consultez la section Ajouter des directives à Figma Make.

Modifier le code

Dans l'éditeur de code, vous pouvez modifier directement les fichiers présents dans l'explorateur de fichiers. App.tsx, le fichier principal de votre prototype fonctionnel ou application web, est sélectionné par défaut dans l'explorateur de fichiers.

Vous pouvez modifier le code existant, écrire votre propre code ou coller du code directement dans l'éditeur.

Annuler les modifications du code

Lorsque vous apportez des modifications au code, Figma Make crée des points de contrôle pour ces changements. Vous pouvez rétablir les modifications de votre code pour revenir à la version du fichier de la dernière étape de la conversation.

Pour annuler vos modifications à un fichier, dans le chat IA, cliquez sur à côté du fichier que vous souhaitez restaurer.

Formater le code

Pour formater le code, appuyez sur CMD + S (Mac) ou CTRL + S (Windows), ou cliquez sur Format code dans le coin supérieur droit de l'éditeur de code. Lorsque vous formatez, Figma Make embellit le code, par exemple en corrigeant la disposition des lignes et l'indentation.

Télécharger le code

Pour télécharger un fichier .zip contenant tous les fichiers de votre fichier Figma Make, dans le coin supérieur droit de l'éditeur de code, cliquez sur Download code.

Parcourir les fichiers

Dans l'explorateur de fichiers situé à gauche de l'éditeur de code, vous pouvez cliquer pour développer les dossiers et sélectionner des fichiers. Lorsque vous sélectionnez un fichier, son contenu s'affiche dans l'éditeur de code.

Vous ne pouvez ni créer ni supprimer de fichiers dans l'explorateur de fichiers. Si vous souhaitez ajouter de nouveaux fichiers à l'explorateur de fichiers, demandez-le à Figma Make dans le chat IA. Par exemple : « Ajoute un fichier toolbar.tsx avec du code modèle ».