---
url: "/fr/bannerify/design/variants.md"
description: "Exportez des variantes HTML, GIF, MP4, WebM, APNG, WebP, image ou PDF d’un jeu de bannières Figma à partir des lignes d’un CSV, XLSX ou ZIP."
---

# Créer des variantes de bannières à partir d’un tableur

> Exportez des variantes HTML, GIF, MP4, WebM, APNG, WebP, image ou PDF d’un jeu de bannières Figma à partir des lignes d’un CSV, XLSX ou ZIP.

### 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.
[Embedded media](https://www.youtube-nocookie.com/embed/EiVk0G0nEU4)

[Video](/assets/videos/bannerify/export/banner-spreadsheet-variants.mp4)

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 {#step-1-match-your-spreadsheet-headers-to-figma-layer-names}

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.

> **Tip:** 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 {#supported-spreadsheet-cell-values}

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 {#step-2-upload-your-csv-xlsx-or-zip-file}

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 {#step-3-enable-variants-and-choose-which-rows-to-export}

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 {#missing-fonts-and-export-fallback-behavior}

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 {#automatic-variant-folder-and-file-naming}

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 {#customizing-export-folder-and-file-names}

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 {#using-spreadsheet-header-placeholders}

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 {#using-bannerify-s-built-in-placeholders}

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}`

> **Tip:** 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 {#zip-structure-and-preview-page-behavior}

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 {#how-spreadsheet-media-files-are-packaged}

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 {#practical-tips}

- 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.