Bibliothèque de wireframes

Qui peut le faire : Tous les utilisateurs
Quels forfaits : Tous les forfaits
Quelles plateformes : Navigateur, application de bureau, mobile

REMARQUE : La Prototyping Library s’appelle désormais la Wireframing Library. Vos Screens, composants et flux existants fonctionneront de la même façon.

Utilisez la Wireframing Library pour créer des écrans et des flux à faible fidélité directement sur le canevas Miro. La bibliothèque inclut des Screens, des UI components et des Icons qui vous aident à esquisser des flux et à structurer des idées à un stade précoce.

Tous les utilisateurs peuvent créer des wireframes statiques. Advanced components, connector lines et interactive preview requièrent un Business plan ou une Enterprise Accelerate license.

ASTUCE : Besoin d’un prototype haute fidélité ? Utilisez Prototypes 2.0 (prototypes HTML). Vous pouvez convertir vos wireframes en un Prototype HTML pour des visuels plus riches, édition par IA, révision et transfert. Voir À propos de Prototypes 2.0 et Créer un Prototype 2.0.

Ouvrir la Wireframing Library

1. Sur le canevas, depuis la barre d’outils de création, cliquez sur l’icône Tools, Media and Integrations.
2. Recherchez Wireframing, puis cliquez sur Wireframing Library.
3. Le panneau Wireframing Library s’ouvre.

Contenu de la Wireframing Library

La Wireframing Library est organisée en onglets. Tous les utilisateurs peuvent créer des wireframes statiques avec screens, UI components et icons.

Écrans

Les écrans sont des cadres prêts à l’emploi pour créer des wireframes. Ajoutez des écrans Mobile, Tablet ou Desktop à votre canevas, puis faites glisser des éléments d’interface dessus.

Travaillez avec les écrans

• Affichez ou masquez le chrome de l’écran, pour qu’il ressemble à un cadre d’appareil ou à un simple cadre
• Faites pivoter un écran
• Redimensionnez un écran en faisant glisser le bord pour augmenter sa hauteur (vertical uniquement)

Composants d’interface

Les composants d’interface sont des éléments d’interface courants, comme des boutons, des champs de saisie, des barres de navigation et des éléments de formulaire.

Vous pouvez :

• Faites glisser des composants sur un écran
• Redimensionnez et repositionnez des composants
• Modifiez le texte et le style de base depuis le menu contextuel

REMARQUE : Les options du menu contextuel varient en fonction de l’élément sélectionné.

Sur le forfait Business et avec la licence Enterprise Accelerate, certains composants d’interface sont interactifs en mode aperçu. Par exemple, les boutons, curseurs, champs de saisie et menus déroulants réagissent aux lignes de connexion que vous avez définies.

Les composants avancés ne sont disponibles que sur le forfait Business et avec la licence Enterprise Accelerate.

Icônes

L’onglet Icônes contient une bibliothèque d’icônes consultable.

Ajouter ou remplacer une icône

1. Faites glisser une icône de la bibliothèque sur le canevas.
2. Sélectionnez l’icône pour modifier sa couleur depuis le menu contextuel.
3. Choisissez Remplacer l’icône pour la remplacer par une autre icône sans en modifier la position ni la taille.

Connector lines and interactive preview

Quels forfaits : Business, Enterprise (avec licence Accelerate)

Connector lines définissent la navigation entre les screens. Tracez des connector lines depuis un élément d’un screen vers un autre screen pour construire des flux multi-étapes.

Connector lines permettent également l’interactive preview. En Preview mode, les screens connectés fonctionnent comme un flux cliquable.

ASTUCE : Certains éléments UI affichent une icône éclair lorsqu’ils sont ajoutés à un screen. Dans des flux multi-screen, faites glisser l’icône éclair vers un autre screen pour créer une connector line.

Convertir les wireframes en HTML Prototypes

Quels forfaits : Business, Enterprise (avec licence Accelerate)

Lorsque votre flux est prêt pour une révision haute fidélité ou un transfert, convertissez vos widgets, wireframes ou Screens en HTML Prototype (Prototypes 2.0). Les HTML Prototypes prennent en charge :

• Rendu enrichi (dégradés, ombres, polices et mises en page).
• Modifications légères sur le canevas.
• Connecteurs interactifs.
• Modifier avec l’IA.
• Aperçu plein écran avec un lien partageable.
• Exporter au format HTML ou en image.

REMARQUE : Si vous utilisez Modifier avec l’IA sur les écrans de la Wireframing Library, Miro crée un nouveau prototype Prototypes 2.0. Vos écrans d’origine ne sont pas modifiés.

FAQ