Passer au contenu principal

Documentation Index

Fetch the complete documentation index at: https://docs.replit.com/llms.txt

Use this file to discover all available pages before exploring further.

⏰ Durée estimée : 15 minutes Un design Figma montre à quoi doit ressembler l’expérience. Replit peut transformer un cadre Figma en application React que vous pouvez tester, affiner et partager. Vous utiliserez FitStart comme exemple : un cadre Figma pour un tableau de bord de suivi fitness qui nécessite un formulaire d’entraînement fonctionnel, une carte de progression, un objectif hebdomadaire et une mise en page mobile.
Le cadre Figma source pour le suivi fitness FitStart montrant le tableau de bord, le profil et les écrans de support que vous allez transformer en application Replit interactive

​
Ce que vous allez apprendre

Vous apprendrez à :
  • Préparer un cadre Figma pour de meilleurs résultats d’importation.
  • Importer un cadre Figma dans Replit.
  • Vérifier ce que Replit a préservé du design.
  • Affiner le comportement, la réactivité et le polish après l’importation.
  • Utiliser Agent, Canvas et l’éditeur visuel quand l’application importée nécessite des modifications.

​
Avant de commencer

Vous avez besoin de :
  • Un compte Replit.
  • Un fichier Figma avec le cadre que vous souhaitez importer.
  • L’accès pour connecter votre compte Figma.
  • L’URL du cadre Figma exact que vous souhaitez transformer en application.
Les limites d’importation Figma sont définies par Figma — pour les limites exactes et les exigences de compte, consultez la documentation développeur de Figma.

​
Importer le cadre Figma

Utilisez le flux d’importation Replit pour transformer le cadre en application React.
La page d'importation Replit avec la tuile Figma Design mise en évidence ; la sélectionner ouvre le flux d'importation Figma qui transforme un cadre en application React
1

Ouvrir l'importation Replit

Allez sur replit.com/import.
2

Sélectionner Figma Design

Choisissez Figma Design et connectez votre compte Figma.
3

Copier l'URL du cadre

Dans Figma, sélectionnez le cadre exact que vous souhaitez importer et copiez son URL.
4

Coller et importer

Collez l’URL du cadre dans Replit et sélectionnez Importer.

​
Ou joindre Figma directement à un prompt

Si vous préférez passer le cadre à Agent avec un prompt de construction, utilisez le menu de pièces jointes du compositeur de prompt plutôt que l’assistant d’importation.
1

Ouvrir Replit et mettre le focus sur la boîte de prompt

Allez sur replit.com. Le compositeur de prompt est sur l’écran d’accueil.
2

Ouvrir le menu de pièces jointes

Sélectionnez le bouton + sur le compositeur de prompt pour ouvrir le menu Ajouter une pièce jointe.
Le compositeur de prompt Replit avec le bouton plus mis en évidence ; le sélectionner ouvre le menu Ajouter une pièce jointe où vous pouvez importer un design Figma
3

Choisir Importer un design Figma

Choisissez Importer un design Figma et collez l’URL du cadre Figma exact que vous souhaitez construire.
4

Décrire ce qu'il faut construire

Saisissez un court prompt qui indique à Agent quoi faire avec le design — par exemple, ce qui doit être interactif, ce qui doit rester proche des visuels et le comportement bureau et mobile attendu. Soumettez quand vous êtes prêt.
Agent importe le cadre et construit une application interactive basée sur votre prompt. Testez-la dans Preview quand la construction est terminée.
L'application FitStart interactive construite par Agent à partir du cadre Figma, fonctionnant dans un onglet de navigateur avec des cartes de statistiques, un formulaire Enregistrer un entraînement, les entrées du jour et un graphique de tendance sur 7 jours

​
Ce que Replit importe

Replit utilise le cadre Figma pour créer un projet React. L’importation peut inclure :
  • Le thème et le style des composants.
  • Les images et les ressources d’icônes.
  • Le scaffolding d’application pour un projet React.
L’importation vous donne un point de départ fonctionnel. Vous devez quand même tester le comportement, la réactivité et toutes les interactions que le design ne définit pas entièrement.

​
Vérifier ce qu’Agent a construit

Après l’importation, ouvrez Preview et comparez l’application au cadre Figma.
La page d'accueil du coach personnel FitStart importée fonctionnant dans Preview à côté de l'historique des checkpoints d'Agent, montrant le héros, le badge de garantie de remboursement et la rangée de statistiques qu'Agent a construits à partir du cadre Figma
Vérifications visuelles :
  • La mise en page correspond suffisamment au cadre Figma.
  • Les couleurs, la typographie, l’espacement et les ressources sont préservés.
  • Les images et icônes importantes apparaissent.
  • L’application fonctionne aux tailles bureau et mobile.
Vérifications des interactions :
  • Les boutons et les liens font ce que vous attendez.
  • Les formulaires, menus, onglets ou la navigation sont présents si nécessaire.
  • L’application fonctionne toujours après actualisation.
  • Ce qui manque est suffisamment clair pour demander à Agent de l’ajouter.

​
Affiner l’application après l’importation

Certains comportements peuvent nécessiter d’être ajoutés après l’importation. Utilisez Agent quand la modification affecte les interactions, les données, plusieurs écrans ou une logique cachée. Pour FitStart, demandez à Agent de rendre le design importé interactif : Utilisez l’éditeur visuel quand la modification porte principalement sur le texte, la couleur, l’espacement, la mise en page ou le polish des images. Utilisez Canvas quand vous souhaitez annoter des retours visuels, comparer des variantes ou montrer directement ce qui doit changer sur le design.

​
Comparer les mises en page et annoter dans Canvas

Canvas transforme l’application importée en tableau libre où vous pouvez demander à Agent des mises en page alternatives et annoter le design avec du texte et des croquis.
1

Ouvrir Canvas

Sélectionnez Canvas dans l’en-tête du volet de l’espace de travail pour faire basculer le volet droit de Preview à Canvas.
L'en-tête du volet de l'espace de travail Replit avec l'onglet Canvas mis en évidence à côté de Preview et Outils et fichiers
2

Essayer différentes mises en page

Cliquez sur votre maquette importée, sélectionnez Réimaginer et choisissez Essayer différentes mises en page. Agent suggère des mises en page alternatives qui conservent le contenu mais réorganisent la hiérarchie visuelle.
Le menu Réimaginer ouvert sur une maquette Canvas avec l'option Essayer différentes mises en page mise en évidence
3

Examiner les mises en page suggérées

Attendez qu’Agent génère les alternatives, puis dézoomez pour les examiner à côté de la maquette originale.
Le Canvas avec la maquette FitStart importée et les suggestions de mise en page d'Agent dans le panneau de chat
4

Annoter avec Texte et Dessin

Utilisez Texte pour ajouter des notes sur le canvas.
La barre d'outils d'annotation Canvas avec l'outil Texte mis en évidence
Utilisez Dessin pour esquisser des flèches ou des formes qui pointent vers les parties que vous souhaitez modifier.
La barre d'outils d'annotation Canvas avec l'outil Dessin mis en évidence
5

Envoyer vos annotations à Agent

Avec les notes en place, demandez à Agent d’appliquer les retours à l’application importée.
La maquette FitStart importée sur Canvas avec une annotation de texte pointant vers la rangée de statistiques du héros

​
Utiliser les liens Figma dans Agent si nécessaire

Après l’importation, vous pouvez coller des liens Figma dans le chat Agent quand vous souhaitez qu’Agent inspecte un cadre ou un calque spécifique, extraire des données de design ou comparer l’implémentation au design. Un siège Figma Dev ou Full est recommandé pour les fonctionnalités de chat Agent. Pour plus de détails, consultez Intégration Figma MCP. Félicitations pour avoir terminé le tutoriel ! Vous avez transformé un cadre Figma en une application Replit interactive et l’avez affinée en quelque chose que vous pouvez partager et tester.

​
Étapes suivantes

Éditeur visuel

Peaufinez les petits détails visuels comme le texte, la couleur, l’espacement et les images.

Canvas

Comparez les directions visuelles et annotez les retours directement sur le design.

Ajouter une base de données

Sauvegardez les données de formulaire pour qu’elles persistent entre les actualisations.

Ajouter une connexion

Mettez les écrans privés derrière une authentification.

Ajouter un domaine personnalisé

Donnez aux évaluateurs une URL publique pour essayer l’application.

Collaborer dans un espace de travail d'équipe

Invitez des coéquipiers à construire ensemble sur l’application importée.

​
En relation

​
Crédits

L’exemple de design utilisé dans ce guide est le Personal Fitness Trainer Template sur Figma Community.