GratuitExtension pour Chrome et Firefox
Votre maquette, au pixel près
Pixel Perfect Pro superpose l’image de votre maquette à la page que vous développez, pour les aligner et voir chaque écart. Aucun compte, et vos maquettes restent dans votre navigateur.
Captures d’écran
Comment ça marche
Ouvrez la page que vous développez et cliquez sur l’icône de Pixel Perfect Pro. Si la page contient des cadres, choisissez où placer la superposition.
Ajoutez votre maquette sous forme d’image : glissez-déposez-la, choisissez un fichier, collez-la depuis le presse-papiers ou ajoutez-la par URL.
Faites glisser la maquette en place, ou déplacez-la pixel par pixel au clavier.
Baissez l’opacité, ou passez le mode de fusion sur « Difference » pour faire ressortir chaque écart. Corrigez la page et vérifiez à nouveau.
Ce qu’elle fait
Modes de fusion
Passez le mode de fusion sur « Difference » et chaque pixel qui ne correspond pas à la maquette ressort. « Multiply », « Overlay », « Screen » et « Exclusion » sont aussi disponibles.
Fondu, inversion ou balayage
Estompez la maquette pour voir les deux calques à la fois, inversez ses couleurs sur les pages sombres, ou faites glisser un curseur qui balaie entre la maquette et la page.
Placement précis
Saisissez la position, la rotation, l’échelle et la largeur en chiffres, centrez sur l’un ou l’autre axe, et verrouillez la maquette pour que les clics atteignent la page.
Grille de colonnes
Préréglages Bootstrap, Tailwind et Material, ou vos propres colonnes, gouttière, largeur, décalage, couleur et opacité, plus une grille de ligne de base. Fonctionne aussi sans maquette.
Règle et repères
Mesurez les distances et faites glisser des lignes de repère sur la page.
Plusieurs maquettes par site
Chaque site web garde ses propres maquettes. Regroupez-les par étiquettes, passez de l’une à l’autre avec suivant et précédent, et liez-en une à un point de rupture pour que la fenêtre prenne sa largeur.
Vos raccourcis et vos couleurs
Attribuez jusqu’à deux combinaisons de touches à chaque action, et choisissez les couleurs de la barre d’outils pour les thèmes clair et sombre.
Résiste aux rechargements
Rechargez la page : la superposition se rouvre avec la même maquette, au même endroit. Elle fonctionne aussi dans les iframes, et dans Chrome sur les fichiers HTML locaux.
Confidentialité dès la conception
- Aucun compte, aucune mesure d’audience, aucun pistage, aucune publicité.
- Vos maquettes sont enregistrées dans votre navigateur, site par site, et ne sont jamais envoyées en ligne.
- Sa seule requête réseau sert à télécharger une maquette que vous ajoutez par URL.
- La superposition ne se charge que dans les onglets où vous l’ouvrez.
Gratuite, sans compte
Tout est inclus
- Plusieurs maquettes par site, avec étiquettes et points de rupture
- Modes de fusion, opacité, inversion et curseur de comparaison
- Grille de colonnes, grille de ligne de base, règle et repères
- Raccourcis personnalisés et thèmes de barre d’outils
- Iframes, et fichiers HTML locaux dans Chrome