Miro Prototypes

Qui peut le faire : Membres de l’équipe
Quels forfaits : Business, Enterprise (licence Accelerate)
Quelles plateformes : Navigateur, 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 prototype en plusieurs prompts spécifiques qui génèrent chaque élément. 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, voir Présentation de Miro Prototypes. 

Remarque : Miro Prototypes est désormais inclus dans le forfait Business. Si vous êtes sur un forfait Business hérité, ou sur un forfait Starter, consultez ce qui change. Miro Prototypes est inclus dans la licence Accelerate pour les forfaits Enterprise.

Plus d’information : Voir FAQ.

Créer un prototype avec Miro IA

Cette section explique comment démarrer la création de prototypes 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 Partenaire d’IA s’ouvre.
2. Cliquez sur Bibliothèque de partenaires d’IA.
   Accéder à Prototype dans la bibliothèque de partenaires d’IA 
3. Cliquez sur Formats > Prototype.
4. Indiquez si vous souhaitez commencer par un prompt textuel ou par une capture d’écran.
5. Indiquez 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 sur votre clavier.
   Miro AI génère un prototype brouillon sur le canevas.
9. (Facultatif) Pour arrêter la génération, cliquez sur Arrêter sur votre prototype.
10. (Facultatif) Pour itérer sur votre prototype, continuez à saisir des prompts dans le Prototype panneau.
    Chaque itération crée une version de votre brouillon de prototype.
11. Sur votre brouillon de prototype, choisissez l’une des options suivantes :
    • Appliquer au canevas
      Votre prototype est maintenant 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 nouvelle interface des partenaires d’IA pour le prototypage. Cette section explique comment démarrer le prototypage avec les partenaires d’IA. Pour savoir comment commencer manuellement, consultez la Bibliothèque de prototypage.

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

REMARQUE : La mise à jour 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.
   Démarrez votre prototype dans le panneau partenaires d’IA.

   ASTUCE : Vous pouvez aussi ouvrir le panneau partenaires d’IA et commencer à saisir un prompt immédiatement. Veillez à indiquer explicitement que vous souhaitez créer un prototype, par ex. "Créez un prototype pour un parcours 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. Rédigez votre prompt pour décrire le prototype que vous voulez que les partenaires d’IA génèrent. 
4. Cliquez sur la flèche vers le haut, ou appuyez sur ENTRÉE de votre clavier.
5. (Facultatif) Pour arrêter la génération, sur votre prototype cliquez Arrêter.
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 en cours, 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 3 à 6.

ASTUCE : Commencez petit et soyez précis. Générer moins d’écrans à la fois donne 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 sur le canevas. Vous pouvez comparer et explorer les choix de conception et continuer à affiner la meilleure option.

ASTUCE : Un prototype peut prendre 1 à 3 minutes à générer, selon la complexité du prompt et la taille du contenu. Si la génération de votre prototype 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 Sidekicks.
   Le Sidekick panneau s’ouvre.
3. Cliquez sur l’icône Prototype en bas de la zone de prompt.
4. Suivez les instructions affichées 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 à votre canevas et demander à Miro Prototypes de créer plusieurs écrans dans votre prototype à partir des captures d’écran sélectionnées.

CONSEIL : Vous pouvez demander à Miro IA d’utiliser des objets spécifiques du canevas en les sélectionnant sur le canevas. Par exemple, dans votre prompt vous pouvez dire « Utilisez les captures d’écran présentes 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.

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 vous ne l’avez pas encore 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 prototype Miro modifiable.

Itérez votre prototype

Votre première ébauche n’est peut‑être pas parfaite. Avant d’appliquer votre ébauche au canevas, vous pouvez continuer à itérer et à créer plusieurs versions de votre prototype.

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. Choisissez Modifier le prototype. 
3. Pour un flux multi-écrans, sélectionnez l’écran que vous souhaitez itérer.
4. Dans la zone de réponse, décrivez les modifications que vous souhaitez.
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 seul écran à la fois.

ASTUCE : Utilisez le contexte du canevas. Sélectionnez des documents, des diagrammes, des pense-bêtes ou tout autre contenu du tableau pour fournir un prompt à Miro IA.

Itérer en utilisant 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 faire évoluer votre ébauche.

1. Créer un prototype avec Miro IA. N’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-écrans, choisissez l’écran que 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 la touche Entrée de votre clavier.
   Miro génère une nouvelle version de votre prototype. 

ASTUCE : Vous pouvez utiliser des é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é sur le 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, cliquez sur Modifier avec l’IA dans le menu contextuel.
   Le volet 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 changer, fermez le volet Partenaire d’IA et rouvrez Modifier avec l’IA sur le prototype ciblé.

2. Dans la zone 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 ENTRÉE de votre clavier.
   Le partenaire d’IA génère votre prototype affiné.
4. (Facultatif) Continuez à envoyer des prompts 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.

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 panneau Partenaire d’IA.
4. Dans la zone de prompt, demandez au Partenaire d’IA d’appliquer le style depuis l’URL fournie (veillez à inclure l’URL complète).
5. Le Partenaire d’IA appliquera le style visuel provenant de l’URL à une version mise à jour de votre prototype sur le tableau.

Appliquer des styles de prototype depuis 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 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 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 en premier ou en dernier. Pour garantir que tous les éléments de votre prototype respectent un thème, appliquez-le dès le début de sa conception ou comme étape finale.

Convertir des captures d’écran en prototypes modifiables

Vous pouvez convertir une capture d’écran d’un design ou de l’interface d’un concurrent en prototype modifiable.

1. Ajouter 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 le reconstruira en prototype modifiable—texte, boutons, mise en page et autres éléments.
6. Vous pouvez maintenant modifier, compléter ou éditer cette version selon vos besoins.

ASTUCE : Convertissez une capture d’écran en maquette modifiable. Puis utilisez un prompt pour demander à Miro IA de continuer à modifier. 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. Ensuite, utilisez l’image comme contexte dans votre prompt.

Choisir une version du prototype

Chaque itération crée une version du prototype. Au fur et à mesure que vous peaufinez votre prototype, le sélecteur de version se trouve au‑dessus du brouillon de prototype. 

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

Choisissez le raffinement ou la version de votre prototype à ajouter au canevas.

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

ASTUCE : Après avoir ajouté une version au canevas, vous pouvez accéder aux versions antérieures dans l’historique du chat 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 de prototype entièrement interactif, 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 des objets dans 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 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 lignes de connexion 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.

Dans 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. Appuyez sur Shift + E. En mode canevas, pour utiliser les raccourcis clavier, sélectionnez votre prototype.

Mode immersif

Miro Prototypes inclut le mode immersif. Accédez au mode immersif pour travailler sur votre prototype sans autres éléments du tableau visibles, afin de vous concentrer.

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

Fournissez votre prototype aux designers dans Figma sans avoir à le reconstruire manuellement. Vous pouvez copier votre prototype en entier ou uniquement certains écrans.

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) Commande + V comme raccourcis clavier.
   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 votre écran de prototype dans le presse-papiers.
4. Dans Figma, collez votre prototype. Vous pouvez utiliser (Windows) Ctrl + V ou (MacOS) Command + V .
   Votre écran de prototype est collé dans Figma.

Connexion de Claude Code à 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 design et implémentez les aspects pertinents du design. [Lien vers le tableau Miro pertinent]"
3. Vous pourrez consulter le Miro Prototype sur votre tableau Miro et visualiser le Claude Code dans votre fenêtre Terminal.

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. 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. (Optionnel) Cliquez sur Aperçu dans le navigateur pour voir comment toute personne disposant de votre lien consulte 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 qu’au prototype en mode immersif, pas aux autres contenus 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 aussi commenter.

ASTUCE : Vous pouvez également copier un lien partageable en mode immersif : Dans le coin supérieur droit, cliquez sur les trois points verticaux. Puis cliquez 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 également utiliser le Model Context Protocol (MCP) Server de Miro pour exporter vers un éditeur IA de codebase ; les équipes peuvent utiliser l’export pour générer du code opérationnel 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 en tant que » 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 en tant que », sélectionnez Vectoriel – SVG.
5. Cliquez sur Exporter.

ASTUCE : 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 sur Exporter en tant qu’image. La fenêtre modale Exporter en tant qu’image s’ouvre, puis sélectionnez Vecteur – SVG.

REMARQUE : Pour les exportations de prototypes au format SVG 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 pour 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 l’URL d’un tableau Miro incluant l’ID du tableau pour générer du code à partir de votre prototype.

FAQ