Extension Safari

Si vous utilisez le navigateur Safari pour accéder à notre application, l'extension officielle Moqups pour Safari ajoutera les fonctionnalités suivantes :

• Convertir des pages web en mises en page modifiables
• Capturer des captures d'écran vers la bibliothèque
• Activer la pipette pour le sélecteur de couleurs
• Créer des projets et accéder à Moqups

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

Installer l'extension Moqups

1. Visitez l'Apple App Store et recherchez Moqups
2. Après avoir installé l'extension, le bouton bleu Moqups apparaîtra à droite de la barre d'adresse du navigateur.
3. Pour activer la pipette, vous devrez actualiser tous les onglets sur lesquels l'application Moqups est actuellement ouverte.

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 dans la barre d'outils

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.

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 d'images d'équipe dans Moqups – ou annuler si vous souhaitez réessayer !

Activer la pipette

Notre extension Safari 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

Pourquoi la pipette ne fonctionne-t-elle que si j'utilise une extension de navigateur ?

Pour fournir toutes ces fonctionnalités – y compris la pipette – nous avons choisi de nous appuyer sur les extensions de navigateur pour des raisons techniques et de sécurité. Pour une explication complète de ce choix et du raisonnement qui le sous-tend, consultez notre article de blog.

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

Pour l'instant, notre extension est disponible pour Safari, Firefox et Chrome – et les utilisateurs de Brave peuvent installer la version Chrome.