Skip to main content
⏰ Durée estimée : 15 minutes Un design Figma montre à quoi l’expérience doit ressembler. Replit Design transforme une frame Figma en frame de design que vous pouvez explorer, affiner et transformer en application interactive. Vous utiliserez le Personal Fitness Trainer Template de Figma Community comme exemple.
La page d'accueil Personal Fitness Trainer importée comme frame de design dans Replit Design, avec l'exécution marquée comme terminée dans le panneau de chat

​
Avant de commencer

Vous avez besoin de :
  • Un compte Replit.
  • Un compte Figma, avec le fichier que vous souhaitez importer ou le fichier d’exemple ci-dessus.

​
Importer la frame Figma

Importez la frame dans Replit Design et laissez Agent la transformer en design fonctionnel.
1

Obtenir le lien de votre frame Figma

Utilisez votre propre fichier Figma, ou suivez l’exemple de ce guide : le Personal Fitness Trainer Template sur Figma Community.Dans Figma, faites un clic droit sur la frame que vous souhaitez importer, choisissez Copy/Paste as, puis Copy link to selection.
Le Personal Fitness Trainer Template ouvert dans Figma, montrant les frames Cover dans le panneau des calques et sur le canvas

Le Personal Fitness Trainer Template ouvert dans Figma, avec les frames Cover que vous allez importer.

2

Ouvrir Replit Design

Allez sur replit.com/design et sélectionnez Import Figma sous la zone de prompt.
La page d'accueil de Replit Design avec l'option Import Figma sélectionnée sous la zone de prompt, et une infobulle indiquant Bring in a Figma frame and Agent will turn it into a working design

Import Figma sur la page d'accueil de Replit Design : importez une frame Figma et Agent la transforme en design fonctionnel.

3

Coller l'URL et commencer à construire

Collez l’URL de votre frame dans la boîte de dialogue Import Figma design et sélectionnez Attach to prompt. La frame s’attache à votre prompt ; envoyez-le pour commencer à construire.
La boîte de dialogue Import Figma design sur Replit Design avec une URL de frame Figma collée dans le champ et le bouton Attach to prompt

La boîte de dialogue Import Figma design avec l'URL de la frame collée, prête à être attachée au prompt.

Agent importe la frame et la reconstruit sous forme de frame de design dans votre projet.
La page d'accueil Personal Fitness Trainer importée comme frame de design dans Replit Design, avec l'exécution marquée comme terminée dans le panneau de chat

La page d'accueil Personal Fitness Trainer importée sous forme de frame dans Replit Design.

​
Faites-en le vôtre

Sélectionnez la frame importée et commencez à la remodeler :
  • Suivez une suggestion : l’import arrive avec des prochaines étapes proposées, comme une variante éditoriale sombre, une section de tarification, ou un affichage mobile. Chacune génère une nouvelle frame, de sorte que l’originale reste disponible pour comparaison.
  • Discutez-en : utilisez le champ de saisie sous la frame et briefez-la avec vos propres mots, « remplace la photo du hero », « rends l’appel à l’action plus marquant ».
La frame Personal Fitness Trainer importée sélectionnée dans Replit Design, avec trois cartes de suggestion à côté : Dark editorial variant, Add a pricing section, et Mobile viewport

La frame importée sélectionnée, avec des suggestions proposant une variante éditoriale sombre, une section de tarification et un affichage mobile.

​
Étapes suivantes

Suggestions d'exploration

Explorez quoi concevoir ensuite, un clic à la fois.

Visual Editor

Peaufinez le texte, les couleurs, l’espacement et les images directement.

Construire votre design

Transformez la frame terminée en application fonctionnelle.

​
Voir aussi

​
Crédits

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