Tutoriel vidéo : exporter des bannières en images PNG animées (APNG) depuis Figma
Cette vidéo montre comment exporter depuis Figma des bannières animées prêtes pour la production en images PNG animées (APNG) avec le plugin Bannerify.
Après avoir cliqué sur Export to GIF/Video et configuré vos réglages d’export, cliquez sur le bouton Export APNG (n Banners) en bas du panneau d’export pour lancer l’export de vos bannières depuis Figma en images PNG animées. Vos bannières animées sont alors exportées en fichiers image PNG animés.
Compatibilité des navigateurs. En raison de problèmes de compatibilité entre navigateurs, les images Animated PNG ne peuvent être exportées qu’avec Chrome ou l’application de bureau Figma.
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.
Télécharger le fichier .zip PNG 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 PNG
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.