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 à écran unique et multi-écrans, affiner vos conceptions et appliquer des styles, et prévisualiser une simulation interactive de votre prototype. Construisez votre conception en plusieurs étapes spécifiques qui génèrent chaque élément de votre prototype. Vous pouvez également affiner vos instructions pour éviter de recommencer.

Cet article explique comment utiliser les fonctionnalités de Miro Prototypes. Pour des informations générales sur Miro Prototypes, consultez vue d'ensemble de Miro Prototypes. 

✏️ L'expérience Prototypes a été déplacée vers les partenaires d’IA. Maintenant en bêta publique, certains utilisateurs disposent déjà des nouvelles entrées Sidekicks 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 Sidekicks (Bêta). Le contenu qui explique comment affiner et itérer votre production reste applicable.

Plus d'informations : Consultez 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éder au prototype dans la bibliothèque des partenaires d’IA 
3. Cliquez sur Formats > Prototype.
4. Indiquez si vous souhaitez commencer par un texte prompt ou une capture d’écran.
5. Précisez le type de dispositif.
6. Précisez un prototype à un écran ou à plusieurs écrans.
7. Suivez les instructions à l'écran pour rédiger votre prompt ou charger une capture d'écran. Dans la boîte 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 IA génère un prototype de brouillon sur le canevas.
9. (Optionnel) Pour arrêter la génération, sur votre prototype, cliquez sur Arrêter.
10. (Optionnel) 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.
11. Sur votre prototype 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 le partenaire d’IA (Bêta)

Certains utilisateurs peuvent déjà disposer de la mise à jour Partenaire d’IA pour le prototypage. Cette section décrit comment commencer le prototypage avec le partenaire d’IA. Pour savoir comment commencer manuellement, consultez la bibliothèque de prototypage.

✏️ La mise à jour de Partenaire 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 Partenaire d'IA.
   Le panneau Partenaire 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.

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

   💡 Vous pouvez aussi 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 voulez 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 à utiliser le panneau Prototype.
   Chaque itération crée une version de votre prototype d'ébauche.
7. Sur votre prototype de brouillon, choisissez l'une des options suivantes :
   • Appliquer au canevas
     Votre prototype est désormais modifiable sur le canevas.
   • Annuler tout
     Votre brouillon est supprimé du canevas. Vous pouvez affiner votre prompt et répéter les étapes 3 à 6.

💡 Commencez petit et soyez précis. Moins d'écrans générés à la fois produisent 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, sections, ou actions.

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

💡 Un prototype peut prendre 1 à 3 minutes pour se générer, en fonction de la complexité du prompt et de 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 briefing de design dans un document ou sur des pense-bêtes. Les prototypes peuvent utiliser le 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 avez la version mise à jour...
3. Cliquez sur la bibliothèque des partenaires d’IA
   Accéder au Prototype dans la bibliothèque des partenaires d’IA 
4. Cliquez sur Formats > Prototype.
5. Sélectionnez Un prompt texte.
6. Spécifiez le type de dispositif, puis indiquez simple ou multi-écran.
   La boîte de réponse montre 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 du canevas sélectionné.

💡 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 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érez votre prototype

Votre première ébauche peut ne pas être 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é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 à itérer.
4. Dans la boîte 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.

✏️ Les modifications ne peuvent être effectuées qu'une écran à la fois.

💡 Utilisez le contexte du canevas. Sélectionnez des documents, diagrammes, pense-bêtes, ou d'autres contenus du tableau pour 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é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 itérer.
4. Sélectionnez une capture d'écran sur le tableau.
5. Dans la boîte de réponse, décrivez les modifications souhaitées 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. 

💡 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 voulez 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 panneau Partenaire d’IA s'ouvre.
   Modifier avec l'IA vous permet de peaufiner un prototype existant.

   ✏️ 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 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 sur votre clavier.
   Le partenaire d’IA génère votre prototype affiné.
4. (Optionnel) Continuez à solliciter le 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 brouillon, cliquez sur Ajouter au canevas.

✏️ 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 ou 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 Miro IA dans le menu contextuel.
4. Sélectionnez Importer le style depuis une image.
   Importez les styles et appliquez-les à votre prototype
5. Choisissez le fichier image dont vous souhaitez importer le style.
6. Les styles sont appliqués à votre prototype.

💡 Appliquez les styles d'abord ou en dernier. Pour que tous les éléments de votre prototype suivent un thème, appliquez votre thème soit au début de la conception de votre prototype, soit en dernière étape.

Convertissez 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. Sélectionnez l’icône Miro IA > Convertir l’image en prototype.
4. Choisissez le type d’appareil (Mobile, Tablette, Bureau).
5. L’IA le reconstruira sous forme de prototype modifiable—texte, boutons, disposition et autres éléments.
6. Vous pouvez maintenant modifier, ajouter ou éditer cette version selon vos besoins.

💡 Convertissez une capture d'écran en une maquette modifiable. Demandez ensuite à Miro IA de continuer la modification. 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. Utilisez ensuite l'image comme contexte dans votre prompt.

Sélectionner une version du prototype

Chaque amélioration crée une version du prototype. En affinant votre prototype, le sélecteur de version se situe au-dessus de la maquette de prototype. 

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

Choisissez la version ou l'amélioration de votre prototype à ajouter sur le canevas.

💡 Avant de cliquer sur Ajouter au canevas, vous pouvez sélectionner un écran à partir 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 supprimer. 

⚠️ Lorsque vous cliquez sur Ajouter au canevas, toutes les autres versions ne pourront plus être récupérées.

Aperçu d'un prototype

1. Sélectionnez un écran de prototype.
   Le menu contextuel s’affiche.
2. Dans le menu contextuel, cliquez sur Aperçu.
   L’aperçu se charge.

💡 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 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 Ligne de connexion vers l’écran auquel il doit être lié.
3. En mode Aperçu, cliquer sur l'élément amènera les utilisateurs à l’écran lié.

Masquer les lignes de connexion

Pour les prototypes avec de nombreuses connexions, vous pouvez masquer les connecteurs afin de simplifier la vue 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.

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

Mode immersif

Miro Prototypes inclut le mode immersif. Entrez en mode immersif pour travailler sur votre prototype sans voir d'autres contenus du tableau, ce qui vous permet 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 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 (Windows) Ctrl + V ou (MacOS) Command + V .
   Votre prototype se colle dans Figma.

Copier un écran de prototype vers Figma

1. Dans votre prototype, cliquez pour sélectionner un écran du 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 (Windows) Ctrl + V ou (MacOS) Commande + V .
   L'écran de votre prototype est collé dans Figma.

Exporter votre prototype

Vous pouvez exporter votre prototype au format SVG. Vous pouvez aussi utiliser le serveur MCP (Model Context Protocol) de Miro pour 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. Sur la barre de tableau, cliquez sur les trois points verticaux.
2. Cliquez sur Tableau > 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 recouvre votre prototype.
4. Dans la fenêtre modale Exporter l'image en tant que, sélectionnez Vecteur – SVG.
5. Cliquez sur Exporter. 

💡 Vous pouvez exporter un seul écran en tant que 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.

✏️ Pour les exportations de prototypes 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 Miro MCP

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

Pour en savoir plus sur l'utilisation de Miro MCP, consultez aperçu du serveur Miro MCP.

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.

FAQ