---
url: "/es/bannerify/animation/animating-banners.md"
description: "Cuando hayas cargado tus frames de Figma en Bannerify, puedes aplicar animaciones a cualquier capa de tus banners con las funciones de línea de tiempo del plugin."
---

# Animar tus banners

> Cuando hayas cargado tus frames de Figma en Bannerify, puedes aplicar animaciones a cualquier capa de tus banners con las funciones de línea de tiempo del plugin.

### 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.
[Embedded media](https://www.youtube-nocookie.com/embed/-TA088FNulA)

## Seleccionar animaciones {#selecting-animations}

[Video](/assets/videos/bannerify/animation/select-animations.mp4)

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.

> **Tip:** **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 {#previewing-your-banner-animations-in-the-timeline}

[Video](/assets/videos/bannerify/animation/preview-banner.mp4)

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](/es/bannerify/animation/animation-speed-timing#zoom-and-scroll-the-timeline) 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](/es/bannerify/animation/animation-speed-timing#snap-and-organise-your-timeline), o [reproduce en bucle un área de trabajo](/es/bannerify/animation/previewing-animations#loop-a-work-area) mientras ajustas una transición.

## Timeline Settings {#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](/es/bannerify/animation/previewing-animations#loop-a-work-area) y [añadir marcadores con nombre](/es/bannerify/animation/animation-speed-timing#snap-and-organise-your-timeline) |
| **Motion Sequences** | [Guardar y reutilizar animaciones coordinadas](/es/bannerify/animation/animation-speed-timing#save-and-reuse-a-motion-sequence) |
| **Sync Timings** | [Copiar los tiempos entre tamaños de banner](/es/bannerify/animation/animation-speed-timing#synchronise-timings-across-banner-sizes) |

**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 {#review-and-restore-edits}

Haz clic en **History**, junto a las flechas de deshacer y rehacer, para [ver tus ediciones de la línea de tiempo](/es/bannerify/animation/undo-redo). 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 {#adjusting-the-timeline-length}

[Video](/assets/videos/bannerify/animation/adjusting-timeline.mp4)

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](/es/bannerify/animation/timeline-length).

## Añadir animaciones de salida {#adding-exit-animations}

[Video](/assets/videos/bannerify/animation/exit-animation.mp4)

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.

> **Note:** 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 {#adjusting-animation-speeds-and-timings}

[Video](/assets/videos/bannerify/animation/adjust-speed.mp4)

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.

> **Tip:** **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 {#looping-animations}

[Video](/assets/videos/bannerify/animation/loop-animation.mp4)

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 {#copy-pasting-animations}

[Video](/assets/videos/bannerify/animation/copy-paste.mp4)

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.

> **Tip:** **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](/es/bannerify/animation/animating-banners#applying-bulk-animations).

## Aplicar animaciones de forma masiva {#applying-bulk-animations}

[Video](/assets/videos/bannerify/animation/bulk-animations.mp4)

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 {#quick-selecting-similar-layers}

[Video](/assets/videos/bannerify/animation/quick-select.mp4)

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.

> **Tip:** **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 {#using-magic-delays-and-magic-speeds}

[Video](/assets/videos/bannerify/animation/magic-timeline.mp4)

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 {#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 {#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](/es/bannerify/animation/magic-delays-speeds).