Miro Prototypes

Qui peut le faire : Tous les membres avec le module complémentaire Miro Prototypes
Quels forfaits : Starter, Business, Enterprise
Quelles plateformes : Navigateur, Bureau

Miro Prototypes vous permet de créer des interfaces utilisateur directement sur le canevas Miro. 

Vous pouvez générer des flux d’un ou plusieurs écrans, affiner vos conceptions et appliquer des styles, et prévisualiser une simulation interactive de votre prototype. Construisez votre design en plusieurs invites spécifiques générant chaque élément de votre prototype. Vous pouvez également affiner vos invites pour éviter de recommencer.

Cet article explique comment utiliser les fonctionnalités des Miro Prototypes. Pour des informations générales sur Miro Prototypes, voir la vue d’ensemble des Miro Prototypes. 

NOTE : L’expérience Prototypes a été transférée vers les partenaires d’IA. Actuellement en bêta publique, certains utilisateurs ont déjà la version mise à jour, avec la saisie des partenaires d’IA pour les prototypes générés par IA. Si vous constatez que votre expérience ne correspond pas à la documentation, consultez Créer un prototype avec partenaires d’IA (Bêta). Le contenu qui explique comment raffiner et itérer votre résultat reste applicable.

Plus d’informations : Voir la FAQ.

Créer un prototype avec Miro IA

Cette section décrit comment commencer à prototyper avec Miro IA. Pour savoir comment débuter manuellement, voir la bibliothèque de prototypage.

Commencer de zéro

1. Sur un canevas Miro, au-dessus de la Barre de création cliquez sur Sidekicks.
   Le panneau Sidekick s’ouvre.
2. Cliquez sur la bibliothèque des partenaires d’IA.
   Accéder au prototype via la bibliothèque des partenaires d’IA 
3. Cliquez sur Formats > Prototype.
4. Indiquez si vous souhaitez commencer par un prompt texte ou une capture d’écran.
5. Indiquez le type d’appareil.
6. Précisez s’il s’agit d’un écran unique ou d’un prototype multi-écrans.
7. Suivez les instructions à l’écran pour écrire votre prompt ou charger une capture d’écran. Dans la boîte de réponse, vous pouvez éventuellement utiliser les étiquettes de suggestion pour débuter votre prompt.
8. Terminez votre prompt puis cliquez sur la flèche Envoyer, ou appuyez sur ENTRÉE sur votre clavier.
   L’IA génère un brouillon de prototype sur le canevas.
9. (Optionnel) Pour arrêter la génération, cliquez sur Arrêter sur votre prototype.
10. (Optionnel) Pour itérer votre prototype, continuez à entrer des prompts dans le panneau Prototype.
    Chaque itération crée une version de votre brouillon de prototype.
11. Sur votre prototype en version préliminaire, choisissez l’une des options suivantes :
    • Appliquer au canevas
      Votre prototype est désormais modifiable sur le canevas.
    • Tout annuler
      Votre version préliminaire est supprimée du canevas. Vous pouvez affiner votre prompt et répéter les étapes 7 à 9.

Créer un prototype avec des partenaires d’IA (bêta)

Certains utilisateurs peuvent déjà avoir accès à la nouvelle saisie des partenaires d’IA pour le prototypage. Cette section décrit comment commencer le prototypage avec les partenaires d’IA. Pour apprendre comment démarrer manuellement, voir Bibliothèque de prototypage.

ASTUCE : Créez votre prototype avec les partenaires d’IA pour activer l’historique des chats de l’IA, ce qui vous permet de mémoriser vos prompts, de revoir les options que vous avez déjà explorées et de reprendre sur n’importe quel tableau. Pour plus d’informations, consultez Les partenaires d’IA renforcent la création avec Miro, et Vue d’ensemble des Miro Prototypes.

REMARQUE : La mise à jour des partenaires d’IA pour les Prototypes est actuellement en version bêta publique. Si votre expérience ne correspond pas à la documentation de cette section, voir Créer un prototype avec Miro IA.

Suivez les étapes suivantes :

1. Sur un canevas Miro, au-dessus de la barre de Création, cliquez sur partenaires d’IA.
   Le panneau partenaires d’IA s’ouvre.

2. Dans la boîte de prompt, cliquez sur Créer un prototype.
   Le partenaire d’IA est prêt à vous aider à créer votre prototype.
   Démarrez votre prototype dans le panneau du partenaire d’IA.

   ASTUCE : Vous pouvez également ouvrir le panneau Partenaire d’IA et commencer à entrer votre prompt immédiatement. Assurez-vous de bien préciser que vous souhaitez créer un prototype, par exemple : "Créer un prototype pour un flux de processus de paiement."

   ASTUCE : Vous pouvez également accéder au format Prototype depuis Outils, Médias et Intégrations (+) dans la barre de création.

3. Écrivez votre prompt pour décrire le prototype que vous souhaitez que le partenaire d’IA génère. 
4. Cliquez sur la flèche vers le haut ou appuyez sur ENTRÉE sur votre clavier.
5. (Facultatif) Pour arrêter la génération, cliquez sur Arrêter sur votre prototype.
6. (Facultatif) Pour itérer sur votre prototype, continuez à donner des prompts dans le panneau Prototype.
   Chaque itération crée une version de votre brouillon de prototype.
7. Sur votre prototype brouillon, choisissez l’une des options suivantes :
   • Appliquer au canevas
     Votre prototype est maintenant modifiable sur le canevas.
   • Tout supprimer
     Votre ébauche est retirée du canevas. Vous pouvez affiner votre prompt et répéter les étapes 3 à 6.

CONSEIL : Commencez petit et soyez précis. Générer moins d’écrans à la fois produit des résultats plus précis en moins de temps. Indiquez explicitement les éléments clés que vous souhaitez pour chaque écran, comme les boutons, les sections ou les actions.

CONSEIL : Appliquez plusieurs ébauches de prototype au canevas. Vous pouvez comparer et explorer les décisions de conception et continuer à affiner la meilleure option.

CONSEIL : Un prototype peut prendre de 1 à 3 minutes à générer, selon la complexité de la commande et la taille du contenu. Si votre prototype prend plus de temps à générer, simplifiez votre commande ou réduisez le nombre d’écrans.

CONSEIL : Vous pouvez inclure une URL dans votre commande et demander au partenaire d’IA d’appliquer des styles du site lié.

Utiliser le canevas comme prompt

Sélectionnez un contenu sur le canevas à utiliser dans votre prompt. Par exemple, vous avez une conception détaillée dans un Document ou sur des pense-bêtes. Les prototypes peuvent utiliser le contenu comme contexte pour créer votre prototype. 

Suivez ces étapes :

1. Sélectionner le contenu du canevas. Par exemple, un Doc ou des pense-bêtes. Vous pouvez éventuellement sélectionner plusieurs objets.
2. Sur un canevas Miro, au-dessus de la barre de création, cliquez sur Sidekicks.
   Le panneau Sidekick s’ouvre.
   REMARQUE : Si vous avez la mise à jour...
3. Cliquez sur la bibliothèque des partenaires d’IA
   Accédez au prototype dans la bibliothèque des partenaires d’IA 
4. Cliquez sur Formats > Prototype.
5. Sélectionnez un prompt textuel.
6. Spécifiez le type d’appareil, puis choisissez écran unique ou multi-écrans.
   La boîte de réponse affiche le nombre d’objets sélectionnés à l’étape 1.
7. Suivez les instructions à l’écran pour générer votre prototype.
   Miro génère votre prototype à partir de vos spécifications et du contenu du canevas sélectionné.

CONSEIL : Vous pouvez demander à Miro IA d’utiliser des objets spécifiques du canevas en les sélectionnant directement. Par exemple, dans votre prompt, vous pouvez indiquer "Utilisez les captures d’écran sur le canevas comme guides pour construire le prototype." Si vous avez de nombreux objets similaires sur le canevas, décrivez explicitement quels objets vous souhaitez que Miro IA utilise.

Itérer votre prototype

Votre première ébauche peut ne pas être le résultat parfait. Avant d’appliquer votre ébauche sur le canevas, vous pouvez continuer à itérer et créer plusieurs versions de votre prototype.

1. Créer un prototype avec Miro IA. Ne pas appliquer au canevas.
   La prochaine étape dans le panneau Prototype est Que souhaitez-vous faire ensuite ?
2. Choisir Modifier le prototype. 
3. Pour un flux multi-écrans, choisissez l’écran que vous souhaitez itérer.
4. Dans la boîte de réponse, décrivez les changements que vous voulez.
5. Cliquez sur la flèche vers le haut ou appuyez sur Entrée sur votre clavier.
   Miro génère une nouvelle version de votre prototype.

REMARQUE : Les modifications ne peuvent être effectuées qu’un écran à la fois.

ASTUCE : Utilisez le contexte du canevas. Sélectionnez des documents, des diagrammes, des pense-bêtes ou d’autres contenus du tableau pour engager Miro IA.

Itérer avec une capture d’écran comme contexte visuel

Avant d’appliquer votre prototype au canevas, vous pouvez utiliser une capture d’écran ou un autre prototype déjà sur le canevas comme contexte pour itérer votre ébauche.

1. Créez un prototype avec Miro IA. Ne pas appliquer au canevas.
   La prochaine étape dans le panneau Prototype est Que souhaitez-vous faire ensuite ?
2. Cliquez sur Modifier le prototype.
3. Pour un flux multi-écrans, choisissez l’écran que vous souhaitez itérer.
4. Sélectionnez une capture d’écran sur le tableau.
5. Dans la boîte de réponse, décrivez les changements que vous souhaitez en fonction de la capture d’écran sélectionnée.
6. Cliquez sur la flèche vers le haut ou appuyez sur Entrée sur votre clavier.
   Miro génère une nouvelle version de votre prototype. 

CONSEIL : Vous pouvez utiliser les écrans de prototypes existants déjà sur le tableau comme contexte visuel. Créez et appliquez un prototype au tableau. Sélectionnez un écran.

Modifier avec l’IA

Pour tout prototype déjà appliqué au canevas, vous pouvez continuer à itérer avec Modifier avec l’IA. Utilisez Modifier avec l’IA pour affiner au lieu de reconstruire, par exemple, si vous souhaitez créer une version mode sombre d’un prototype existant.

Suivez les étapes suivantes :

1. Pour tout prototype appliqué au canevas, dans le menu contextuel, cliquez sur Modifier avec l’IA.
   Le panneau Partenaire d’IA s’ouvre.
   Modifier avec l’IA vous permet de peaufiner un prototype existant.

   NOTE : Vous pouvez utiliser Modifier avec l’IA et Partenaire d’IA avec un prototype à la fois. Pour en changer, fermez le Partenaire d’IA et rouvrez Modifier avec l’IA à partir du prototype cible.

2. Dans la boîte de dialogue, décrivez les modifications que vous souhaitez apporter. Par exemple, « Convertir en thème sombre ».
3. Pour exécuter votre prompt, cliquez sur le bouton flèche vers le haut ou appuyez sur ENTER sur votre clavier.
   Le partenaire d’IA génère votre prototype affiné.
4. (Facultatif) Continuez à envoyer des prompts au partenaire d’IA et itérez sur votre prototype. Vous pouvez sélectionner une version avant d’appliquer votre prototype sur le canevas.
5. Au-dessus du prototype ébauché, cliquez sur Ajouter au canevas.

REMARQUE : Pour Miro Prototypes, toutes les fonctionnalités enrichies par l’IA ne sont disponibles qu’avec le module complémentaire Prototypes.

Appliquer des styles de prototype à partir d’une URL

Pour appliquer un style à partir d’une URL existante à votre prototype :

1. Créer un prototype.
2. Sélectionnez votre/vos écran(s) de prototype.
   Le menu contextuel apparaît.
3. Dans le menu contextuel, cliquez sur Modifier avec l’IA pour ouvrir le panneau du partenaire d’IA.
4. Dans la boîte de prompt, indiquez au partenaire d’IA d’appliquer le style à partir de l’URL incluse (assurez-vous d’inclure l’URL complète).
5. Le partenaire d’IA appliquera le style visuel de l’URL dans une version mise à jour de votre prototype sur le tableau.

Appliquer les styles de prototype à partir d’une capture d’écran

Si vous souhaitez que votre prototype corresponde à un site web ou un produit existant, vous pouvez extraire des styles à partir d’une capture d’écran et les appliquer à vos écrans.

1. Créer un prototype.
2. Sélectionnez votre ou vos écrans de prototype.
   Le menu contextuel s’affiche.
3. Cliquez sur l’icône IA de Miro dans le menu contextuel.
4. Sélectionnez Importer le style depuis une image.
   Importer des styles et les appliquer à votre prototype
5. Choisissez le fichier image à partir duquel vous souhaitez importer le style.
6. Les styles sont appliqués à votre prototype.

ASTUCE : Appliquez les styles d’abord ou en dernier. Pour vous assurer que tous les éléments de votre prototype suivent un thème, appliquez votre thème dès les premières étapes de votre conception ou en dernière étape.

Convertir des captures d’écran en prototypes que vous pouvez modifier

Vous pouvez convertir une capture d’écran d’un design ou d’une interface utilisateur concurrente en un prototype modifiable.

1. Ajoutez la capture d’écran à votre tableau Miro.
2. Cliquez sur l’image pour ouvrir le menu contextuel.
3. Cliquez sur le bouton Convertir en puis cliquez sur Prototype.
4. Dans le sous-menu, choisissez le type d’appareil (Mobile, Tablette, Bureau, Personnalisé).
5. L’IA le reconstruira en un prototype modifiable — texte, boutons, mise en page et autres éléments.
6. Vous pouvez désormais modifier, ajouter ou éditer cette version selon vos besoins.

ASTUCE : Convertissez une capture d’écran en maquette éditable. Puis, incitez Miro IA à continuer l’édition. Vous pouvez également utiliser une capture d’écran comme contexte dans votre prompt et générer un prototype. Pour utiliser plusieurs captures d’écran, sélectionnez toutes les captures et copiez-les comme image. Ensuite, utilisez cette image comme contexte dans votre prompt.

Sélectionner une version de prototype

Chaque affinement crée une version de prototype. À mesure que vous affinez votre prototype, le sélecteur de version est au-dessus du brouillon du prototype. 

Cliquez sur les flèches pour passer d’une version à l’autre. Lorsque vous avez choisi une version, cliquez sur Ajouter au canevas. Votre version est appliquée au canevas.

Choisissez quelle amélioration, ou version, de votre prototype ajouter au canevas.

CONSEIL : Avant de cliquer sur Ajouter au canevas, vous pouvez sélectionner un écran de n’importe quelle version et le copier-coller sur le canevas. Cela vous permet de sauvegarder un écran d’une version que vous pourriez choisir de ne pas conserver.

AVERTISSEMENT : Lorsque vous cliquez sur Ajouter au canevas, toutes les autres versions ne peuvent pas être récupérées.

Prévisualiser un prototype

Depuis le menu contextuel du prototype, cliquez sur Prévisualiser. L’aperçu se charge.

ASTUCE : Pour obtenir un aperçu totalement interactif de votre prototype, utilisez des lignes de connexion entre les écrans.

Ajouter des lignes de connexion pour rendre un prototype interactif

Pour ajouter ou modifier des connexions entre les objets de votre prototype Miro :

1. Cliquez sur un élément (comme un bouton) de votre prototype.
2. Faites glisser l’icône Ligne de connexion vers l’écran auquel il doit être lié.
3. En mode Aperçu, cliquer sur l’élément emmènera les utilisateurs vers l’écran lié.

Masquer les lignes de connexion

Pour les prototypes avec de nombreuses connexions, afin de simplifier la vue de votre prototype, vous pouvez masquer les connexions.

En mode canevas, sélectionnez votre prototype. Dans le menu contextuel, cliquez sur les trois points. Puis sélectionnez Masquer les connecteurs.

En mode immersif, cliquez en haut à gauche sur le bouton Masquer | Afficher les connecteurs.

Masquer ou afficher les connecteurs en mode immersif.

Répétez les mêmes étapes pour afficher les connecteurs.

CONSEIL : Utilisez des raccourcis clavier pour masquer ou afficher les connecteurs. Sur votre clavier, appuyez sur Shift + E. En mode canevas, pour utiliser les raccourcis clavier, assurez-vous de sélectionner votre prototype.

Mode immersif

Miro Prototypes inclut le mode immersif. Entrez en mode immersif pour travailler sur votre prototype sans aucun autre contenu de tableau visible, vous permettant de travailler sans distraction.

Pour entrer en mode immersif, sélectionnez votre Miro Prototype. Dans le menu contextuel, cliquez sur mode immersif.

Le mode immersif permet une expérience Miro Prototypes sans distraction.

Copier dans Figma

Fournissez votre prototype aux designers dans Figma sans avoir à le reconstruire manuellement. Vous pouvez copier votre prototype, ou des écrans individuels.

Copier un prototype dans Figma

1. Cliquez sur le cadre du prototype.
   Le menu contextuel Format apparaît.
2. Dans le menu contextuel, cliquez sur les trois points verticaux pour ouvrir le menu Plus.
3. Cliquez sur Copier vers Figma.
   Miro copie votre prototype dans votre presse-papiers.
   Copiez votre prototype vers Figma. 
4. Dans Figma, collez votre prototype. Vous pouvez utiliser les raccourcis clavier (Windows) Ctrl + V ou (MacOS) Command + V .
   Votre prototype est collé dans Figma.

Copier un écran de prototype vers Figma

1. Cliquez pour sélectionner un écran de prototype.
   Le menu contextuel du widget apparaît.
2. Dans le menu contextuel, cliquez sur les trois points verticaux pour ouvrir le menu Plus.
3. Cliquez sur Copier vers Figma.
   Miro copie l’écran de votre prototype dans votre presse-papiers.
4. Dans Figma, collez votre prototype. Vous pouvez utiliser les raccourcis clavier (Windows) Ctrl + V ou (MacOS) Command + V.
   L’écran de votre prototype se colle dans Figma.

Partager un lien vers votre prototype (Bêta)

Vous pouvez copier un lien unique à partager avec des membres d’équipe ou des parties prenantes externes sans compte Miro. 

1. Depuis le menu contextuel du prototype, cliquez sur les trois points verticaux pour ouvrir le menu Plus.
2. Cliquez sur Partager et exporter > Partager le prototype.
   La fenêtre modale de Partager le prototype s’ouvre.
3. Cliquez sur Copier le lien.
4. (Optionnel) Cliquez sur Prévisualiser dans le navigateur pour voir comment toute personne avec votre lien consulte votre prototype.
5. Partagez votre lien.

REMARQUE : Pour que des utilisateurs externes puissent y accéder, votre tableau doit être public. Les utilisateurs externes ne peuvent accéder au prototype qu’en mode immersif, et à aucun autre contenu sur le canevas. Ils peuvent interagir avec les hotspots et le flux du prototype. Si les permissions du tableau le permettent, les utilisateurs externes peuvent également commenter.

ASTUCE : Vous pouvez également copier un lien partageable en mode immersif : En haut à droite, cliquez sur les trois points verticaux. Puis cliquez sur Partager le prototype. Et en mode Aperçu : En haut à droite, cliquez sur Partager le prototype.

Exporter votre prototype

Vous pouvez exporter votre prototype au format SVG. Vous pouvez également utiliser le Serveur de Protocole de Contexte de Modèle (MCP) de Miro pour l’exporter vers un éditeur de code IA ; les équipes peuvent utiliser l’export pour générer du code fonctionnel et accélérer le développement.

Exporter au format SVG

1. Dans le menu contextuel du prototype, cliquez sur les trois points verticaux.
2. Cliquez sur Partager et exporter > Exporter en tant qu’image.
   Une fenêtre de sélection, ainsi que la fenêtre modale Exporter l’image sous, s’ouvrent.
3. Ajustez la fenêtre de sélection pour qu’elle couvre votre prototype.
4. Dans la fenêtre modale Exporter l’image sous, sélectionnez Vecteur – SVG.
5. Cliquez sur Exporter. 

CONSEIL : Vous pouvez exporter un seul écran au format SVG depuis le menu contextuel. Sélectionnez un écran dans votre prototype. Dans le menu contextuel, cliquez sur les trois points verticaux, puis cliquez sur Exporter comme image. La fenêtre modale Exporter comme image s’ouvre, puis sélectionnez Vector – SVG.

REMARQUE : Pour les exportations de prototypes au format SVG contenant des images, si vous importez le SVG dans un autre logiciel pour modification, tel que Figma, les images sont remplacées par des espaces réservés.

Exporter avec le Serveur MCP de Miro

Pour exporter votre prototype vers un éditeur de code IA tel que Cursor, incluez l’URL du tableau avec l’ID du tableau dans votre prompt. Assurez-vous de fournir des instructions pour générer du code basé sur le prototype.

Pour en savoir plus sur l’utilisation de Miro MCP, consultez la vue d’ensemble de Miro MCP Server.

Un éditeur de codebase IA comme Cursor accepte une URL de tableau Miro avec l’ID du tableau pour générer du code basé sur votre prototype.

Foire aux questions