Pixelay ne se charge pas sur les URL (l’extension Chrome est nécessaire)
Pour pouvoir comparer vos designs avec des URL via Pixelay, installez l’extension 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.
Une app Next.js (Vercel) ne se charge pas
Si vous essayez de comparer une app Next.js via Pixelay, le message « Application error: a client-side exception has occurred » peut parfois s’afficher et la page ne se charge pas. Dans ce cas, vous pouvez essayer le lien ci-dessous, qui ne passe pas par l’extension Chrome, en y insérant votre identifiant Pixelay : https://pixelay.hypermatic.com/YOUR_PIXELAY_PROJECT_ID_HERE (par exemple, https://pixelay.hypermatic.com/n4ok457201973)
Expiration des URL
Vos liens sécurisés et vos images sont automatiquement supprimés après 180 jours d’inactivité (180 jours après le dernier accès au lien), afin qu’ils ne traînent pas par mégarde une fois qu’ils ont rempli leur rôle.
Fine ligne blanche autour des images exportées
Il arrive que certaines images présentent une fine ligne blanche, à peine visible, sur leurs bords. Figma produit cet effet lorsqu’un calque n’est pas positionné sur une valeur de pixel entière (par exemple Y: 156.76 ou X: 56.3) : cette ligne de sous-pixel est alors automatiquement incluse dans l’export. Pour résoudre le problème, vérifiez que toutes les positions de vos calques sont des valeurs de pixel entières.
Sites web utilisant des unités CSS « vh »
Si le CSS de votre site web utilise des unités « vh » pour certains éléments, sachez que ceux-ci peuvent paraître beaucoup plus hauts que dans une fenêtre de navigateur de hauteur normale, car Pixelay définit la hauteur du viewport sur celle de votre maquette Figma complète.
Créer une toute nouvelle URL pour votre fichier Figma
Comme il s’agit d’une fonctionnalité assez sensible, plutôt que d’ajouter un bouton ou une icône sur lesquels cliquer, nous l’avons rendue activable uniquement en tapant le « code Konami » sur votre clavier pendant que le plugin est ouvert :
Up, Up, Down, Down, Left, Right, Left, Right, B, A
Taper cette séquence de touches sur votre clavier déclenche la création d’une toute nouvelle URL pour votre fichier Figma par le plugin Pixelay. Vous pouvez ainsi la saisir dans un fichier Figma dupliqué pour lui attribuer une URL différente de celle de l’original.
Exports d’images pixellisées
Si vous mettez en ligne vos designs alors que les images de Figma sont encore en cours de chargement progressif, elles risquent d’être exportées pixellisées, car l’image n’était pas entièrement chargée dans le fichier Figma au moment de l’export. Pour résoudre ce problème, vérifiez que toutes les images sont chargées à 100 % et s’affichent nettement dans le fichier Figma avant de mettre en ligne vos images avec le plugin Pixelay.
Pour aller plus loin, vous pouvez utiliser la fonctionnalité « Downsizer » pour réduire vos remplissages d’image à la taille de leur calque : leur poids diminue et ils se chargent beaucoup plus vite dans votre fichier Figma.
Les designs ne sont pas mis en ligne depuis le plugin, ou les images ne se chargent pas dans l’application web
Cela peut venir de votre fournisseur d’accès à Internet, s’il bloque le protocole QUIC. Pour le vérifier, ouvrez la console de développement de votre navigateur ou de Figma : le message d’erreur ERR_QUIC_PROTOCOL_ERROR s’affiche alors.
Il existe deux solutions de contournement :
- Connecter votre ordinateur à Internet via le partage de connexion Wi-Fi de votre téléphone mobile
- Désactiver QUIC dans votre navigateur
Netskope empêche le chargement des frames Pixelay
Netskope bloque l’accès aux bases de données Firebase : c’est un problème connu. Pour le résoudre, autorisez firestore.googleapis.com:443 (comme indiqué dans cette discussion).
Un VPN peut être nécessaire en Chine
Remarque : si vous êtes en Chine, le serveur des comptes peut être bloqué par la « grande muraille numérique de Chine » (Great Firewall). Si une erreur d’activation s’affiche alors que votre clé est valide, vous devrez probablement utiliser un VPN pour résoudre le problème.
« An error occurred while loading the plugin environment »
Cette erreur peut se produire dans l’application de bureau Figma si le réglage de débogage Use Developer VM de Figma a été activé par erreur. Pour vérifier qu’il est bien désactivé, faites un clic droit n’importe où sur votre canevas Figma, survolez Plugins, puis Development, et assurez-vous que Use Developer VM est décoché. Une fois l’option décochée (sans coche à côté), relancez le plugin Figma : il devrait fonctionner normalement.