Tutoriel vidéo : exporter en masse des variantes de bannières Figma à partir d’un tableur

Cette vidéo montre comment exporter en masse des variantes de bannières Figma à partir d’un tableur, en HTML ou en vidéo/GIF, avec le plugin Bannerify.

Bannerify peut transformer un jeu de bannières chargé en de nombreuses variantes exportées, en appliquant une ligne du tableur à la fois pendant l’export. Bannerify ne synchronise pas durablement le tableur avec votre fichier Figma. Il utilise plutôt les lignes sélectionnées comme données d’export temporaires, génère chaque variante de bannière, puis regroupe ces fichiers dans votre .zip final.

Les variantes de bannières fonctionnent avec :

• les exports de bannières HTML ;
• les exports GIF, MP4, WebM, WebP animé et PNG animé ;
• les exports statiques JPG, PNG, WebP et PDF.

Étape 1 : faire correspondre les en-têtes du tableur aux noms des calques Figma

La première ligne de votre tableur doit contenir les noms des calques que Bannerify doit remplacer pendant l’export.

Pour les calques de texte, renommez vos calques de texte Figma pour qu’ils correspondent exactement aux en-têtes du tableur.

Pour les calques d’image, renommez vos calques Figma avec remplissage d’image pour qu’ils correspondent exactement aux en-têtes du tableur, puis indiquez dans la cellule du tableur une URL d’image, une valeur data:image/... ou une référence à une ressource d’un ZIP.

Pour les calques de médias intégrés, renommez le calque Figma non textuel ciblé pour qu’il corresponde exactement à l’en-tête du tableur, puis indiquez dans la cellule soit une URL directe .mp4, .webm ou .json, soit la référence à un fichier .mp4, .webm ou .json correspondant dans une source ZIP importée. Pendant l’export, Bannerify traite les valeurs vidéo comme des sources de vidéo intégrée et les valeurs .json comme des sources Lottie intégrées.

Pour synchroniser des styles, renommez le calque ciblé pour qu’il corresponde exactement à l’en-tête du tableur, puis indiquez dans la cellule une chaîne de déclarations CSS valide, comme color:#ffffff; font-size:48px; ou display:none;.

Pour contrôler la visibilité, vous pouvez aussi indiquer _hide ou _show dans une cellule correspondante du tableur pour masquer ou afficher ce calque Figma lors de l’export des variantes.

Voici un exemple simple :

headline	cta	logo	badge
Achetez maintenant, payez plus tard	Téléchargez l’application	logo-1.png	display:none;
Fractionnez vos paiements	En savoir plus	logo-2.png	opacity:0.5;
Un pouvoir d’achat flexible	Commencer	logo-3.png	background-color:#111111; color:#ffffff;

Chaque ligne de données devient une variante de bannière.

Si vous importez un fichier .zip au lieu d’un simple .csv ou .xlsx, Bannerify utilise le premier fichier de tableur trouvé dans le ZIP et peut aussi retrouver, par nom de fichier ou chemin relatif, les images et les fichiers multimédias .mp4, .webm et .json inclus dans ce même ZIP.

Valeurs de cellule prises en charge

Bannerify applique actuellement ces types de valeurs du tableur lors de l’export des variantes :

• des valeurs de texte brut pour les calques de texte Figma correspondants ;
• des références d’image pour les calques avec remplissage d’image correspondants : URL d’image, valeurs data:image/... ou références à des fichiers image inclus dans un ZIP importé ;
• des URL directes .mp4, .webm ou .json pour les calques de médias intégrés correspondants ;
• des références à des fichiers .mp4, .webm ou .json inclus dans un ZIP importé pour les calques de médias intégrés correspondants ;
• des chaînes de déclarations CSS pour les calques cibles de synchronisation correspondants ;
• les commandes de visibilité _hide et _show pour les calques correspondants.

Pour contrôler la visibilité ou le style depuis le tableur, utilisez des valeurs CSS comme display:none;, opacity:0;, left:20px; ou transform:translateX(40px);.

Bannerify accepte actuellement ces propriétés CSS dans les valeurs du tableur :

• width, height, opacity
• background, background-image, background-color
• border-radius, border, border-left, border-right, border-top, border-bottom, border-color, border-width
• font-size, color, font-family, font-weight, text-transform, font-style, line-height, text-align, vertical-align
• display, flex-direction, gap, justify-content, align-items
• padding, padding-top, padding-right, padding-bottom, padding-left
• box-shadow, filter, transform, left, top

Étape 2 : importer votre fichier CSV, XLSX ou ZIP

Ouvrez le panneau Variants dans Bannerify et importez un fichier .csv, .xlsx ou .zip dans la section Data Source.

Une fois le fichier lu, Bannerify affiche un aperçu du tableur actif sur la gauche du panneau. Vous pouvez ainsi vérifier que vos en-têtes et les valeurs des lignes sont corrects avant tout export.

Le tableau d’aperçu met en évidence les valeurs d’image avec des miniatures, affiche les valeurs vidéo sous forme de badges Video Embed ou Video URL, présente les déclarations CSS sous forme de jetons de style et affiche les valeurs _hide / _show comme des commandes de visibilité des calques : vous repérez ainsi rapidement les lignes non textuelles avant l’export.

Si vous importez plus tard un nouveau fichier, Bannerify remplace la source actuelle par ce dernier fichier.

Étape 3 : activer les variantes et choisir les lignes à exporter

Une fois un tableur chargé, activez Enable Banner Variants During Exports.

Les cases à cocher du tableau vous permettent de choisir précisément les lignes à exporter comme variantes :

• la case de l’en-tête du tableau sélectionne ou désélectionne toutes les lignes ;
• la case de chaque ligne inclut ou exclut cette variante ;
• seules les lignes cochées sont utilisées lors de l’export.

Bannerify mémorise ces sélections de lignes pour la source de tableur enregistrée : lorsque vous rouvrez le plugin, les lignes incluses et exclues restent les mêmes.

Polices manquantes et export de repli

Lorsque les variantes sont activées, Bannerify vérifie avant l’export si des polices manquent dans les bannières sélectionnées.

Si Bannerify détecte dans Figma des calques dont la police est manquante, il vous avertit dans le panneau Variants. Dans ce cas, Bannerify exporte les bannières d’origine au lieu d’essayer de rendre des variantes défectueuses.

Nommage automatique des dossiers et des fichiers de variantes

Si vous laissez Export Folder Structure Naming vide, Bannerify nomme automatiquement chaque variante exportée.

Les règles automatiques sont les suivantes :

1. Les exports d’origine inclus avec les variantes du tableur sont regroupés dans row-0 pour les petits tableurs, ou dans row-000 lorsque le nombre total de lignes nécessite des zéros de remplissage.
2. Le chemin du dossier de la variante utilise la valeur folder du tableur, si elle existe.
3. En l’absence de valeur folder, Bannerify utilise row-1, row-2, etc. pour les petits tableurs, et ajoute des zéros de remplissage pour les ensembles plus grands, comme row-001, row-002.
4. Le nom du fichier exporté utilise la valeur name du tableur, si elle existe.
5. En l’absence de valeur name, Bannerify conserve le nom d’origine de la bannière Figma pour l’export.

Un champ de nommage vide peut donc produire des chemins comme ceux-ci :

• row-0/300x250_Homepage Hero
• product-launch/300x250_Homepage Hero
• row-003/300x250_Homepage Hero

Personnaliser les noms des dossiers et des fichiers d’export

Vous pouvez remplacer le nommage automatique en saisissant votre propre modèle dans Export Folder Structure Naming.

Utilisez au choix :

• name-only-template
• folder/name-template

Tout ce qui précède le dernier / devient le chemin du dossier de la variante. Tout ce qui le suit devient le nom du fichier exporté.

Si vous saisissez uniquement un modèle de nom, Bannerify utilise la valeur obtenue comme chemin de l’élément exporté. Pour les exports HTML, #{Item_Name} crée un dossier comme summer-sale contenant son index.html. Pour les exports d’image ou de vidéo, il crée un fichier comme summer-sale.png, summer-sale.gif ou summer-sale.mp4.

Utiliser les en-têtes du tableur comme variables

Vous pouvez utiliser n’importe quel en-tête du tableur comme jeton dynamique en l’encadrant ainsi :

• #{headline}
• #{cta}
• #{campaign}
• #{product_name}

Si votre en-tête contient des espaces ou de la ponctuation, Bannerify accepte aussi sa forme normalisée avec des tirets bas. Par exemple, un en-tête nommé CTA Label peut s’utiliser sous la forme #{CTA Label} ou #{cta_label}.

Utiliser les variables intégrées de Bannerify

Bannerify propose aussi quelques valeurs intégrées :

• #{row_number} pour le numéro de la ligne actuelle, à partir de 1
• #{row_index} pour l’index de la ligne, à partir de zéro
• #{figma_name} pour le nom de la bannière Figma
• #{figma_width} pour la largeur de la bannière
• #{figma_height} pour la hauteur de la bannière
• #{figma_size} pour la taille de la bannière, comme 300x250
• #{source} pour le nom de la source du tableur
• #{source_slug} pour une version « slugifiée » du nom de la source
• #{platform} pour la plateforme d’export actuelle

Exemples :

• #{campaign}/#{figma_size}_#{figma_name}
• #{row_number}_#{headline}
• exports/#{campaign}/#{figma_name}
• exports/#{row_number}_#{figma_size}

Si certains en-têtes de votre tableur portent le même nom que des jetons intégrés, comme name ou folder, vous pouvez faire explicitement référence à la valeur brute du tableur avec #{csv_name} ou #{csv_folder}.

Structure du ZIP et comportement de la page d’aperçu

Lorsque les variantes sont activées, Bannerify exporte chaque ligne dans son propre dossier de variante, à l’intérieur du fichier .zip final.

Pour les exports HTML, l’index.html d’aperçu généré pointe automatiquement vers le chemin exporté de chaque bannière de variante.

Pour les exports basés sur canvas, comme les exports GIF, MP4, WebM, WebP animé, PNG animé et d’images statiques, l’index.html d’aperçu suit aussi les mêmes règles de nommage des dossiers et des fichiers de variantes.

Votre page d’aperçu reste ainsi synchronisée avec :

• les lignes sélectionnées du tableur ;
• les modèles personnalisés de nommage des dossiers et des fichiers ;
• les chemins de repli automatiques basés sur row, folder ou name.

Empaquetage des fichiers multimédias du tableur

Lorsqu’une ligne du tableur remplace un calque de média intégré, Bannerify traite le média selon le type de source :

• les URL directes .mp4, .webm ou .json restent des URL distantes dans les bannières HTML exportées ;
• les fichiers .mp4, .webm ou .json inclus dans un ZIP sont copiés dans le dossier de chaque bannière HTML exportée et référencés localement ;
• pour les exports basés sur canvas, comme les exports GIF, MP4, WebM, WebP animé et PNG animé, Bannerify lit l’URL du média distant ou le fichier multimédia du ZIP pendant le rendu, puis utilise cette source temporaire pour les images exportées.

Bannerify n’applique ces valeurs multimédias du tableur que pendant l’export. Il ne remplace pas durablement l’URL du média d’origine enregistrée sur votre calque Figma.

Conseils pratiques

• Gardez des en-têtes de tableur courts et descriptifs.
• Utilisez les cases à cocher des lignes pour exclure les lignes de brouillon au lieu de les supprimer.
• Utilisez une source ZIP pour regrouper un tableur avec des images locales ou des fichiers multimédias locaux .mp4, .webm ou .json.
• Utilisez des URL de médias directes lorsque vos fichiers .mp4, .webm ou .json sont déjà hébergés en ligne.
• Utilisez des calques avec remplissage d’image pour remplacer des fichiers GIF ; les variantes de médias intégrés prennent actuellement en charge .mp4, .webm et .json.
• Laissez le champ de nommage vide, sauf si vous avez besoin d’une structure de dossiers personnalisée.
• Testez d’abord un seul export si vous utilisez un nouveau modèle de nommage.