Tutoriel vidéo : exporter des bannières en HTML/GSAP depuis Figma
Cette vidéo montre comment exporter en quelques secondes, depuis Figma, des bannières animées prêtes pour la production en HTML/GreenSock (GSAP) avec le plugin Bannerify.
Tutoriel vidéo : exporter des bannières HTML depuis Figma pour plusieurs plateformes publicitaires
Cette vidéo montre comment exporter en un clic, depuis Figma, des bannières HTML animées pour plusieurs plateformes publicitaires avec le plugin Bannerify.
Exporter en HTML
Une fois satisfait de vos bannières, pour les exporter en HTML, cliquez sur le bouton Export to HTML dans l’en-tête de Bannerify. Les réglages d’export HTML s’ouvrent.
Après avoir configuré tous vos réglages d’export HTML, cliquez sur le bouton Export n Banners en bas du panneau d’export pour lancer l’export de vos bannières depuis Figma en HTML.
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.
Les noms de fichier des bannières exportées conservent les lettres comme Å, Ä, Ö, å, ä, ö présentes dans les noms de vos frames Figma. Les noms des dossiers d’export et le nom du fichier ZIP principal acceptent aussi les lettres accentuées. Les séparateurs de chemin et la ponctuation non prise en charge sont toujours retirés des noms de fichier des frames.
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.
Décompressez d’abord le fichier .zip exporté avant d’utiliser les bannières ou de les importer dans une plateforme publicitaire : le fichier .zip exporté contient toutes les bannières individuelles (ainsi que le dossier imbriqué _zips, où chaque bannière est déjà compressée séparément, prête à être importée dans une plateforme publicitaire).
Les bloqueurs de publicités du navigateur peuvent empêcher la lecture correcte des aperçus locaux de bannières. Si une bannière HTML exportée semble figée, ne s’anime pas ou se comporte différemment dans l’aperçu de votre navigateur, désactivez temporairement les bloqueurs de publicités et les extensions de confidentialité pour le fichier d’aperçu local, ou testez dans un autre navigateur avant de relancer l’export.
Chaque format de sortie HTML a ses propres exigences de configuration et d’empaquetage. Consultez le guide Options des plateformes publicitaires pour choisir le bon format avant d’exporter.
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).
Réutiliser vos réglages d’export d’un fichier Figma à l’autre : lorsque le panneau de réglages Export to HTML est ouvert et actif, appuyez sur Ctrl + Shift + E pour enregistrer vos préférences d’export actuelles dans le fichier bannerify-export-settings.json. Dans un autre fichier Figma, ouvrez le même panneau et appuyez sur Ctrl + Shift + I pour sélectionner ce fichier JSON et appliquer ses préférences à la page actuelle. Utilisez la touche Ctrl sous Windows comme sur Mac.
Recadrage automatique des photos masquées
Les exports HTML/CSS + GSAP standard peuvent supprimer automatiquement les zones inutilisées des photos JPEG éligibles placées dans des masques de mouvement rectangulaires ou arrondis. Bannerify conserve toute la zone nécessaire pendant les animations prises en charge Zoom Pan Left et Zoom Pan Right, avec une petite marge de sécurité. Les photos fixes et les fondus peuvent également en bénéficier. Vos calques Figma et les positions de l’animation restent inchangés.
Les préréglages pris en charge comprennent aussi les Fade In/Out, Slide In/Out et Wipe In/Out directionnels, Instant Show/Hide et Scale Up/Down Center. Les animations d’entrée et de sortie qui se chevauchent et pourraient combiner des transformations conservent l’image originale.
Cette optimisation est automatique et indépendante de la compression des images et des objectifs de taille de fichier. Elle ne remplace une image que si le fichier recadré est plus petit. Le gain dépend de la partie de la photo originale qui reste hors du masque pendant toute l’animation.
Les animations non prises en charge, le code personnalisé injecté, Figma Motion, les images pivotées ou avec des effets et les autres formats d’export conservent leurs images originales. Si le recadrage échoue, Bannerify utilise également l’image originale pour poursuivre l’export.
Les variantes générées à partir d’un tableur conservent leurs images d’origine afin que chaque ligne utilise la bonne photo. Les bannières ordinaires, y compris la bannière principale d’origine, peuvent toujours bénéficier du recadrage automatique.
Options standard
Ajouter une bordure noire de 1px à toutes les bannières
Si vous activez l’option de bordure de 1px, une bordure 1px solid black est automatiquement ajoutée au CSS de toutes vos bannières. C’est utile pour les plateformes publicitaires qui préfèrent (ou exigent) une bordure noire de 1px autour des bannières.
Ajouter une animation de préchargement à toutes les bannières
Si vous activez l’option de préchargement, un indicateur de chargement est automatiquement ajouté au HTML de toutes vos bannières. Cette animation de chargement reste affichée jusqu’à ce que toutes les images de la bannière soient chargées dans le navigateur.
Options de lecture
Définir le nombre de lectures des bannières
Cette option indique combien de fois la timeline de toutes vos bannières doit être lue du début à la fin. La valeur par défaut est 1 : vos bannières lisent leur timeline d’animation du début à la fin une seule fois.
Vous pouvez modifier ce nombre en saisissant une valeur plus élevée dans le champ numérique, par exemple 6. L’animation de la timeline de toutes vos bannières sera alors lue six fois du début à la fin.
Lire vos bannières en boucle infinie
Vous pouvez faire tourner la timeline d’animation de toutes vos bannières en boucle à l’infini en activant l’option Infinitely loop all banners.
Inclure un fichier .zip individuel pour chaque bannière
Si vous activez l’option Include individual .zip files for each banner, un dossier supplémentaire nommé _zips est ajouté à votre fichier exporté. Le dossier _zips contient un fichier zip individuel pour chacune des bannières exportées. C’est pratique et cela vous fait gagner du temps si votre plateforme publicitaire exige l’import d’un fichier zip par bannière.
Inclure si besoin backup.jpg dans les zips. Pour que le fichier image backup.jpg soit inclus dans chaque zip, activez l’option Add "backup.jpg" to individual zip files : les images backup.jpg seront alors incluses dans vos zips individuels. Si cette option est désactivée alors que vous compressez vos bannières séparément et que vous avez aussi activé l’option Add "backup.jpg", toutes vos images de secours sont également placées dans un dossier _backups, à la racine du fichier .zip principal exporté par Bannerify.
Choisir un format de sortie HTML
Bannerify peut exporter du HTML indépendant de toute plateforme, des paquets d’import propres à une plateforme, des mises en page responsive et plusieurs formats par lots. Chaque option des Code Output Settings a son propre guide dans Options des plateformes publicitaires, avec sa configuration, sa gestion des clics, la structure de son paquet et des conseils de test.
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.
Exports de code minifié
Pour optimiser le poids des fichiers, Bannerify minifie par défaut tout le code exporté et enregistre un seul fichier .html par bannière. Si vous avez besoin d’un code plus lisible ou réparti dans des fichiers .html, .css et .js distincts, désactivez l’option Minified dans les options d’export du code.
Exporter le texte en balises de paragraphe plutôt qu’en images SVG
Par défaut, les calques de texte de votre timeline Bannerify sont exportés en images SVG (dans des balises image), mais vous pouvez les exporter en texte enrichi (dans des balises de paragraphe) en activant l’option Export text as <p> tags instead of <svg>.
Garder certains calques de texte en images
Lorsque l’option d’export en paragraphes est activée, les calques de texte verrouillés dans Figma conservent leur sortie SVG/image au lieu de devenir du texte HTML modifiable.
- Dans Figma, verrouillez chaque calque de texte qui doit rester une illustration. Verrouillez le calque de texte lui-même, et pas seulement son groupe ou son frame parent.
- Laissez déverrouillés les calques de texte que vous voulez modifier en HTML.
- Activez Export text as <p> tags instead of <svg> et relancez l’export.
Par exemple, laissez déverrouillé l’emplacement réservé au nom d’un concessionnaire et verrouillez le texte qui l’entoure. L’emplacement réservé reste du HTML modifiable, tandis que le texte verrouillé reste dans les images. Le verrouillage ne retire pas l’illustration de la bannière et ne contrôle pas l’accès aux fichiers exportés. Déverrouiller un calque de texte le rend de nouveau éligible au texte enrichi lors de l’export suivant. Les conditions d’éligibilité du texte et les limites de format existantes s’appliquent toujours.
Pour utiliser les polices de la marque dans le texte modifiable, consultez Ajouter des polices personnalisées au texte HTML modifiable.