---
url: "/es/bannerify/design/variants.md"
description: "Exporta variantes HTML, GIF, MP4, WebM, APNG, WebP, de imagen o PDF desde un único conjunto de banners de Figma con filas de un CSV, XLSX o ZIP."
---

# Crear variantes de banners a partir de una hoja de cálculo

> Exporta variantes HTML, GIF, MP4, WebM, APNG, WebP, de imagen o PDF desde un único conjunto de banners de Figma con filas de un CSV, XLSX o ZIP.

### Tutorial en vídeo: exporta por lotes variantes de banners de Figma desde una hoja de cálculo

Este vídeo muestra cómo exportar por lotes variantes de banners de Figma desde una hoja de cálculo a HTML o a vídeo/GIF con el plugin Bannerify.
[Embedded media](https://www.youtube-nocookie.com/embed/EiVk0G0nEU4)

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

Bannerify puede convertir un conjunto de banners cargado en muchas variantes exportadas aplicando una fila de la hoja de cálculo cada vez durante la exportación. Bannerify no sincroniza la hoja de cálculo con tu archivo de Figma de forma permanente. En su lugar, usa las filas seleccionadas como datos temporales de exportación, genera cada variante del banner y luego empaqueta esos archivos en tu `.zip` final.

Las variantes de banners funcionan con:

- Exportaciones de banners HTML
- Exportaciones GIF, MP4, WebM, WebP animado y PNG animado
- Exportaciones estáticas JPG, PNG, WebP y PDF

## Paso 1: Haz coincidir los encabezados de la hoja de cálculo con los nombres de las capas de Figma {#step-1-match-your-spreadsheet-headers-to-figma-layer-names}

La primera fila de la hoja de cálculo debe contener los nombres de las capas que quieres que Bannerify sustituya durante la exportación.

Para las capas de texto, cambia el nombre de tus capas de texto de Figma para que coincidan exactamente con los encabezados de la hoja de cálculo.

Para las capas de imagen, cambia el nombre de tus capas de Figma con relleno de imagen para que coincidan exactamente con los encabezados de la hoja de cálculo y, en la celda, pon una URL de imagen, un valor `data:image/...` o una referencia a un recurso del ZIP.

Para las capas con contenido multimedia incrustado, cambia el nombre de la capa de Figma de destino (que no sea de texto) para que coincida exactamente con el encabezado de la hoja de cálculo y, en la celda, pon una URL directa a un `.mp4`, `.webm` o `.json`, o una referencia a un archivo `.mp4`, `.webm` o `.json` de un ZIP que hayas subido. Durante la exportación, Bannerify tratará los valores de vídeo como fuentes de vídeo incrustado y los valores `.json` como fuentes Lottie incrustadas.

Para sincronizar estilos, cambia el nombre de la capa de destino para que coincida exactamente con el encabezado de la hoja de cálculo y pon en la celda una cadena de declaraciones CSS válida, como `color:#ffffff; font-size:48px;` o `display:none;`.

Para controlar la visibilidad, también puedes poner `_hide` o `_show` en la celda correspondiente para ocultar o mostrar esa capa de Figma al exportar las variantes.

Aquí tienes un ejemplo sencillo:

| headline | cta | logo | badge |
| --- | --- | --- | --- |
| Compra ahora y paga después | Descarga la app | logo-1.png | display:none; |
| Divide tus pagos | Más información | logo-2.png | opacity:0.5; |
| Gasta con flexibilidad | Empieza ya | logo-3.png | background-color:#111111; color:#ffffff; |

Cada fila de datos se convierte en una variante del banner.

> **Tip:** Si subes un archivo `.zip` en lugar de un `.csv` o `.xlsx` normal, Bannerify usará el primer archivo de hoja de cálculo que encuentre dentro del ZIP y también podrá resolver por nombre de archivo o ruta relativa las imágenes y los archivos multimedia `.mp4`, `.webm` y `.json` incluidos en ese mismo ZIP.

## Valores de celda admitidos {#supported-spreadsheet-cell-values}

Actualmente, Bannerify aplica estos tipos de valores de la hoja de cálculo al exportar las variantes:

- Valores de texto sin formato para las capas de texto de Figma que coincidan
- Referencias de imagen para las capas con relleno de imagen que coincidan:
  URLs de imagen, valores `data:image/...` o referencias a archivos de imagen incluidos en un ZIP subido
- URLs directas a `.mp4`, `.webm` o `.json` para las capas con contenido multimedia incrustado que coincidan
- Referencias a archivos `.mp4`, `.webm` o `.json` incluidos en un ZIP subido para las capas con contenido multimedia incrustado que coincidan
- Cadenas de declaraciones CSS para las capas de destino de la sincronización que coincidan
- Comandos de visibilidad `_hide` y `_show` para las capas que coincidan

Si quieres controlar la visibilidad o el estilo desde la hoja de cálculo, usa valores CSS como `display:none;`, `opacity:0;`, `left:20px;` o `transform:translateX(40px);`.

Actualmente, Bannerify acepta estas propiedades CSS en los valores de la hoja de cálculo:

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

## Paso 2: Sube tu archivo CSV, XLSX o ZIP {#step-2-upload-your-csv-xlsx-or-zip-file}

Abre el panel **Variants** en Bannerify y sube un archivo `.csv`, `.xlsx` o `.zip` en la sección **Data Source**.

Cuando Bannerify lea el archivo, mostrará una vista previa de la hoja de cálculo activa en la parte izquierda del panel. Así puedes comprobar que los encabezados y los valores de las filas son correctos antes de exportar nada.

La tabla de vista previa resalta los valores de imagen con miniaturas, muestra los valores de vídeo como etiquetas `Video Embed` o `Video URL`, muestra los valores de declaraciones CSS como tokens de estilo y presenta los valores `_hide` / `_show` como comandos de visibilidad de capa, para que puedas detectar rápidamente las filas que no son de texto antes de exportar.

Si más adelante subes un archivo nuevo, Bannerify sustituirá la fuente de archivo actual por la más reciente.

## Paso 3: Activa las variantes y elige qué filas exportar {#step-3-enable-variants-and-choose-which-rows-to-export}

Cuando hayas cargado una hoja de cálculo, activa **Enable Banner Variants During Exports**.

Con las casillas de la tabla puedes elegir exactamente qué filas se exportan como variantes:

- Usa la casilla del encabezado de la tabla para seleccionar o deseleccionar todas las filas
- Usa la casilla de cada fila para incluir o excluir esa variante concreta
- Solo se usan las filas marcadas al exportar

Bannerify recuerda esa selección de filas para la fuente de hoja de cálculo guardada, así que, cuando vuelvas a abrir el plugin, las filas incluidas y excluidas seguirán igual.

## Fuentes que faltan y exportación alternativa {#missing-fonts-and-export-fallback-behavior}

Cuando las variantes están activadas, Bannerify comprueba si faltan fuentes en los banners seleccionados antes de exportar.

Si Bannerify encuentra capas con fuentes que faltan en Figma, te avisará en el panel Variants. En ese caso, Bannerify exporta los banners originales en lugar de intentar renderizar variantes de la hoja de cálculo que saldrían mal.

## Nombres automáticos de carpetas y archivos de las variantes {#automatic-variant-folder-and-file-naming}

Si dejas **Export Folder Structure Naming** en blanco, Bannerify pone nombre a cada variante exportada automáticamente.

Las reglas automáticas son:

1. Las exportaciones originales que se incluyen junto a las variantes de la hoja de cálculo se agrupan en `row-0` en las hojas pequeñas, o en `row-000` cuando el número total de filas requiere rellenar con ceros.
2. La ruta de la carpeta de la variante usa el valor `folder` de la hoja de cálculo, si existe.
3. Si no hay valor `folder`, Bannerify usa `row-1`, `row-2`, etc. en las hojas pequeñas, y rellena con ceros en los conjuntos más grandes, como `row-001`, `row-002`.
4. El nombre del archivo exportado usa el valor `name` de la hoja de cálculo, si existe.
5. Si no hay valor `name`, Bannerify mantiene el nombre original del banner de Figma en la exportación.

Así, con el campo de nombres en blanco, puedes obtener rutas como estas:

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

## Personalizar los nombres de carpetas y archivos de exportación {#customizing-export-folder-and-file-names}

Puedes sustituir los nombres automáticos escribiendo tu propia plantilla en **Export Folder Structure Naming**.

Usa una de estas formas:

- `name-only-template`
- `folder/name-template`

Todo lo que va antes de la última `/` se convierte en la ruta de la carpeta de la variante. Todo lo que va después se convierte en el nombre del archivo exportado.

Si solo escribes una plantilla de nombre, Bannerify usa el valor resultante como ruta del elemento exportado. En las exportaciones HTML, `#{Item_Name}` crea una carpeta como `summer-sale` con su `index.html` dentro. En las exportaciones de imagen o vídeo, crea un archivo como `summer-sale.png`, `summer-sale.gif` o `summer-sale.mp4`.

### Usar los encabezados de la hoja de cálculo como marcadores {#using-spreadsheet-header-placeholders}

Puedes usar cualquier encabezado de la hoja de cálculo como token dinámico escribiéndolo así:

- `#{headline}`
- `#{cta}`
- `#{campaign}`
- `#{product_name}`

Si el encabezado contiene espacios o signos de puntuación, Bannerify también admite la forma normalizada con guiones bajos. Por ejemplo, un encabezado llamado `CTA Label` se puede usar como `#{CTA Label}` o como `#{cta_label}`.

### Usar los marcadores integrados de Bannerify {#using-bannerify-s-built-in-placeholders}

Bannerify también admite algunos valores integrados:

- `#{row_number}` para el número de la fila actual, empezando por `1`
- `#{row_index}` para el índice de la fila empezando por cero
- `#{figma_name}` para el nombre del banner de Figma
- `#{figma_width}` para el ancho del banner
- `#{figma_height}` para el alto del banner
- `#{figma_size}` para el tamaño del banner, como `300x250`
- `#{source}` para el nombre de la fuente de la hoja de cálculo
- `#{source_slug}` para una versión del nombre de la fuente en formato slug
- `#{platform}` para la plataforma de exportación actual

Ejemplos:

- `#{campaign}/#{figma_size}_#{figma_name}`
- `#{row_number}_#{headline}`
- `exports/#{campaign}/#{figma_name}`
- `exports/#{row_number}_#{figma_size}`

> **Tip:** Si tienes encabezados en la hoja de cálculo que coinciden con nombres de tokens integrados, como `name` o `folder`, puedes hacer referencia explícita al valor original de la hoja de cálculo con `#{csv_name}` o `#{csv_folder}`.

## Estructura del ZIP y comportamiento de la página de vista previa {#zip-structure-and-preview-page-behavior}

Cuando las variantes están activadas, Bannerify exporta cada fila a su propia carpeta de variante dentro del archivo `.zip` final.

En las exportaciones HTML, el `index.html` de vista previa generado apunta automáticamente a la ruta exportada de cada banner de variante.

En las exportaciones basadas en canvas, como GIF, MP4, WebM, WebP animado, PNG animado y las exportaciones de imágenes estáticas, el `index.html` de vista previa también sigue las mismas reglas de nombres de carpetas y archivos de las variantes.

Así, tu página de vista previa se mantiene sincronizada con:

- las filas seleccionadas de la hoja de cálculo
- las plantillas personalizadas de nombres de carpetas y archivos
- las rutas automáticas alternativas basadas en `row`, `folder` o `name`

## Cómo se empaquetan los archivos multimedia de la hoja de cálculo {#how-spreadsheet-media-files-are-packaged}

Cuando una fila de la hoja de cálculo sustituye una capa con contenido multimedia incrustado, Bannerify trata ese contenido según el tipo de fuente:

- Las URLs directas a `.mp4`, `.webm` o `.json` se mantienen como URLs remotas en los banners HTML exportados
- Los archivos `.mp4`, `.webm` o `.json` incluidos en el ZIP se copian en la carpeta de cada banner HTML exportado y se referencian de forma local
- En las exportaciones basadas en canvas, como GIF, MP4, WebM, WebP animado y PNG animado, Bannerify lee la URL remota o el archivo multimedia del ZIP durante el renderizado y luego usa esa fuente multimedia temporal para los fotogramas exportados

Bannerify solo aplica esos valores multimedia de la hoja de cálculo durante la exportación. No sobrescribe de forma permanente la URL multimedia original guardada en tu capa de Figma.

## Consejos prácticos {#practical-tips}

- Usa encabezados cortos y descriptivos en la hoja de cálculo
- Usa las casillas de las filas para excluir las filas en borrador en lugar de borrarlas
- Usa una fuente ZIP cuando quieras empaquetar una hoja de cálculo con imágenes locales o con archivos multimedia `.mp4`, `.webm` o `.json` locales
- Usa URLs multimedia directas cuando tus archivos `.mp4`, `.webm` o `.json` ya estén alojados en internet
- Usa capas con relleno de imagen para sustituir archivos GIF; las variantes de contenido multimedia incrustado cubren actualmente `.mp4`, `.webm` y `.json`
- Deja el campo de nombres en blanco salvo que necesites una estructura de carpetas personalizada
- Haz primero una exportación de prueba si vas a usar una plantilla de nombres nueva