Tutorial en vídeo: crea banners animados multiescena en Figma
Este vídeo muestra cómo crear banners animados multiescena en Figma (y exportarlos a HTML o vídeo) con el plugin Bannerify.
¿Qué son los banners multiescena?
Por defecto, Bannerify trata cada frame de Figma de nivel superior como un banner independiente.
Si activas Use Figma sections as multi-scene banners, Bannerify trata cada Figma Section como un único banner, y cada frame del mismo tamaño que haya dentro de esa sección como una escena distinta dentro de la misma línea de tiempo.
Es ideal cuando quieres encadenar varios estados o mensajes creativos en una sola exportación de banner.
Bannerify sigue el orden visual de las capas de los frames de Figma dentro de la sección, así que, si mueves los frames de las escenas en Figma, el orden de las escenas en Bannerify se actualizará cuando refresques y vuelvas a cargar los banners.
Configuración rápida
- Crea los frames de tus banners en Figma como siempre.
- Selecciona los frames que se convertirán en escenas de un mismo banner.
- Haz clic derecho y elige Wrap in new section.
- En Bannerify, haz clic en Refresh All Banners para volver a la pantalla de carga.
- Activa Use Figma sections as multi-scene banners.
- Haz clic en Load Checked Banners (o en Load All Banners).
Ahora deberías ver un banner por sección, con las capas agrupadas por escenas en la línea de tiempo.
Flujo de trabajo paso a paso
1. Ejecuta Bannerify
Abre Bannerify desde los plugins de Figma. Si lo usas a menudo, guárdalo en tu lista de Saved plugins para tenerlo siempre a mano.
2. Comprueba el comportamiento por defecto (opcional)
Antes de activar el modo de secciones, Bannerify carga los frames de nivel superior como banners independientes.
Esto te sirve para comprobar que tus frames de origen se detectan correctamente.
3. Envuelve los frames de las escenas en una sección
Selecciona todos los frames que quieres combinar en un banner multiescena y usa:
Right click -> Wrap in new section
En el modo de secciones, esa sección pasa a ser el contenedor de tu banner.
4. Vuelve a cargar y cambia al modo de secciones
Haz clic en Refresh All Banners en Bannerify y activa:
Use Figma sections as multi-scene banners
A partir de ahora, Bannerify buscará secciones en lugar de frames sueltos.
5. Carga los banners de las secciones
Haz clic en Load Checked Banners o en Load All Banners.
Ahora verás:
- Un banner por sección
- Las escenas agrupadas en la línea de tiempo (Scene 1, Scene 2, Scene 3, etc.)
- Etiquetas y controles de capa que tienen en cuenta las escenas
Si quieres que la escena 3 aparezca antes que la escena 2, o que la escena 1 pase al final, coloca los frames de las escenas en el orden visual de capas de Figma que quieras dentro de la sección y luego refresca y vuelve a cargar la sección en Bannerify.
6. Ajusta la duración de la línea de tiempo para encadenar las escenas
Si ahora mismo las escenas se solapan, aumenta la duración de la línea de tiempo (por ejemplo, de 5s a 15s) y haz clic en Update Timeline Length.
Después, ajusta los tiempos de las capas para que cada escena entre y salga en orden a lo largo de la línea de tiempo más larga.
Los cambios en la duración de la línea de tiempo se aplican al momento a la vista previa y a las exportaciones GIF y de vídeo, también en los banners multiescena. No hace falta volver a cargar los banners después de cambiar la duración.
Usa los controles de tiempo agrupados por escena para mover bloques de tiempo de una escena más rápido, en lugar de ajustar las capas una a una.
7. Previsualiza y exporta
Usa la reproducción de la vista previa para comprobar el orden y los tiempos de las escenas y, después, exporta lo que necesites:
- Exportación HTML para paquetes de código de anuncios o plataformas
- Exportación GIF para obtener una imagen animada
- Exportación MP4/Video para entregables en vídeo
Todas las escenas de una sección se exportan como una única secuencia de banner combinada.
Trabajar con varios tamaños y varias secciones
Puedes duplicar secciones para crear más tamaños o variantes de banner.
Al refrescar, Bannerify cargará cada sección como un banner independiente, cada uno con su propio conjunto de escenas. Así puedes exportar varios tamaños y variantes multiescena en un solo lote.
Requisito importante: los frames de las escenas deben tener las mismas dimensiones
Para que los frames se traten como escenas del mismo banner, deben tener exactamente las mismas dimensiones dentro de la sección.
Si un frame se diferencia aunque sea en 1 px, Bannerify puede dejarlo fuera del conjunto de escenas de esa sección.
Ejemplo: si dos frames miden 269x250 y otro mide 268x250, Bannerify puede cargar como escenas solo los frames que coinciden en tamaño.
Si te pasa esto:
- Haz que todos los frames de escena de la sección tengan exactamente el mismo ancho y alto.
- Refresca los banners.
- Vuelve a cargar el banner de la sección.
Lista de comprobación para solucionar problemas
- Solo se cargan algunas escenas: comprueba que todos los frames de la sección tienen las mismas dimensiones.
- Los cambios en la sección no aparecen: haz clic en Refresh All Banners y vuelve a cargar.
- El orden de las escenas no es el correcto: reordena los frames dentro de la sección de Figma, haz clic en Refresh All Banners y vuelve a cargar.
- Las escenas se solapan demasiado: aumenta la duración de la línea de tiempo y redistribuye los tiempos.
- La exportación no se parece a la vista previa: vuelve a revisar los tiempos de las capas y el orden de las escenas después de cambiar la línea de tiempo.
Resumen
Usar secciones de Figma con Bannerify es la forma más rápida de crear secuencias de banner más largas y narrativas sin tener que meterlo todo en un frame gigante.
Diseña cada escena como un frame normal, envuélvelas en una sección, activa el modo de secciones y luego anima y exporta todo como un único banner combinado.