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.

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

Vous pouvez utiliser des prompts pour générer des flux à écran unique ou multiple, affiner vos conceptions et appliquer des styles, et prévisualiser une simulation interactive de votre prototype.

✏️ L'expérience Prototypes a été déplacée vers les partenaires d’IA. Désormais en version bêta publique, certains utilisateurs disposent déjà de l'entrée mise à jour, 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 les partenaires d’IA (bêta). Le contenu expliquant comment affiner et itérer votre production reste applicable.

Construisez votre conception en plusieurs instructions spécifiques qui génèrent chaque élément de votre prototype. Vous pouvez également affiner vos instructions pour éviter de recommencer.

Plus d'informations : Consultez la FAQ.

Créer un prototype avec Miro IA

Cette section décrit comment commencer à concevoir des 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 Sidekicks.
   Le panneau Sidekick s'ouvre.
2. Cliquez sur bibliothèque partenaire d’IA.
   Accédez au prototype dans la bibliothèque partenaire d’IA 
3. Cliquez sur Formats > Prototype.
4. Indiquez si vous souhaitez commencer avec un prompt ou une capture d’écran.
5. Spécifiez le type d'appareil.
6. Définissez 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 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 préliminaire sur le canevas.
9. (Option) Pour arrêter la génération, sur votre prototype, cliquez sur Arrêter.
10. (Option) Pour itérer sur votre prototype, continuez à demander dans le panneau Prototype.
    Chaque itération crée une version de votre prototype préliminaire.
11. 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 7 à 9.

Créer un prototype avec Partenaire d’IA (Bêta)

Certains utilisateurs peuvent déjà accéder à la nouvelle entrée Partenaire d’IA pour le prototypage. Cette section décrit comment commencer à prototyper avec Partenaire d’IA. Pour savoir comment commencer manuellement, consultez Bibliothèque de prototypage.

✏️ 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.

   💡 Vous pouvez également ouvrir le panneau partenaire d’IA et commencer à demander 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".

   💡 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, sur votre prototype, cliquez sur Stop.
6. (Facultatif) Pour itérer votre prototype, continuez à faire des prompts dans le panneau Prototype.
   Chaque itération crée une version de votre prototype brouillon.
7. Sur votre ébauche de prototype, choisissez l'une des options suivantes :
   • Appliquer au canevas
     Votre prototype est maintenant modifiable sur le canevas.
   • Tout supprimer
     Votre ébauche est supprimée 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 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.

💡 Appliquez plusieurs ébauches de prototype sur le 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, selon la complexité du prompt et la taille du contenu. Si votre prototype met 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 pour l'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 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 bibliothèque Partenaire d’IA
   Accéder à Prototype dans la bibliothèque Partenaire d’IA 
4. Cliquez sur Formats > Prototype.
5. Sélectionnez Un prompt texte.
6. Spécifiez 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 sélectionné sur le canevas.

💡 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 souhaitez que Miro IA utilise.

Itérez votre prototype

Votre premier brouillon peut ne pas être 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 AI. Ne pas appliquer au canevas.
   La prochaine étape dans le panneau Prototype est Que souhaitez-vous faire ensuite ?
2. Choisissez Modifier le prototype. 
3. Pour un flux multi-écrans, choisissez l'écran que vous souhaitez faire évoluer.
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.

✏️ Les modifications ne peuvent être faites qu'un écran à la fois.

💡 Utilisez le contexte du canevas. Sélectionnez des documents, des diagrammes, des pense-bêtes ou d'autres contenus de tableau pour générer un prompt avec Miro IA.

Itérer avec une capture d’écran en tant que 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é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. 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 haut ou appuyez sur Entrée sur votre clavier.
   Miro génère une nouvelle version de votre prototype. 

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

Appliquer les styles du 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/vos écran(s) 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 des styles et appliquez-les à votre prototype
5. Choisissez le fichier image depuis lequel vous souhaitez importer le style.
6. Les styles sont appliqués à votre prototype.

💡 Appliquez les styles en premier ou en dernier. Pour garantir que tous les éléments de votre prototype suivent un thème, appliquez-le tôt dans la conception de votre prototype, ou bien comme étape finale.

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

💡 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 en tant qu'image. Utilisez ensuite l'image comme contexte dans votre prompt.

Sélectionner une version de prototype

Chaque raffinement crée une version de prototype. Au fur et à 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 la version choisie, cliquez sur Ajouter au canevas. Votre version est appliquée au canevas.

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

💡 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 garantit que vous pouvez enregistrer un écran d'une version que vous pourriez supprimer. 

⚠️ Lorsque vous cliquez sur Ajouter au canevas, toutes les autres versions ne peuvent pas ê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 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 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 elle doit se lier.
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 nombreux connecteurs, vous pouvez masquer les connecteurs pour simplifier la consultation 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 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 en mode immersif pour travailler sur votre prototype sans que le contenu des autres tableaux ne soit visible, 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 distractions.

Exporter votre prototype

Vous pouvez exporter votre prototype au format SVG. Vous pouvez également utiliser le serveur Model Context Protocol (MCP) de Miro pour exporter vers un éditeur de code AI ; 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 du tableau, cliquez sur les trois points verticaux.
2. Cliquez sur Tableau > Exporter > Exporter en tant qu’image.
   Une fenêtre de sélection ainsi que 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. 

💡 Vous pouvez exporter un seul écran en SVG à partir du 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 Vecteur – SVG.

✏️ Pour les exportations SVG de prototypes avec images, si vous importez le SVG dans un autre logiciel pour modification, 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 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 du code basé sur le prototype.

Pour en savoir plus sur l'utilisation du serveur Miro MCP, consultez vue d'ensemble du serveur Miro MCP.

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

Foire aux questions