Qu'est-ce que Outil de Wireframe ?

Esquissez des mises en page et des maquettes d'interface en quelques secondes. Glissez-déposez des éléments d'interface courants — boutons, blocs de texte, images, champs de saisie — sur un canevas, puis exportez en PNG ou enregistrez en JSON pour continuer l'édition.

Le canevas s'appuie sur fabric.js et embarque un kit d'éléments complet : rectangles, blocs de texte, boutons, emplacements d'image, champs de saisie, navbars, cartes, cases à cocher, menus déroulants, groupes de boutons radio, barres de progression, curseurs et pense-bêtes pour les annotations. Le zoom et l'ajustement à l'écran gardent les maquettes chargées lisibles, et tu peux cadrer le canevas à la largeur mobile, tablette ou bureau. Annuler, rétablir, grouper, dégrouper et réordonner les couches sont accessibles au clavier. Exporte en PNG ou SVG pour partager, ou en JSON pour rouvrir le projet dans le même état.

Comment utiliser

1. Sélectionnez un élément d'interface dans la barre d'outils — tel qu'un rectangle, un bloc de texte, un bouton, un espace réservé pour une image ou un champ de saisie — et cliquez sur le canevas pour le placer.
2. Faites glisser les éléments pour les repositionner, redimensionnez-les en tirant sur les poignées et modifiez le texte en double-cliquant. Regroupez les éléments pour faciliter leur déplacement.
3. Exportez votre wireframe en image PNG pour le partager, ou enregistrez-le en JSON pour le recharger et continuer à l'éditer plus tard.

Quand l'utiliser

• Croquer trois variantes d'écran en 15 minutes avant une revue avec les parties prenantes.
• Annoter une idée dans Slack au lieu d'essayer de décrire la mise en page avec des mots.
• Montrer à un designer junior la différence entre basse et haute fidélité.

Résultat

Un chef de produit esquisse un écran de connexion d'application mobile avec un espace réservé pour le logo, des champs e-mail et mot de passe, un bouton de connexion et un lien "mot de passe oublié" — puis exporte le PNG pour le partager dans un canal Slack.

FAQ

Quelle est la différence avec Figma ?

Figma sert à la haute fidélité : composants, prototypes, collaboration en équipe. Cet outil reste volontairement basse fidélité, un petit kit de formes basiques, pas de détails de style à régler. Une idée d'écran sort en quelques minutes, pas en une après-midi. Le rendu sert à clarifier la pensée, pas au handoff.

Comment déplacer les éléments au pixel près ?

Sélectionne un élément et utilise les flèches pour des décalages d'un pixel. Maintiens Maj plus flèche pour des pas de dix pixels. Pour redimensionner, attrape les poignées d'angle, et maintiens Maj en glissant pour préserver les proportions.

Peut-on copier des éléments d'un wireframe à un autre ?

Exporte les deux fichiers en JSON, ouvre un éditeur de texte et recopie les entrées du tableau elements voulues du premier vers le second. Réimporte et les formes apparaissent. La plupart des gens préfèrent juste dupliquer avec Ctrl+D dans le même fichier.

Pourquoi le JSON pèse-t-il parfois plus que le PNG ?

Le JSON stocke chaque propriété de chaque forme (position, remplissage, contour, police, contenu textuel) en texte lisible. Le PNG est une image tramée plate. Sur un wireframe chargé en texte, le JSON peut dépasser le PNG, mais lui seul permet de continuer l'édition plus tard.

Peut-on ajouter ses propres formes personnalisées ?

Pas directement dans l'outil, mais tu peux grouper des primitives existantes (Ctrl+G) pour faire un cluster réutilisable, comme une barre de recherche ou un onglet. Sauvegarde le JSON, copie ce groupe et colle-le dans de nouveaux fichiers, ça devient ta mini-bibliothèque.

Outils similaires