Préparer les designs dans le plugin Figma
Pixelay met en ligne, via son plugin Figma, des images des frames parents de premier niveau de la page Figma en cours, puis les superpose dans l’application web Pixelay aux URL des pages correspondantes de votre site.
Des frames Figma de premier niveau sont nécessaires. Pour comparer vos designs, votre page Figma doit contenir au moins un « frame parent », c’est-à-dire un frame placé directement sous votre page.
Sélectionner les frames Figma à comparer
Pour commencer, sélectionnez les frames de votre design Figma que vous voulez comparer avec les URL de votre site.
Pixelay charge tous vos « frames parents » dans le plugin sous forme de liste de designs à comparer avec votre site. Cliquez sur la case à cocher ou sur la vignette d’un frame pour le sélectionner (un nouveau clic le désélectionne).
Mettre en surbrillance les frames parents Figma pour les sélectionner. Pour sélectionner plus facilement les frames parents Figma à comparer, cliquez sur un ou plusieurs frames de votre page Figma ou mettez-les en surbrillance : la liste des frames disponibles dans le plugin Pixelay est automatiquement filtrée sur ceux-ci.
Actualiser les frames parents Figma
Si le plugin Pixelay est déjà ouvert et que vous devez ajouter ou supprimer des frames parents sur votre page Figma, faites ces modifications, puis cliquez sur le bouton à icône Refresh frames à côté du nombre de frames sélectionnés dans le plugin Pixelay.
Saisir l’URL de votre site web
Saisissez une URL valide dans le champ Base Website URL, en haut du plugin Pixelay, pour définir l’URL par défaut avec laquelle comparer vos designs. Cette URL sera la page chargée par défaut pour comparer les designs sélectionnés.
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.
Utilisez des URL en https://. Pixelay ne peut charger les sites en ligne et les URL de développement locales qu’en HTTPS.
Ajouter des URL propres à chaque page
Si vous comparez plusieurs frames à la fois, vous pouvez définir une URL par frame. Par exemple, pour comparer le design d’une page « À propos », vous pouvez indiquer une URL comme _https://yoursite.com/about/_. Cette URL spécifique remplace l’URL par défaut de la barre d’outils Pixelay.
Ajouter plusieurs URL d’environnement (facultatif)
Si votre site existe dans plusieurs environnements, ajoutez une URL de base supplémentaire pour chaque site de développement, de préproduction ou de production. Vous pourrez passer d’un environnement à l’autre dans l’application web Pixelay.
Pour ajouter des URL, cliquez sur le bouton à icône Show extra website URLs à côté de l’URL de base de votre site, saisissez la nouvelle URL dans le champ Add Extra Base URL (par exemple, https://dev.yoursite.com ou https://test.yoursite.com), puis cliquez sur le bouton Add URL pour l’ajouter à la liste des URL de base de vos environnements supplémentaires. Elles apparaîtront dans un menu déroulant de l’application web Pixelay après que vous aurez de nouveau mis en ligne vos designs depuis le plugin.
Pour supprimer une URL d’environnement, sélectionnez-la dans le menu déroulant, cliquez sur l’icône Delete selected URL, puis sur Delete pour confirmer. Remettez en ligne les designs Pixelay pour appliquer la modification au lien de comparaison actuel.
Générer votre URL de comparaison
Une fois les frames Figma à comparer sélectionnés et leurs URL de site attribuées, cliquez sur le bouton Compare Designs du plugin Pixelay (il indique le nombre de frames qui seront comparés). Dans le panneau Compare Figma Designs, cliquez sur le bouton Upload Designs pour confirmer et lancer la mise en ligne.
Si Compare Designs n’est pas disponible, survolez-le pour en connaître la raison : saisissez d’abord une URL de base pour le site, ou cochez au moins un frame. En mode gratuit, seuls les frames d’au plus 430 px de large peuvent être comparés.
Dupliquer un fichier Figma copie aussi son URL. Pour générer une autre URL pour le doublon, saisissez le code Konami (Up, Up, Down, Down, Left, Right, Left, Right, B, A) pendant que le plugin est ouvert. Pixelay crée une nouvelle URL sans supprimer la précédente.
Si la mise en ligne ou l’actualisation des frames échoue, Pixelay affiche une erreur dans le plugin et arrête l’indicateur de progression. Une erreur de mise en ligne n’annule pas les frames ou les réglages déjà envoyés vers la page de comparaison.
Ouvrir votre URL de comparaison
Une fois tous vos frames mis en ligne, le message de confirmation Designs Uploaded Successfully! vous indique que l’URL de la page de comparaison est prête.
Cliquez sur le bouton à icône Copy link pour copier l’URL et la coller dans votre navigateur (ou la partager), ou cliquez sur le lien Comparison URL du message de confirmation. L’application web Pixelay s’ouvre dans votre navigateur et vous pouvez commencer à comparer vos designs Figma avec les URL de développement de votre site.
Pour comparer vos designs avec des URL dans Pixelay, installez le plugin Chrome Pixelay, dont le lien figure aussi dans le message de confirmation du plugin.
Retrouver votre URL de comparaison depuis le plugin
Si vous avez déjà créé votre URL de comparaison avec le plugin et voulez la copier de nouveau (sans remettre en ligne vos designs), cliquez sur le bouton Compare Designs du plugin Pixelay : l’URL de comparaison créée précédemment s’affiche dans le panneau Compare Figma Designs. Pour la réutiliser, cliquez sur le bouton à icône Copy link pour copier l’URL et la coller dans votre navigateur (ou la partager), ou cliquez sur le lien comparison URL du panneau.
Remettre en ligne vos designs Figma sur l’URL de comparaison
Si vous avez modifié vos designs, si vous voulez inclure ou exclure d’autres frames Figma, ou modifier des liens de site ou de page dans votre URL de comparaison, remettez en ligne les designs sélectionnés sur l’URL de comparaison comme la première fois : cliquez sur le bouton Compare Designs du plugin Pixelay, puis, cette fois, sur le bouton Update Designs.
Votre URL de comparaison reste la même lorsque vous remettez en ligne vos designs. Chaque clic sur le bouton Update Designs remplace les frames et les liens de site mis en ligne précédemment, et met à jour l’URL de comparaison Pixelay générée auparavant avec vos nouveaux designs et liens.