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.

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

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.

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

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

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

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

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

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

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

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

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}

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

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

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

• 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