Un frame parent pivoté décale la position des calques
Cela se produit généralement lorsque le frame parent a été pivoté à une valeur autre que 0 degré (par exemple « -90 » ou « 180 ») avant l’ajout de son contenu, ce qui fausse la position des calques enfants. Pour résoudre le problème, créez un nouveau frame non pivoté aux mêmes dimensions, puis copiez ou faites glisser les calques enfants du frame pivoté d’origine vers ce nouveau frame sans rotation.
Cadre de sélection des calques de texte (recadrage)
Un autre problème peut décaler la position d’un calque de texte ou le rogner : la taille de la zone de texte ne correspond pas à celle du texte lui-même. Par exemple, si le texte tient sur plusieurs lignes mais que la hauteur du « cadre de sélection » est très faible, la position sera décalée. Pour résoudre le problème, ajustez la hauteur du cadre de sélection pour qu’elle corresponde à la taille du texte.
SVG avec ombre portée flous dans Safari
Il existe un problème connu dans Safari avec les SVG qui contiennent une ombre portée : Safari rastérise le vecteur en pixels, ce qui le rend moins net.
Une solution proposée dans cette discussion consiste à séparer l’ombre et le bouton (ou le contenu) sur deux calques distincts : le calque du bouton, au-dessus et sans ombre, reste un SVG net dans Safari, et le calque du dessous sert uniquement à ajouter l’ombre derrière.
Vous pouvez aussi, via le plugin, forcer le format d’image « PNG » pour ce seul calque de bouton CTA, et forcer également l’échelle de ce calque à @2x (Retina). Le CTA est alors exporté en image PNG 2x, ce qui le garde net et évite le problème des ombres SVG dans Safari.
Les couleurs ou les dégradés des GIF semblent un peu granuleux
Les GIF diffèrent des images JPG/PNG classiques, car ils ne peuvent contenir que 256 couleurs au maximum. Si vous utilisez des images très détaillées ou des dégradés riches en nuances, il est normal que le GIF soit moins net et moins fidèle en couleurs que les images d’origine, en raison de cette limite du format GIF.
La transparence ne s’affiche pas dans les GIF
Le format GIF accepte uniquement une opacité de 0 % ou de 100 %, sans valeur intermédiaire. Vous pouvez donc avoir un GIF animé avec un arrière-plan entièrement transparent derrière des éléments entièrement opaques et visibles. Les calques doivent donc être soit totalement transparents, soit totalement opaques : tout calque dont l’opacité est inférieure à 50 % sera transparent, et tout calque dont l’opacité est supérieure à 50 % sera opaque.
Signaler les GIF transparents dans Figma. Par défaut, vos exports GIF n’incluent pas la transparence. Si votre GIF en a besoin, ajoutez le mot transparent n’importe où dans le nom de votre calque Figma.
Où héberger les fichiers vidéo .mp4
Pour ajouter des vidéos dans Bannerify, le plugin charge toute URL qui pointe directement vers un fichier .mp4. Les URL Vimeo ou YouTube, ou tout autre lien vers un lecteur web, ne peuvent malheureusement pas être utilisées. Une bonne solution pour héberger vos vidéos est Backblaze B2 : vous pouvez créer un compte gratuit qui offre 10 Go de stockage gratuit et, si vous créez un bucket de stockage public, copier-coller le lien de chaque fichier vidéo que vous y mettez en ligne, puis coller ce lien vers le .mp4 dans Bannerify. Dropbox est une autre solution d’hébergement courante : vous pouvez y mettre en ligne votre fichier .mp4 et utiliser ce lien dans le plugin Bannerify. Bannerify remplace automatiquement ?dl=0 par ?raw=1 pour que le lien pointe directement vers le fichier vidéo (et non vers le lecteur du site Dropbox).
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 sous-pixel est alors automatiquement incluse dans l’export. Bannerify essaie d’arrondir automatiquement ces valeurs pour les calques redimensionnables via l’API Figma Plugin, mais pour résoudre le problème manuellement (si nécessaire), vérifiez que toutes les positions de vos calques sont des valeurs de pixel entières.
Les bannières haute résolution ne s’exportent pas en MP4
Lorsque vous exportez des bannières haute résolution en vidéo MP4 depuis le plugin, Figma atteint parfois sa limite de mémoire de 2 Go et ne parvient pas à générer directement le fichier vidéo .mp4. Pour contourner ce problème, exportez vos bannières depuis Bannerify au format WebM, puis convertissez les fichiers vidéo .webm exportés en .mp4 en dehors de Figma avec le transcodeur vidéo Handbrake.
Google Ads ne valide pas les bannières
Il existe quelques raisons courantes pour lesquelles une bannière HTML ne s’importe pas ou n’est pas validée par Google. Le plus souvent, le poids du fichier de la bannière est trop élevé, ou ses dimensions ne correspondent pas exactement aux tailles « standard ». Vous pouvez utiliser ces services pour valider vos bannières pour Google Ads ou DoubleClick avant de les importer.
La bannière HTML exportée ne s’anime pas ou ne se lit pas dans le navigateur
Si votre bannière HTML exportée semble figée, ne s’anime pas, ou fonctionne dans l’aperçu de Bannerify mais pas lorsque vous ouvrez le fichier HTML exporté dans un navigateur, vérifiez si un bloqueur de publicités ou une extension de navigateur dédiée à la confidentialité est activé. Certaines extensions peuvent empêcher des fichiers HTML locaux ou liés à la publicité de fonctionner correctement. Désactivez temporairement l’extension pour le fichier d’aperçu local, ouvrez l’export dans un autre navigateur, ou importez la bannière dans votre environnement d’aperçu ou de préproduction habituel et testez-la dans cet environnement.
Extensions de fichier vides avec l’application de bureau Figma sous Windows
Il existe un problème connu avec l’application de bureau Figma (uniquement sous Windows), qui touche aussi les exports de fichiers classiques depuis Figma. Au moment d’enregistrer votre fichier, vous verrez peut-être la mention « all files ». Si vous l’ignorez et continuez en cliquant sur « Save », le fichier devrait tout de même être enregistré avec la bonne extension et s’ouvrir normalement une fois téléchargé sur votre ordinateur. S’il est malgré tout enregistré sans extension, vous pouvez renommer le fichier pour ajouter manuellement la bonne extension à son nom.
Le validateur HTML de Google convertit en PNG les éléments SVG avec ombre portée (import depuis un mobile)
Pour une raison inconnue, lorsque vous importez le fichier .zip d’une bannière dans le DCM Validator depuis le navigateur d’un appareil mobile (par exemple un iPhone), le validateur convertit automatiquement en PNG tous les éléments SVG qui contiennent une ombre portée, ce qui les rend plus pixellisés dans l’aperçu.
Images exportées pixellisées
Si vous exportez des bannières alors que les images du fichier Figma sont encore en cours de chargement progressif, elles risquent d’être exportées pixellisées, car elles n’étaient pas entièrement chargées dans le fichier Figma au moment de l’export. Pour résoudre le problème, vérifiez que toutes les images sont chargées à 100 % et nettes dans le fichier Figma avant d’exporter vos bannières avec le plugin Bannerify. Pour aller plus loin, vous pouvez utiliser la fonctionnalité « Downsizer » de TinyImage 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.
Ajouter des attributs aria-hidden='true' aux calques
Si vous avez besoin d’attributs aria-hidden pour des raisons d’accessibilité, vous pouvez les ajouter calque par calque en incluant aria-hidden dans le nom de votre calque Figma : aria-hidden="true" est alors automatiquement ajouté à cet élément HTML lors de l’export des bannières en HTML.
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 »
Ce message peut apparaître 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 désactivé, faites un clic droit n’importe où sur votre canevas Figma, survolez Plugins, puis Development, et vérifiez que l’option Use Developer VM est décochée. Une fois qu’elle est décochée (et qu’aucune coche ne s’affiche à côté), relancez le plugin Figma : il devrait fonctionner normalement.