Tutorial en vídeo: anima y exporta banners a HTML desde Figma

En este vídeo verás cómo animar y exportar en segundos banners HTML listos para producción desde Figma.

Seleccionar animaciones

Bannerify incluye decenas de animaciones predefinidas basadas en fotogramas clave, agrupadas en 5 categorías:

• Entrances
• Exits
• Basic Transforms
• Attention Seekers
• Background Pans

Para definir una animación de entrada, pasa el ratón por encima de la capa que quieres animar en la línea de tiempo de Bannerify y haz clic en el selector superior. Recorre la lista de animaciones y haz clic en el nombre de una animación para aplicarla a la capa. Verás que la vista previa del banner se actualiza al instante con la nueva animación.

Quitar las animaciones de una capa. Si no quieres que una capa tenga animaciones, puedes seleccionar No Entry Animation y/o No Exit Animation. También puedes cambiar el nombre de cualquier capa de Figma con el prefijo locked- (por ejemplo, locked-RectangleBackground): así te aseguras de que no se añada ninguna animación y, además, se desactiva el selector de animaciones en la línea de tiempo del plugin.

Previsualizar las animaciones de tus banners en la línea de tiempo

Puedes previsualizar las animaciones de tus banners haciendo clic en el botón con el icono Play, y pausar la línea de tiempo en cualquier momento haciendo clic en el botón con el icono Pause. También puedes reiniciar la reproducción de la animación desde el principio haciendo clic en el botón con el icono Restart.

Haz clic o arrastra en la regla de tiempo que hay encima de los banners para recorrer la animación. El cabezal de reproducción compartido se mantiene alineado con las pistas de tiempo de todos los banners. También puedes recorrerla desde la cabecera de un banner siempre que se muestre su regla.

Usa +, −, el control deslizante de zoom o pellizca con dos dedos en el trackpad sobre la regla o las pistas de tiempo para hacer zoom del 100 % al 1000 %. Con el zoom ampliado, arrastra el tirador azul redondeado de la barra de desplazamiento, debajo de la regla, para moverte a la izquierda o a la derecha. Haz clic en Fit para volver a mostrar toda la línea de tiempo. Estos controles cambian la vista, pero no los tiempos de las animaciones ni la duración de la exportación. Consulta hacer zoom y desplazarte por la línea de tiempo para ver todos los controles de navegación.

Para editar con más precisión, usa el ajuste magnético, los filtros de capas, los marcadores y las secuencias de movimiento reutilizables, o reproduce en bucle un área de trabajo mientras ajustas una transición.

Timeline Settings

Haz clic en Timeline Settings en la cabecera. El panel se abre en General y tiene cuatro pestañas:

Pestaña	Controles
General	Duración de la línea de tiempo, Magic Delays y Magic Speeds
Timeline Tools	Reproducir en bucle un rango de vista previa y añadir marcadores con nombre
Motion Sequences	Guardar y reutilizar animaciones coordinadas
Sync Timings	Copiar los tiempos entre tamaños de banner

Snap, el filtro de capas, Zoom To Selection y los controles para plegar grupos están en Timeline Settings → Timeline Tools.

Revisar y recuperar ediciones

Haz clic en History, junto a las flechas de deshacer y rehacer, para ver tus ediciones de la línea de tiempo. Elige un paso para ir hacia atrás o hacia delante; Current indica el estado activo. Las nuevas ediciones que hagas después de retroceder sustituyen al historial posterior.

Ajustar la duración de la línea de tiempo

Abre Timeline Settings → General, elige una duración en Total Timeline Length y haz clic en Update Timeline Length. Las duraciones disponibles van de 1 segundo a 3 minutos. El cambio se aplica a todos tus banners; los rangos de tiempo que superen una línea de tiempo más corta se ajustan para que quepan.

Puedes recuperar la duración y los tiempos anteriores con Undo, o elegir un paso anterior en History. Consulta ajustar la duración de la línea de tiempo.

Añadir animaciones de salida

Las animaciones de salida se añaden igual que las de entrada; en lugar de hacer clic en el selector superior, haz clic en el selector inferior para elegir una animación de salida para tu capa.

Asegúrate de que cualquier animación de salida de una capa empiece después de que termine la animación de "entrada"; si no, las dos animaciones se solaparán y tendrán transiciones en conflicto al mismo tiempo.

Ajustar la velocidad y los tiempos de las animaciones

Puedes ajustar la velocidad y el retraso de tus animaciones haciendo clic en los bordes izquierdo o derecho de la barra de la línea de tiempo de tu capa y, después, manteniendo pulsado y arrastrando con el ratón para ajustar la duración de la animación y su punto de inicio o de fin.

Puedes cambiar la posición de tu animación en la línea de tiempo haciendo clic en el centro de la barra de la línea de tiempo de tu capa y, después, manteniendo pulsado y arrastrando con el ratón hacia la izquierda o la derecha para cambiar dónde se coloca en la línea de tiempo.

Usa el teclado para introducir tiempos exactos. Si prefieres no usar la barra de tiempo, también puedes definir la velocidad y el retraso haciendo clic en el segundo valor de la capa de la línea de tiempo y escribiendo un nuevo número con el teclado (por ejemplo, 1.5) para fijar los segundos.

Animaciones en bucle

Si tienes una animación en una capa concreta que quieres que se repita sin fin (incluso después de que termine la línea de tiempo del banner), puedes activar el interruptor Loop junto a la animación que has seleccionado. Es útil para animaciones muy cortas que se prestan a reproducirse en bucle (por ejemplo, "Heartbeat", "Flicker" o "Pulse").

Copiar y pegar animaciones

Puedes copiar rápidamente una animación de una capa de la línea de tiempo a otra con los botones Copy y Paste. Al hacer clic en el botón Copy, se copia la animación, que luego puedes pegar haciendo clic en el botón Paste de cualquier otra capa.

Pegar una animación copiada en varias capas También puedes aplicar la animación copiada a varias capas a la vez con la función de aplicación masiva.

Aplicar animaciones de forma masiva

Para aplicar rápidamente una animación a varias capas a la vez, selecciona algunas capas con las casillas que hay junto al nombre de cada capa (o usa la función Quick Select Layers) y define la animación en el área desplegable de la parte inferior de la ventana del plugin. Cuando estés conforme con la animación, haz clic en el botón Apply Animations to Selected Layers para aplicar la nueva animación a todas las capas seleccionadas.

Seleccionar rápidamente capas similares

Si trabajas con un conjunto de banners que contiene varios banners con los mismos elementos o capas, puedes usar el menú Quick Select Layers de la cabecera de Bannerify para seleccionar automáticamente las capas similares de todos tus banners. Es una gran alternativa a marcar cada capa a mano.

Ejemplo de uso de Quick Select Layers Por ejemplo, si todos tus banners contienen una capa llamada CTA Button, puedes hacer clic en esa opción para marcar automáticamente todas las capas CTA Button. Así podrás aplicar de forma masiva animaciones a esa capa en todos tus banners a la vez.

Usar los retrasos mágicos y las velocidades mágicas

Abre Timeline Settings → General y elige un valor en Magic Delays o Magic Speeds. Haz clic en Apply To All Entry Animations o Apply To All Exit Animations para aplicarlo a todos tus banners.

Magic Delays

Elige un retraso escalonado de 0,1 a 0,5 segundos. Las capas reciben retrasos sucesivos y conservan la duración de sus animaciones.

Magic Speeds

Elige una duración de 0,1 a 1 segundo. Los tiempos de inicio no cambian, salvo que haya que adelantarlos para que quepan en la línea de tiempo.

Cada aplicación es un paso del historial. Usa Undo, Redo o el panel History para moverte entre los cambios. Consulta Magic Delays y Magic Speeds.