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.

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.

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

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

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 para elegir el formato correcto antes de exportar.

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

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

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

Añadir un borde negro de 1px a todos los 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

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

Definir cuántas veces se reproducen los 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

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

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.

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

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

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), 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

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

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 <p> tags instead of <svg>.

Mantener como imágenes las capas de texto que elijas

Con la opción de exportación como párrafo activada, las capas de texto bloqueadas en Figma mantienen su salida SVG/imagen en lugar de convertirse en texto HTML editable.

1. En Figma, bloquea cada capa de texto que deba seguir siendo una imagen. Bloquea la propia capa de texto, no solo el grupo o frame que la contiene.
2. Deja desbloqueadas las capas de texto que quieras editar en HTML.
3. Activa Export text as <p> tags instead of <svg> y vuelve a exportar.

Por ejemplo, deja desbloqueado un marcador para el nombre del concesionario y bloquea el texto que lo rodea. El marcador sigue siendo HTML editable, mientras que el texto bloqueado se queda en los recursos de imagen. Bloquear una capa no elimina su contenido del banner ni sirve como control de acceso a los archivos exportados. Al desbloquear una capa de texto, vuelve a poder exportarse como texto enriquecido en la siguiente exportación. Se siguen aplicando las condiciones y limitaciones de formato que ya existen para el texto.

Para usar fuentes de marca en el texto editable, consulta Añadir fuentes personalizadas al texto HTML editable.