> ## 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. # Transformer un design Figma en application interactive > Importez un cadre Figma dans Replit, transformez-le en application React, testez le résultat et affinez-le en une expérience interactive. export const AiPrompt = ({children}) => { return
{children}
; }; ⏰ *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](https://replit.com). * 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 Allez sur [replit.com/import](https://replit.com/import). Choisissez **Figma Design** et connectez votre compte Figma. Dans Figma, sélectionnez le cadre exact que vous souhaitez importer et copiez son URL. 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. Allez sur [replit.com](https://replit.com). Le compositeur de prompt est sur l'écran d'accueil. 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 Choisissez **Importer un design Figma** et collez l'URL du cadre Figma exact que vous souhaitez 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 : Review this imported FitStart app.
Keep the visual design close to the Figma frame.
Make the workout form interactive: a visitor should choose a workout type, enter minutes and a note, then add the workout.
After submission, update today's workout list and total minutes.
Preserve the desktop layout and improve the mobile layout if needed. Utilisez l'[éditeur visuel](/fr/learn/design/visual-editor) quand la modification porte principalement sur le texte, la couleur, l'espacement, la mise en page ou le polish des images. Utilisez [Canvas](/fr/learn/projects-and-artifacts/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. 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 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 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 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 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 Use my Canvas annotations to refine the imported FitStart app.
Keep the workout form behavior unchanged.
Apply the notes to the progress card, weekly goal area, and mobile spacing only.
Then test that adding a workout still updates today's list and total minutes. ## 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](/references/mcp/figma). 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 Peaufinez les petits détails visuels comme le texte, la couleur, l'espacement et les images. Comparez les directions visuelles et annotez les retours directement sur le design. Sauvegardez les données de formulaire pour qu'elles persistent entre les actualisations. Mettez les écrans privés derrière une authentification. Donnez aux évaluateurs une URL publique pour essayer l'application. Invitez des coéquipiers à construire ensemble sur l'application importée. ## En relation * [Intégration Figma MCP](/references/mcp/figma) * [Canvas](/fr/learn/projects-and-artifacts/canvas) * [Éditeur visuel](/fr/learn/design/visual-editor) ## Crédits L'exemple de design utilisé dans ce guide est le [Personal Fitness Trainer Template](https://www.figma.com/community/file/1569006333493544411) sur Figma Community.