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 de Miro. 

Vous pouvez générer des flux à écran unique et multi-écrans, affiner vos designs et appliquer des styles, et prévisualiser une simulation interactive de votre prototype. Construisez votre design à l’aide de prompts spécifiques qui génèrent chaque élément de votre prototype. Vous pouvez également affiner vos prompts pour éviter de recommencer depuis le début.

Cet article explique comment utiliser les fonctionnalités de Miro Prototypes. Pour des informations générales sur Miro Prototypes, voir la présentation de Miro Prototypes. 

NOTE : L’expérience Prototypes a été transférée aux partenaires d’IA. Désormais en bêta publique, certains utilisateurs disposent déjà de l’entrée mise à jour avec partenaires d’IA pour des prototypes générés par IA. Si votre expérience ne correspond pas à la documentation, voir Créer un prototype avec des partenaires d’IA (Bêta). Le contenu qui explique comment affiner et itérer votre production est toujours 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 apprendre à commencer 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 Sidekicks.
   Le panneau Sidekick s’ouvre.
2. Cliquez sur bibliothèque des partenaires d’IA.
   Accédez au prototype dans la bibliothèque des partenaires d’IA 
3. Cliquez sur Formats > Prototype.
4. Indiquez si vous souhaitez commencer avec un prompt texte ou une capture d’écran.
5. Spécifiez le type d’appareil.
6. Indiquez un écran unique ou 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 optionnellement utiliser les étiquettes de suggestion pour commencer votre prompt.
8. Terminez votre prompt puis cliquez sur la flèche Envoyer, ou appuyez sur la touche ENTRÉE de votre clavier.
   L’IA de Miro génère un prototype brouillon sur le canevas.
9. (Optionnel) Pour arrêter la génération, cliquez sur Arrêter sur votre prototype.
10. (Optionnel) Pour itérer sur votre prototype, continuez à utiliser le prompt dans le panneau Prototype.
    Chaque itération crée une version de votre prototype brouillon.
11. Sur votre prototype de brouillon, choisissez l’une des options suivantes :
    • Appliquer au canevas
      Votre prototype est maintenant modifiable sur le canevas.
    • Tout supprimer
      Votre brouillon est retiré 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à du nouvel outil d’entrée des partenaires d’IA pour le prototypage. Cette section décrit comment commencer à prototyper avec les partenaires d’IA. Pour apprendre à démarrer manuellement, voir Bibliothèque de prototypage.

CONSEIL : Créez votre prototype avec les partenaires d’IA pour activer l’historique de chat IA, qui se souvient de vos prompts, vous permettant de revoir les options que vous avez explorées précédemment et de reprendre sur n’importe quel tableau. Pour plus d’informations, consultez Les partenaires d’IA dans Miro évoluent avec l’IA, et Aperçu des Miro Prototypes.

REMARQUE : La mise à jour des partenaires d’IA pour les 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 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 des partenaires d’IA.

   CONSEIL : Vous pouvez également ouvrir le panneau des partenaires d’IA et commencer à formuler des prompts immédiatement. Assurez-vous de préciser explicitement que vous souhaitez créer un prototype, par exemple "Créer un prototype pour un flux de paiement".

   CONSEIL : Vous pouvez également accéder au format Prototype à partir de 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, sur votre prototype, cliquez sur Arrêter.
6. (Facultatif) Pour itérer sur votre prototype, continuez à créer 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.
   • Supprimer tout
     Votre brouillon est supprimé 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 brouillons de prototype au canevas. Vous pouvez comparer et explorer les décisions de conception et continuer à affiner la meilleure option.

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

Utiliser le canevas comme prompt

Sélectionnez du contenu sur le canevas à utiliser dans votre prompt. Par exemple, vous avez un cahier des charges 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 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 disposez de la version mise à jour...
3. Cliquez sur la bibliothèque de partenaires d’IA
   Accéder au prototype dans la bibliothèque de partenaires d’IA 
4. Cliquez sur Formats > Prototype.
5. Sélectionnez un prompt textuel.
6. Indiquez le type d’appareil, puis spécifiez écran unique ou multi-écran.
   La boîte de réponse affiche le nombre d’objets que vous avez 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 de canevas sélectionné.

ASTUCE : Vous pouvez indiquer à Miro IA d’utiliser des objets spécifiques du canevas en les sélectionnant. Par exemple, dans votre prompt, vous pouvez dire « 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 voulez que Miro IA utilise.

Itérer votre prototype

Votre premier brouillon n’est peut-être pas le résultat parfait. Avant d’appliquer votre brouillon au 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.
   La prochaine étape dans le panneau Prototype est Que voulez-vous faire ensuite ?
2. Choisissez Modifier le prototype. 
3. Pour un flux multi-écrans, choisissez l’écran que vous souhaitez itérer.
4. Dans la zone de réponse, décrivez les modifications souhaitées.
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.

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

CONSEIL : Utilisez le contexte du canevas. Sélectionnez des documents, des diagrammes, des pense-bêtes ou d’autres contenus du tableau pour utiliser un prompt de 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 brouillon.

1. Créez un prototype avec Miro IA. Ne l’appliquez pas 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 faire évoluer.
4. Sélectionnez une capture d’écran sur le tableau.
5. Dans la zone de réponse, décrivez les modifications que vous souhaitez basées sur 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 prototype 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é sur le 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 en mode sombre d’un prototype existant.

Suivez les étapes suivantes :

1. Pour tout prototype appliqué sur le 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.

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

2. Dans le champ de saisie, 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 ENTRÉE sur votre clavier.
   Le partenaire d’IA génère votre prototype amélioré.
4. (Optionnel) Continuez à donner des instructions au partenaire d’IA et à itérer sur votre prototype. Vous pouvez sélectionner une version avant d’appliquer votre prototype au canevas.
5. Au-dessus du prototype ébauché, cliquez sur Ajouter au canevas.

NOTE : Pour Miro Prototypes, toutes les fonctionnalités de prototypage améliorées par l’IA sont disponibles uniquement avec le module complémentaire Prototypes.

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 votre ou vos écrans de prototype.
   Le menu contextuel s’affiche.
3. Cliquez sur l’icône de Miro IA dans le menu contextuel.
4. Sélectionnez Importer le style depuis une image.
   Importer les styles et les appliquer à votre prototype
5. Choisissez le fichier image dont vous souhaitez importer le style.
6. Les styles sont appliqués à votre prototype.

CONSEIL : Appliquez les styles au début ou à la fin. Pour garantir que tous les éléments de votre prototype suivent un thème, appliquez votre thème soit en début de conception de votre prototype, soit en tant qu’étape finale.

Convertir des captures d’écran en prototypes éditables

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 tant que prototype modifiable : texte, boutons, disposition, et autres éléments.
6. Vous pouvez maintenant modifier, ajouter ou éditer cette version selon vos besoins.

ASTUCE : Convertissez une capture d’écran en maquette modifiable. Ensuite, invitez 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 l’image comme contexte dans votre prompt.

Sélectionner une version de prototype

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

Cliquez sur les flèches pour basculer entre les versions. Une fois que vous avez choisi une version, cliquez sur Ajouter au canevas. Votre version est appliquée au canevas.

Choisissez quelle version ou affinement de votre prototype ajouter au canevas.

CONSEIL : Avant de cliquer sur Ajouter au canevas, vous pouvez sélectionner un écran d’une version et le copier-coller dans le canevas. Cela vous permet de sauvegarder un écran d’une version que vous pourriez abandonner. 

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

Aperçu d’un prototype

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

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

Ajouter des lignes de connexion pour rendre un prototype interactif

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

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

Masquer les lignes de connexion

Pour les prototypes avec de nombreuses connexions, vous pouvez masquer les lignes de connexion afin de simplifier l’affichage de votre prototype.

En mode canevas, sélectionnez votre prototype. Depuis le menu contextuel, cliquez sur les trois points. Ensuite, 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, assurez-vous de sélectionner votre prototype.

Mode immersif

Miro Prototypes inclut le mode immersif. Entrez dans le mode immersif pour travailler sur votre prototype sans aucun autre contenu du tableau à afficher, vous permettant de travailler sans distraction.

Pour accéder au 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 recréer 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 de 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 Ctrl + V (Windows) ou Command + V (MacOS).
   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 votre écran de prototype dans votre presse-papiers.
4. Dans Figma, collez votre prototype. Vous pouvez utiliser les raccourcis (Windows) Ctrl + V ou (MacOS) Commande + V.
   Votre écran de prototype se colle dans Figma.

Partager un lien vers votre prototype (bêta)

Vous pouvez copier un lien unique à partager avec des membres de l’équipe ou des parties prenantes externes sans 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 avec votre lien consulte votre prototype.
5. Partagez votre lien.

REMARQUE : Pour que les utilisateurs externes puissent accéder à votre tableau, celui-ci doit être public. Les utilisateurs externes ne peuvent accéder au prototype qu’en mode immersif, et non au reste du contenu sur le canevas. Ils peuvent interagir avec les points d’accès et le flux du prototype. Si les autorisations du tableau le permettent, les utilisateurs externes peuvent également commenter.

CONSEIL : 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 du protocole de contexte de modèle (MCP) de Miro pour exporter vers un éditeur IA de base de code ; les équipes peuvent utiliser l’exportation 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 et 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. 

ASTUCE : Vous pouvez exporter un écran unique en 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, sélectionnez alors Vecteur – SVG.

REMARQUE : Pour les exports SVG de prototypes contenant des images, si vous importez le SVG dans d’autres logiciels pour la modification, 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 de codebasé IA, comme 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 du Miro MCP, consultez la vue d’ensemble du serveur Miro MCP.

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

Foire aux questions