Miro Prototypes

Qui peut l’utiliser : Membres de l’équipe
Forfaits : Business, Enterprise (module complémentaire payant)
Quelles plateformes : Navigateurs, application de bureau

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

Vous pouvez générer des flux à écran unique ou multi-écrans, affiner vos maquettes et appliquer des styles, puis prévisualiser une simulation interactive de votre prototype. Construisez votre maquette à l’aide de plusieurs prompts spécifiques, chacun générant un élément de votre prototype. Vous pouvez aussi affiner vos prompts pour éviter de tout recommencer.

Cet article explique comment utiliser les fonctionnalités de Miro Prototypes. Pour des informations générales sur Miro Prototypes, consultez Aperçu de Miro Prototypes. 

REMARQUE : Miro Prototypes est désormais inclus dans le forfait Business. Si vous êtes sur un ancien forfait Business ou sur un forfait Starter, consultez ce qui change.

Plus d’informations : Voir la FAQ.

Créer un prototype avec Miro IA

Cette section explique comment commencer le prototypage avec Miro IA. Pour apprendre à démarrer manuellement, consultez la bibliothèque de prototypage.

Commencer de zéro

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

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

Certains utilisateurs disposent peut-être déjà de la mise à jour des partenaires d’IA pour le prototypage. Cette section explique comment démarrer le prototypage avec les partenaires d’IA. Pour savoir comment démarrer manuellement, consultez la Bibliothèque de prototypage.

ASTUCE : Créez votre prototype avec les partenaires d’IA pour activer l’historique du chat IA, qui mémorise vos prompts et vous permet de consulter les options que vous avez déjà explorées et de reprendre votre travail sur n’importe quel tableau. Pour plus d’informations, consultez Les partenaires d’IA font évoluer la création par IA dans Miro et Présentation de Miro Prototypes.

REMARQUE : La mise à jour des Partenaires d’IA pour Prototypes est actuellement en bêta publique. Si votre expérience ne correspond pas à la documentation de cette section, consultez 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 zone de prompt, cliquez sur Créer un prototype.
   Les Partenaires d’IA sont prêts à vous aider à créer votre prototype.
   Commencez votre prototype dans le panneau Partenaires d’IA.

   ASTUCE : Vous pouvez également ouvrir le panneau Partenaires d’IA et commencer à saisir des prompts immédiatement. Veillez à indiquer explicitement que vous souhaitez créer un prototype, par exemple "Créez un prototype pour un parcours de paiement."

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

3. Rédigez votre prompt pour décrire le prototype que vous souhaitez que les Partenaires d’IA génèrent. 
4. Cliquez sur la flèche vers le haut, ou appuyez sur la touche Entrée de votre clavier.
5. (Facultatif) Pour arrêter la génération, cliquez sur Stop dans votre prototype.
6. (Facultatif) Pour itérer sur votre prototype, continuez à saisir des prompts dans le Prototype panneau.
   Chaque itération crée une version de votre prototype provisoire.
7. Sur votre prototype provisoire, choisissez l’une des options suivantes :
   • Appliquer au canevas
     Votre prototype est désormais modifiable sur le canevas.
   • Tout supprimer
     Votre brouillon a été retiré du canevas. Vous pouvez affiner votre prompt et répéter les étapes 3–6.

ASTUCE : 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 des boutons, des sections ou des actions.

ASTUCE : Appliquez plusieurs brouillons de prototype au canevas. Vous pouvez comparer et explorer les choix de conception et continuer à affiner la meilleure option.

ASTUCE : La génération d’un prototype peut prendre de 1 à 3 minutes, selon la complexité du prompt et la taille du contenu. Si la génération prend plus de temps, simplifiez votre prompt ou réduisez le nombre d’écrans.

ASTUCE : Vous pouvez inclure une URL dans votre prompt et demander au partenaire d’IA d’appliquer les styles du site lié.

Utiliser le canevas comme prompt

Sélectionnez du contenu sur le canevas à utiliser dans votre prompt. Par exemple, vous avez un brief de conception dans un Doc ou sur des pense-bêtes. Les prototypes peuvent utiliser ce contenu comme contexte pour créer votre prototype. 

Suivez les étapes suivantes :

1. Sélectionnez du contenu sur le 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 Sidekick volet s’ouvre.
3. Cliquez sur l’icône Prototype en bas de la zone de prompt.
4. Suivez les instructions à l’écran dans la boîte de prompt pour générer votre prototype.
   Miro génère votre prototype à partir de vos spécifications et du contenu sélectionné sur le canevas.

REMARQUE:  Vous pouvez ajouter une ou plusieurs captures d’écran sur votre canevas et demander à Miro Prototypes de créer plusieurs écrans dans votre Prototype à partir des captures sélectionnées.

ASTUCE:  Vous pouvez demander à Miro IA d’utiliser des objets spécifiques du canevas en les sélectionnant sur celui-ci. Par exemple, dans votre prompt vous pouvez dire "Utilisez les captures d’écran sur le canevas comme guides pour créer le prototype." Si vous avez de nombreux objets similaires sur le canevas, décrivez explicitement lesquels vous voulez que Miro IA utilise.

Convertir un cadre Figma intégré en prototype Miro

1. Dans Figma, sélectionnez le cadre concerné.
2. Faites un clic droit sur le cadre et sélectionnez Copier/Coller en tant que > Copier le lien de la sélection. 
3. Accédez à votre tableau Miro.
4. Collez le lien depuis Figma.
5. Connectez Figma (si ce n’est pas déjà fait).
6. Sélectionnez l’intégration Figma sur le canevas.
7. Cliquez sur Convertir en dans le menu contextuel de l’intégration.
8. Sélectionnez Prototype dans le menu Convertir en.
9. Miro IA convertira votre prototype Figma intégré en un prototype Miro modifiable.

Faites évoluer votre prototype

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

1. Créez un prototype avec Miro IA. Ne l’appliquez pas au canevas.
   Dans le panneau Prototype, l’étape suivante est Que souhaitez-vous faire ensuite ?
2. Sélectionnez Modifier le prototype. 
3. Pour un flux multi-écrans, choisissez l’écran que vous souhaitez faire évoluer.
4. Dans le champ de réponse, décrivez les modifications que vous souhaitez apporter.
5. Cliquez sur la flèche vers le haut ou appuyez sur Entrée de votre clavier.
   Miro génère une nouvelle version de votre prototype.

REMARQUE : Les modifications ne peuvent être apporté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 servir de prompt à 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à présent sur le canevas, comme contexte pour itérer votre brouillon.

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

ASTUCE : Vous pouvez utiliser les écrans de prototype déjà présents sur le tableau comme contexte visuel. Créez et appliquez un prototype sur le 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 plutôt que reconstruire ; par exemple si vous souhaitez créer une version en 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 volet du partenaire d’IA s’ouvre.
    
   Modifier avec l’IA vous permet d’affiner un prototype existant.

   REMARQUE : Vous pouvez utiliser Modifier avec l’IA et le partenaire d’IA sur un seul prototype à la fois. Pour basculer, fermez le volet du partenaire d’IA et rouvrez Modifier avec l’IA depuis le prototype cible.

2. Dans le champ de prompt, 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 la touche ENTER de votre clavier.
   Le Partenaire d’IA génère votre prototype affiné.
4. (Optionnel) Continuez à envoyer des prompts au Partenaire d’IA et à faire évoluer votre prototype. Vous pouvez sélectionner une version avant d’appliquer votre prototype au canevas.
5. Au-dessus du prototype élaboré, cliquez sur Ajouter au canevas.

Appliquer des styles de prototype depuis une URL

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

1. Créer un prototype.
2. Sélectionnez l’écran ou les écrans de votre prototype.
   Le menu contextuel s’affiche.
3. Dans le menu contextuel, cliquez sur Modifier avec l’IA pour ouvrir le volet Partenaire d’IA.
4. Dans le champ de prompt, indiquez au Partenaire d’IA d’appliquer le style depuis l’URL incluse (veillez à inclure l’URL complète).
5. Le Partenaire d’IA appliquera le style visuel de l’URL à une version mise à jour de votre prototype sur le tableau.

Appliquer des 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 les styles d’une capture d’écran et les appliquer à vos écrans.

1. Créer un prototype.
2. Sélectionnez l’écran ou les écrans de votre prototype.
   Le menu contextuel s’affiche.
3. Cliquez sur l’icône Miro IA 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 au début ou à la fin. Pour garantir que tous les éléments de votre prototype respectent un même thème, appliquez votre thème dès le début de la conception de votre prototype ou comme étape finale.

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 concurrente en un prototype que vous pouvez modifier.

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

ASTUCE : Convertissez une capture d’écran en une maquette modifiable. Ensuite, utilisez un prompt pour demander à Miro IA de poursuivre la modification. Vous pouvez aussi utiliser une capture d’écran comme contexte dans votre prompt et générer un prototype. Pour utiliser plusieurs captures d’écran, sélectionnez-les toutes et copiez-les en tant qu’image. Utilisez ensuite l’image comme contexte dans votre prompt.

Sélectionner une version du prototype

Chaque amélioration crée une version du prototype. À mesure que vous améliorez votre prototype, le sélecteur de version se trouve au-dessus de l’ébauche du prototype. 

Cliquez sur les flèches pour parcourir les versions. Une fois la version choisie, cliquez sur Ajouter au canevas. Votre version est appliquée au canevas.

Choisissez l’itération (version) de votre prototype à ajouter au canevas.

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

ASTUCE : Après avoir ajouté une version au canevas, vous pouvez consulter les versions précédentes dans l’historique du chat de l’IA.

Aperçu du prototype

Dans le menu contextuel du prototype, cliquez sur Aperçu. L’aperçu se charge.

ASTUCE : Pour obtenir un aperçu du prototype entièrement interactif, utilisez des lignes de connexion entre les écrans.

Ajouter des lignes de connexion pour rendre votre prototype interactif

Pour ajouter ou modifier des connexions entre des éléments de votre prototype Miro :

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

Masquer les lignes de connexion

Pour les prototypes comportant de nombreux connecteurs, vous pouvez masquer les connecteurs pour simplifier l’affichage de votre prototype.

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, en haut à gauche, cliquez 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.

ASTUCE : Utilisez les 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. Accédez au mode immersif pour travailler sur votre prototype sans aucun autre contenu du tableau à l’écran, afin de rester concentré.

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

Le mode immersif offre une expérience Miro Prototypes sans distractions.

Copier dans Figma

Transférez votre prototype aux designers dans Figma sans le recréer manuellement. Vous pouvez copier votre prototype en entier ou des écrans individuels.

Copier un prototype dans Figma

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

Copier un écran de prototype dans 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 Copier dans Figma.
   Miro copie l’écran de prototype dans votre presse-papiers.
4. Dans Figma, collez votre prototype. Vous pouvez utiliser les raccourcis (Windows) Ctrl + V ou (MacOS) Command + V .
   Votre écran de prototype est collé dans Figma.

Connexion Claude Code pour Miro Prototypes

Créez des Miro Prototypes à partir de vos projets Claude Code via le Model Context Protocol.

1. Connectez-vous au serveur MCP de Miro en suivant ces instructions.
2. Copiez et exécutez cette commande dans votre outil d’IA une fois connecté:
   "Récupérez ce fichier de conception et implémentez les aspects pertinents de la conception. [Lien vers le tableau Miro pertinent]"
3. Vous pourrez consulter le prototype Miro sur votre tableau Miro, et afficher Claude Code dans la fenêtre de votre Terminal.

Partager un lien vers votre prototype (bêta)

Vous pouvez copier un lien unique à partager avec des membres de votre équipe ou des parties prenantes externes ne disposant pas d’un compte Miro. 

1. Dans 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 Partager le prototype s’ouvre.
3. Cliquez sur Copier le lien.
4. (Facultatif) Cliquez sur Aperçu dans le navigateur pour voir comment toute personne disposant de votre lien consultera votre prototype.
5. Partagez votre lien.

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

ASTUCE : Vous pouvez aussi copier un lien partageable en mode immersif : Dans le coin supérieur droit, cliquez sur les trois points verticaux. Cliquez ensuite sur Partager le prototype. Et en mode d’aperçu : Dans le coin supérieur droit, cliquez sur Partager le prototype.

Exporter votre prototype

Vous pouvez exporter votre prototype au format SVG. Vous pouvez aussi utiliser le Miro Serveur Model Context Protocol (MCP) de Miro pour exporter vers un éditeur IA de codebase ; 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. Click Partager et exporter >Exporter en tant qu’image.
   Une fenêtre de sélection et la fenêtre modale Exporter en tant qu’image s’ouvrent.
3. Ajustez la fenêtre de sélection pour qu’elle couvre votre prototype.
4. Dans la fenêtre modale Exporter en tant qu’image, sélectionnez Vectoriel – SVG.
5. Cliquez sur Exporter. 

ASTUCE : Vous pouvez exporter un écran unique 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 en tant qu’image. La fenêtre modale Exporter en tant qu’image s’ouvre, puis sélectionnez Vectoriel – SVG.

REMARQUE : Pour les exports SVG de prototypes contenant des images, si vous importez le SVG dans un autre logiciel pour le modifier, comme 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 IA de codebase, par exemple Cursor, incluez l’URL du tableau avec l’ID du tableau dans votre prompt. Veillez à fournir des instructions permettant de générer du code à partir du prototype.

Pour en savoir plus sur l’utilisation de Miro MCP, consultez Présentation du serveur Miro MCP.

Un éditeur IA de codebase, comme Cursor, accepte une URL du tableau Miro incluant son ID pour générer du code à partir de votre prototype.

FAQ