Exporter vos bannières en fichiers GIF animés

Une fois l’animation de vos calques terminée dans la timeline, vous pouvez exporter vos bannières en fichiers GIF animés.

Tutoriel vidéo : exporter des bannières en GIF depuis Figma

Cette vidéo montre comment exporter depuis Figma des bannières animées prêtes pour la production en GIF avec le plugin Bannerify.

Une fois satisfait de vos bannières, pour les exporter en fichier GIF, WebM, MP4 ou WebP animé, cliquez sur le bouton Export to GIF/Video dans l’en-tête de Bannerify. Les réglages d’export GIF/vidéo s’ouvrent.

Inclure ou exclure des bannières de l’export. Par défaut, tous les frames de votre fichier Figma chargés dans Bannerify comme bannières sont inclus dans l’export. Pour exclure certaines bannières, désactivez l’interrupteur Include In Export dans l’en-tête de la timeline de la bannière concernée : sa timeline est alors masquée et la bannière est exclue de tous les exports.

Inclure ou exclure des bannières de l’export. Par défaut, tous les calques de premier niveau de votre fichier Figma chargés dans Bannerify comme bannières sont inclus dans l’export. Pour exclure certaines bannières (sans recharger les bannières sélectionnées), désactivez l’interrupteur Include In Export dans l’en-tête de la timeline de la bannière concernée : sa timeline est alors masquée et la bannière est exclue de tous les exports.

Images par seconde ​

Vous pouvez modifier la fréquence d’images de vos exports GIF avec les options de la liste déroulante Frames Per Second. Vous avez le choix entre les options de FPS suivantes :

  • 60 FPS (Ludicrous Mode)
  • 30 FPS (Ultra Smooth)
  • 24 FPS (Smooth)
  • 18 FPS (Less Smooth)
  • 12 FPS (Least Smooth)
  • 6 FPS (Jittery)

Plus le nombre de FPS est élevé, plus le rendu est long. Plus il y a d’images, plus l’export prend de temps et plus les fichiers sont lourds. Par exemple, exporter une timeline de 5 secondes à 24 FPS produit 120 images par bannière.

Les délais entre images d’un GIF sont exprimés par incréments de 10 millisecondes. Si nécessaire, Bannerify alterne les délais entre images pour conserver la vitesse de lecture globale. Les images peuvent donc avoir des durées légèrement différentes. Lorsque vous sélectionnez 60 FPS pour un GIF, Bannerify l’échantillonne et l’exporte à 50 FPS pour que les navigateurs puissent le lire à la bonne vitesse. Le panneau d’export et le nom du fichier ZIP indiquent la fréquence effective de 50 FPS. La fréquence d’images que vous avez sélectionnée est conservée pour le MP4 et les autres formats.

Compression sans perte ou avec perte ​

Par défaut, les GIF sont exportés avec une compression sans perte : le poids du fichier reste faible, sans perte de qualité visible. Si vous avez besoin de GIF encore plus légers (au prix d’une certaine perte de qualité), désactivez l’option Lossless Compression et réglez le curseur de qualité de compression selon vos besoins.

Régler les options avancées de tramage. Si vous savez ce que vous faites, vous pouvez personnaliser le type de tramage utilisé pour votre export GIF en modifiant l’option du menu déroulant de tramage d’image dans le panneau de réglages d’export GIF.

Utiliser une palette de couleurs globale ​

Si vous exportez un GIF dont la palette de couleurs est la même pour toutes les images (avec seulement quelques petits mouvements, changements de texte, etc. de l’une à l’autre) et que vous voyez des artefacts de couleur, vous pouvez activer l’option All GIF frames have the same color palette : la palette de couleurs de la première image de votre GIF est alors réutilisée et appliquée à toutes les autres images du GIF.

Les palettes de couleurs globales peuvent poser problème. N’utilisez cette option qu’en dernier recours, si votre GIF présente des artefacts de couleur ou des effets de bandes indésirables, car elle peut causer d’autres problèmes si certaines couleurs des autres images de votre GIF ne figurent pas dans la première image.

Lecture en boucle infinie ​

Si vous activez l’option Infinite Loop, les GIF exportés lisent leur timeline d’animation en boucle, à l’infini. Si vous désactivez ce réglage, vos GIF lisent leur timeline d’animation une seule fois, puis se figent sur la dernière image de l’animation. Cette option ne s’applique qu’aux exports GIF.

Signaler les arrière-plans transparents des GIF ​

Par défaut, vos exports GIF n’incluent pas d’arrière-plan transparent. Si votre GIF a besoin de transparence, activez l’option Has Transparent Background dans les réglages d’export GIF.

Télécharger le fichier .zip GIF final ​

Une fois le traitement de vos bannières terminé, Bannerify affiche un message de confirmation. Vous pouvez télécharger le fichier .zip contenant vos bannières exportées en cliquant sur le bouton Download your .zip file.

Enregistrer les fichiers téléchargés depuis Figma. Si vous utilisez l’application de bureau Figma, une fenêtre vous invite à télécharger votre fichier. En revanche, si vous utilisez Figma dans un navigateur web, votre fichier est téléchargé automatiquement sur votre ordinateur par défaut (en général dans le dossier Téléchargements de votre ordinateur).

Ouvrir votre fichier .zip GIF ​

Après avoir téléchargé votre fichier .zip depuis Figma sur votre ordinateur, ouvrez votre explorateur de fichiers dans le dossier où il a été enregistré. Double-cliquez sur le fichier .zip exporté pour en extraire le contenu et utiliser vos bannières comme bon vous semble.