---
url: "/es/bannerify/export/html.md"
description: "Cuando termines de animar tus capas en la línea de tiempo, puedes exportar tus banners como banners HTML animados."
---
# Exportar tus banners a HTML
> Cuando termines de animar tus capas en la línea de tiempo, puedes exportar tus banners como banners HTML animados.
### Tutorial en vídeo: exporta banners de Figma a HTML/GSAP
Este vídeo muestra cómo exportar en segundos banners animados listos para producción desde Figma a HTML/GreenSock (GSAP) con el plugin Bannerify.
[Embedded media](https://www.youtube-nocookie.com/embed/SS2J6k5Wo7s)
### Tutorial en vídeo: exporta banners HTML de Figma a varias plataformas publicitarias
Este vídeo muestra cómo exportar con un solo clic banners HTML animados desde Figma a varias plataformas publicitarias con el plugin Bannerify.
[Embedded media](https://www.youtube-nocookie.com/embed/Q16MPp9YKjg)
[Video](/assets/videos/bannerify/export/html-export.mp4)
## Exportar a HTML {#exporting-to-html}
Cuando estés contento con tus banners y quieras exportarlos a HTML, haz clic en el botón **Export to HTML** de la cabecera de Bannerify. Se abrirán los ajustes de exportación HTML.
Cuando hayas configurado todos los ajustes de exportación HTML, haz clic en el botón **Export _n_ Banners** de la parte inferior del panel de exportación para empezar a exportar tus banners de Figma a HTML.
Cuando Bannerify termine de procesar tus banners, verás un mensaje de confirmación. Puedes descargar el archivo `.zip` con los banners exportados haciendo clic en el botón **Download your .zip file**.
Los nombres de archivo de los banners exportados conservan letras como **Å, Ä, Ö, å, ä, ö** de los nombres de tus frames de Figma. Los nombres de las carpetas de exportación y el nombre del archivo ZIP principal también admiten letras acentuadas. Los separadores de ruta y los signos de puntuación no admitidos se siguen eliminando de los nombres de archivo de los frames.
Cuando hayas descargado el archivo `.zip` de Figma a tu ordenador, abre el explorador de archivos en la carpeta donde se guardó. **Haz doble clic** en el archivo `.zip` exportado para descomprimir su contenido y usar tus banners como quieras.
> **Note:** **Asegúrate de descomprimir primero el archivo `.zip` exportado** antes de usar los banners o subirlos a una plataforma publicitaria, porque el .zip exportado contiene todos los banners individuales (y la carpeta anidada `_zips`, donde cada banner ya está comprimido por separado y listo para subirlo a una plataforma publicitaria).
> **Warning:** **Los bloqueadores de anuncios del navegador pueden impedir que las vistas previas locales de los banners se reproduzcan correctamente.** Si un banner HTML exportado parece congelado, no se anima o se comporta de otra forma en la vista previa del navegador, desactiva temporalmente las extensiones de bloqueo de anuncios o de privacidad para el archivo de vista previa local, o pruébalo en otro navegador antes de volver a exportar.
Cada formato de salida HTML tiene sus propios requisitos de configuración y empaquetado. Usa la guía [Opciones de plataformas publicitarias](/es/bannerify/export/code-output) para elegir el formato correcto antes de exportar.
> **Tip:** **Guardar archivos descargados desde Figma** Si usas la **aplicación de escritorio** de Figma, verás un aviso para descargar el archivo. En cambio, si usas Figma en un **navegador web**, el archivo se descargará automáticamente en tu ordenador (normalmente en la carpeta **Descargas**).
> **Tip:** **Reutiliza tus ajustes de exportación en otros archivos de Figma:** con el panel de ajustes de Export to HTML abierto y activo, pulsa Ctrl + Shift + E para guardar tus preferencias de exportación actuales como `bannerify-export-settings.json`. En otro archivo de Figma, abre el mismo panel y pulsa Ctrl + Shift + I para buscar ese archivo JSON y aplicar sus preferencias a la página actual. Usa la tecla Control tanto en Windows como en Mac.
## Recorte automático de fotos con máscara {#automatic-cropping-of-masked-photos}
Las exportaciones HTML/CSS + GSAP estándar pueden eliminar automáticamente las áreas no utilizadas de fotos JPEG compatibles dentro de máscaras de movimiento rectangulares o redondeadas. Bannerify conserva toda el área necesaria durante las animaciones compatibles **Zoom Pan Left** y **Zoom Pan Right**, con un pequeño margen de seguridad. Las fotos estáticas y los fundidos también pueden beneficiarse. Las capas de Figma y las posiciones de la animación no cambian.
También se admiten Fade In/Out, Slide In/Out y Wipe In/Out direccionales, Instant Show/Hide y Scale Up/Down Center. Las animaciones de entrada y salida superpuestas que puedan combinar transformaciones conservan la imagen original.
Esta optimización es automática e independiente de la [compresión de imágenes y los objetivos de tamaño de archivo](/es/bannerify/export/banner-size-optimization). Solo sustituye una imagen si el archivo recortado es más pequeño. El ahorro depende de cuánto de la foto original permanece fuera de la máscara durante toda la animación.
Las animaciones no compatibles, el código personalizado inyectado, Figma Motion, las imágenes giradas o con efectos y otros formatos de exportación conservan las imágenes originales. Si el recorte falla, Bannerify también utiliza la imagen original para que la exportación pueda continuar.
Las variantes generadas desde una hoja de cálculo conservan sus imágenes originales para que cada fila mantenga la foto correcta. Los banners normales, incluido el banner maestro original, pueden seguir usando el recorte automático.
## Opciones estándar {#standard-options}
### Añadir un borde negro de 1px a todos los banners {#adding-a-1px-black-border-to-all-banners}
Si activas la opción de borde de 1px, se añadirá automáticamente un borde `1px solid black` al CSS de todos tus banners. Esto puede ser útil para las plataformas publicitarias que prefieren (o exigen) que tus banners tengan un borde negro de 1px.
### Añadir una animación de precarga a todos los banners {#adding-a-preloader-animations-to-all-banners}
Si activas la opción de precarga, se añadirá automáticamente un indicador de precarga al HTML de todos tus banners. Esta animación de carga se muestra hasta que todas las imágenes del banner se han cargado en el navegador.
## Opciones de reproducción {#playback-options}
### Definir cuántas veces se reproducen los banners {#setting-the-number-of-times-to-play-through-banners}
Con esta opción indicas cuántas veces quieres que se reproduzca de principio a fin la línea de tiempo de todos tus banners. El valor por defecto es **1**, es decir, tus banners reproducirán la línea de tiempo de la animación de principio a fin **una vez**.
Puedes cambiarlo escribiendo un número más alto en el campo numérico; por ejemplo, **6**. Así, la animación de la línea de tiempo de todos tus banners se reproducirá **seis veces** de principio a fin.
### Reproducir tus banners en bucle infinito {#infinitely-looping-your-banners}
Puedes hacer que la línea de tiempo de la animación se repita _para siempre_ en todos tus banners activando la opción **Infinitely loop all banners**.
## Incluir archivos .zip individuales para cada banner {#include-individual-zip-files-for-each-banner}
Si activas el interruptor **Include individual .zip files for each banner**, se añadirá una carpeta adicional llamada `_zips` al archivo exportado. La carpeta `_zips` contendrá un archivo zip individual para cada banner exportado. Esto es útil y te ahorra tiempo si tu plataforma publicitaria exige subir un archivo zip por banner.
> **Info:** **Incluir opcionalmente backup.jpg en los zips** Si quieres que la imagen `backup.jpg` se incluya dentro de cada zip, activa el interruptor **Add "backup.jpg" to individual zip files** y las imágenes `backup.jpg` se incluirán en tus zips individuales. Si este interruptor está desactivado mientras comprimes los banners por separado y _también_ has activado el interruptor **Add "backup.jpg"**, todas tus imágenes de respaldo se incluirán además en una carpeta `_backups` en la raíz del archivo `.zip` principal exportado por Bannerify.
## Elegir un formato de salida HTML {#choosing-an-html-output-format}
Bannerify puede exportar HTML neutro (sin plataforma específica), paquetes de subida específicos de cada plataforma, diseños responsive y varios formatos por lotes. Cada opción de **Code Output Settings** tiene su propia guía en [Opciones de plataformas publicitarias](/es/bannerify/export/code-output), con su configuración, la gestión de los clics, la estructura del paquete y notas para las pruebas.
## Incluir o excluir banners de la exportación {#including-or-excluding-banners-in-your-export}
Por defecto, todas las capas de nivel superior de tu archivo de Figma que se cargan en Bannerify como banners se incluyen en la exportación. Si quieres excluir algún banner (sin [volver a cargar los banners seleccionados](/es/bannerify/design/figma-frames#refreshing-or-re-loading-multiple-all-banners)), desactiva el interruptor **Include In Export** en la cabecera de la línea de tiempo de ese banner. Así se oculta la línea de tiempo de ese banner y se excluye de cualquier exportación.
## Exportaciones de código minificado {#minified-code-exports}
Para optimizar el tamaño de los archivos, Bannerify minifica por defecto todo el código que exporta y guarda un único archivo `.html` por banner. Si necesitas que el código sea más legible o esté dividido en archivos `.html`, `.css` y `.js` separados, desactiva el interruptor **Minified** en las opciones de exportación de código.
## Exportar el texto como etiquetas de párrafo en lugar de imágenes SVG {#export-text-as-paragraph-tags-instead-of-svg-images}
Por defecto, las capas de texto de la línea de tiempo de Bannerify se exportan como imágenes SVG (en etiquetas de imagen), pero, si quieres, puedes exportarlas como texto enriquecido (en etiquetas de párrafo) activando la opción **Export text as