Extension Google Chrome

Notre extension Google Chrome vous permet de convertir des pages web en ligne, des parties de page ou des éléments sélectionnés en maquettes entièrement modifiables. Elle vous permet aussi d'importer des designs d'IA sous forme de mises en page modifiables, afin de les peaufiner et de les réviser. Depuis l'extension, vous pouvez également générer des briefs de design à partir de pages web, capturer des captures d'écran, créer de nouveaux projets Moqups ou ouvrir notre application.

Dans cet article, vous apprendrez comment installer l'extension dans Chrome et comment utiliser ses fonctionnalités.

Installer l'extension Moqups

1. Visitez le Chrome Web Store.
2. Après avoir installé l'extension, le bouton bleu Moqups apparaîtra à droite de la barre d'adresse du navigateur.

Transformer des pages web en ligne en mises en page modifiables

Vous pouvez avoir besoin de travailler avec des maquettes de pages web en ligne pour de nombreuses raisons – mettre à jour et maintenir des pages existantes, créer de nouvelles pages qui correspondent au design de ce qui est déjà publié, ou personnaliser des éléments répétés sur de grands hubs internes et sites d'administration.

L'extension Moqups vous permet d'importer dans Moqups des pages web entières ou des sélections. Les designs arrivent sous forme de mises en page entièrement modifiables – chaque élément étant séparé pour faciliter la sélection et la personnalisation.

Des options vous permettent d'utiliser le design haute fidélité de la page, ou de convertir cette mise en page en wireframe basse fidélité. Vous pouvez également importer la fenêtre actuelle ou ajuster la mise en page aux vues bureau, ordinateur portable ou téléphone.

Pour convertir une page web en ligne en maquette modifiable :

1. Cliquez sur l'icône de l'extension Moqups à droite de la barre d'adresse du navigateur

2. Sélectionnez Hi-Fi Design

3. Choisissez parmi…

   • Sélectionner une zone (Select area) pour convertir une partie d'une page ou des éléments individuels
   • Fenêtre actuelle (Current window) pour convertir la page entière
   • Les options Bureau (Desktop), Ordinateur portable (Laptop) ou Vue téléphone (Phone View) pour ajuster la mise en page à ces vues

4. Dans la fenêtre contextuelle Sélection prête (Selection ready)…

   • Cliquez sur le bouton Copier dans le presse-papiers (Copy to clipboard) pour coller la mise en page dans un projet Moqups ouvert
   • Cliquez sur le bouton Ouvrir dans Moqups (Open in Moqups) pour créer un nouveau projet à partir de la mise en page

Convertir des pages web haute fidélité en wireframes basse fidélité

En plus d'importer des pages web en pleine fidélité, vous pouvez aussi les transformer en wireframes basse fidélité en niveaux de gris. Supprimer les couleurs et le style peut aider à se concentrer sur la mise en page, la structure et le contenu de la page. C'est utile lorsque vous souhaitez comparer la structure sous-jacente de différentes pages, tester d'autres solutions de design, ou repartir d'une page blanche visuelle lors d'un changement de marque.

Pour transformer une page web haute fidélité en wireframe basse fidélité :

1. Cliquez sur l'icône de l'extension Moqups à droite de la barre d'adresse du navigateur.

2. Sélectionnez Wireframe

3. Choisissez parmi…

   • Sélectionner une zone (Select area) pour convertir une partie d'une page ou des éléments individuels
   • Fenêtre actuelle (Current window) pour convertir la page entière
   • Bureau (Desktop), Ordinateur portable (Laptop) ou Vue téléphone (Phone View) pour ajuster la mise en page à ces vues

4. Dans la fenêtre contextuelle Sélection prête (Selection ready)…

   • Cliquez sur le bouton Copier dans le presse-papiers (Copy to clipboard) pour coller la mise en page dans un projet Moqups ouvert.
   • Cliquez sur le bouton Ouvrir dans Moqups (Open in Moqups) pour créer un nouveau projet à partir de la mise en page.

Importer des designs d'IA dans Moqups

Vous pouvez aussi utiliser l'extension Moqups pour transformer des éléments générés par l'IA en designs entièrement modifiables. Vous pouvez ainsi utiliser l'IA comme générateur de modèles – qui fournit l'essentiel de la mise en page et du texte de remplissage – avant de personnaliser et d'affiner les détails dans Moqups. Votre équipe peut aussi passer de Moqups à votre propre outil d'IA et inversement, en exportant des sections à régénérer, puis en affinant le résultat étape par étape.

Pour importer un design d'IA dans votre projet Moqups :

1. Cliquez sur l'icône de l'extension Moqups à droite de la barre d'adresse du navigateur.

2. Choisissez Hi-Fi Design ou Wireframe.

3. Sélectionnez Convertir un artefact d'IA ou une iframe (Convert AI artifact or iframe)

4. Cliquez sur l'iframe ou sélectionnez un élément avec la barre d'espace

5. Dans la fenêtre contextuelle Sélection prête (Selection ready)…

   • Cliquez sur le bouton Copier dans le presse-papiers (Copy to clipboard) pour coller la mise en page dans un projet Moqups ouvert.
   • Cliquez sur le bouton Ouvrir dans Moqups (Open in Moqups) pour créer un nouveau projet à partir de la mise en page.

Générer un brief de design pour l'IA

Cet outil est idéal si vous travaillez avec une IA et souhaitez lui transmettre vos directives de marque. Il extrait le style de n'importe quelle fenêtre du navigateur pour générer un brief de design. Vous pouvez ensuite coller ce brief dans votre prompt afin que l'IA sache quelles directives de marque – couleurs, typographie, style des boutons et des champs de saisie – utiliser comme référence pour toute nouvelle génération de design.

Capturer des captures d'écran

Avec l'extension, vous pouvez capturer la zone visible d'un site web, une sélection spécifique ou une page entière – et ajouter ces captures instantanément à votre bibliothèque d'images d'équipe. Cela vous fait gagner du temps lorsque vous préparez un tableau d'ambiance, cherchez de l'inspiration, effectuez des recherches sur la concurrence ou créez des maquettes rapides.

Pour prendre des captures d'écran :

1. Cliquez sur l'icône de l'extension Moqups à droite de la barre d'adresse du navigateur.

2. Sélectionnez l'une des options Prendre une capture d'écran (Take Screenshot) :

   • Zone visible (Visible Area) capturera uniquement ce qui est actuellement visible dans la fenêtre de votre navigateur
   • Capturer une région (Capture Region) vous permettra de cliquer et de faire glisser pour choisir une partie spécifique de la fenêtre
   • Page entière (Full Page) capturera la totalité de la page web

3. Votre capture d'écran s'ouvrira dans un nouvel onglet du navigateur ; ici, vous pouvez la nommer, l'enregistrer directement dans votre bibliothèque Images d'équipe dans Moqups – ou annuler si vous souhaitez réessayer !

4. Une fois que vous avez cliqué sur le bouton Enregistrer dans Moqups (Save to Moqups) et que l'image a été téléchargée, cliquez simplement sur le bouton Terminé ! Aller à Moqups (Done! Go to Moqups) pour accéder à votre projet.

Activer la pipette

Pour les versions Chrome antérieures à la version 95, notre extension active également la pipette de notre application – vous permettant de cibler n'importe quelle couleur sur la page et de l'appliquer instantanément à vos éléments de design.

L'installation de l'extension – et l'actualisation de tous les onglets Moqups ouverts – activera automatiquement la pipette. Vous trouverez l'icône de la pipette dans le sélecteur de couleurs du panneau Format.

Pour utiliser la pipette afin de sélectionner des couleurs :

1. Cliquez sur l'icône de la pipette pour ouvrir une fenêtre d'inspection dans le coin supérieur droit de l'écran.
2. Lorsque vous déplacez le curseur en forme de réticule sur la page, la fenêtre affichera une vue agrandie des pixels en dessous, ainsi que leurs valeurs RGB et Hex.
3. Cliquez pour sélectionner la couleur sous le curseur.

Créer des projets et accéder à Moqups

Vous pouvez instantanément créer un nouveau projet ou accéder directement au tableau de bord de votre compte en cliquant sur le bouton Moqups dans le coin supérieur droit de votre navigateur.

Cela est particulièrement utile lorsque vous naviguez entre plusieurs onglets dans le navigateur – ou que vous prenez des captures d'écran pour créer des tableaux d'ambiance, des maquettes et des storyboards.

Questions et réponses

Cette extension est-elle disponible pour d'autres navigateurs ?

Pour l'instant, notre extension est disponible pour Chrome et Firefox – et les utilisateurs de Brave peuvent installer la version Chrome. Nous travaillons sur une extension Safari, mais cela pourrait prendre un peu plus de temps à mettre en œuvre.