Une fois votre URL générée dans le plugin Figma Pixelay, ouvrez-la dans votre navigateur pour commencer à utiliser l’application web Pixelay. C’est l’application web qui vous permet de comparer les designs mis en ligne depuis le plugin Figma avec les URL de la version en développement de votre site web.
L’application web charge chaque URL à comparer dans une iFrame et superpose vos designs Figma par-dessus. Les dimensions de chaque image mise en ligne définissent la largeur et la hauteur de chaque iFrame : vous pouvez ainsi tester le comportement « responsive » de votre site par rapport aux designs Figma prévus.
Installez l’extension Chrome Pixelay. Pour comparer vos designs avec des URL dans Pixelay, installez le plugin Chrome Pixelay : il s’exécute en arrière-plan et charge Pixelay dès qu’une URL issue du plugin est détectée dans le navigateur.
Faire défiler la page pour voir tous vos frames
Vous pouvez parcourir toute la page en faisant défiler verticalement et horizontalement (avec la molette de la souris ou en cliquant-glissant sur les barres de défilement). Le défilement vers la gauche et la droite vous montre tous les frames mis en ligne, et le défilement vers le haut et le bas tout le contenu de chacun de ces frames.
Si votre projet Pixelay compte plus de 20 frames Figma, l’extension Chrome affiche automatiquement un seul frame à la fois à comparer, pour éviter que la page ralentisse en chargeant toutes les URL en même temps ; passez de l’un à l’autre en choisissant n’importe lequel de vos frames Figma dans le panneau de contrôle en bas à droite de l’écran.
Basculer entre le design Figma et la version du site
Pour basculer rapidement entre le design Figma d’origine et la version de votre site, cliquez sur les boutons à icône Original Figma Design et Live Website Build du panneau de contrôle Pixelay.
Chacun de ces boutons active le mode correspondant, pour voir chaque mode isolément de l’autre.
Interagir avec les aperçus du site en ligne. Lorsque vous passez en mode Live Website Build, vous pouvez interagir avec la page. C’est utile pour remplir des champs de formulaire ou cliquer sur des éléments afin de rapprocher visuellement votre site en ligne des designs Figma d’origine que vous comparez.
Utiliser la superposition transparente
Pour comparer vos designs Figma et votre site avec différents niveaux d’opacité, cliquez sur le bouton à icône Transparent Overlay. Le mode de superposition transparente s’active.
En cliquant-glissant (ou en maintenant le clic) sur le curseur Overlay Opacity, réglez la transparence entre le design d’origine et l’URL en ligne.
Utiliser la superposition en écran partagé
Pour comparer vos designs Figma et votre site en écran partagé, cliquez sur le bouton à icône Split Screen Overlay. Le mode de superposition en écran partagé s’active.
En cliquant-glissant (ou en maintenant le clic) sur la Split Line bleue au milieu de chaque design, réglez la part du design d’origine et de l’URL en ligne visibles en même temps.
Utiliser la superposition en différence (blend-diff)
Pour comparer vos designs Figma et votre site par différence de fusion, cliquez sur le bouton à icône Blend-Diff Overlay. Le mode de superposition blend-diff s’active.
En cliquant-glissant (ou en maintenant le clic) sur le curseur Overlay Opacity, réglez la transparence entre le design d’origine et l’URL en ligne.
Utiliser la superposition déplaçable
Pour ajuster manuellement la position de la superposition sur tous vos designs, cliquez sur le bouton à icône Draggable Overlay. Le mode de superposition déplaçable s’active.
En cliquant-glissant (ou en maintenant le clic) sur le curseur Overlay Opacity, réglez la transparence entre le design d’origine et l’URL en ligne.
Utiliser la règle de mesure en pixels
Pour mesurer la distance entre des éléments de la page avec une règle en pixels, cliquez sur le bouton à icône Measure Pixels. Le mode de mesure en pixels s’active.
Tant que ce mode est actif, mesurez la distance en pixels en cliquant-glissant (ou en maintenant le clic) avec le curseur de la souris entre deux points de la page.
En cliquant-glissant (ou en maintenant le clic) sur le curseur Overlay Opacity, réglez la transparence entre le design d’origine et l’URL en ligne.
Basculer entre les URL d’environnement
Si vous avez ajouté des URL d’environnement supplémentaires dans le plugin Figma Pixelay avant de mettre en ligne vos designs à comparer, vous pouvez passer de l’une à l’autre avec le menu déroulant Change Environment Base URL du panneau de contrôle de l’application web Pixelay.
L’URL de base de tous les frames de vos aperçus Pixelay change alors automatiquement. Par exemple, sélectionner https://dev.yoursite.com remplace l’URL de base de toutes les URL https://www.yoursite.com par dev.yoursite.com, y compris les URL propres à une page (par exemple, un frame Figma dont l’URL de page est https://www.yoursite.com/about chargera https://dev.yoursite.com/about à la place).
Utiliser un environnement de développement avec rechargement à chaud
Si vos URL de développement locales utilisent le Hot Module Replacement (HMR), les frames de l’application web Pixelay se mettent à jour automatiquement en temps réel (puisqu’ils pointent vers vos URL de développement dans des iFrames), sans avoir à actualiser l’URL de l’application web Pixelay elle-même.
Toutes les modifications faites en local dans votre éditeur de code apparaissent dans l’application web Pixelay dès que vous enregistrez les fichiers et que le HMR injecte ces changements dans vos URL.