Seleccionar animaciones

Elige entre decenas de animaciones predefinidas basadas en fotogramas clave para las capas de tus banners.

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

Este vídeo muestra cómo animar y exportar en segundos banners HTML listos para producción desde Figma.

Animaciones ​

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

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

Usar animaciones Split Text. Bannerify también incluye un conjunto específico de animaciones que dividen el texto en caracteres, palabras y líneas para las capas de texto compatibles. Consulta Animaciones Split Text para ver los pasos de configuración, las fuentes compatibles y las limitaciones actuales.

Usar animaciones nativas de Figma Motion. Elige una animación detectada del grupo Figma Motion en una capa concreta, o elige Apply Each Layer's Figma Motion en el menú de entrada Batch Layer Actions. Cuando hayas aplicado Motion al menos a una capa, activa Mirror Figma Motion Timings encima de la línea de tiempo si también quieres los desfases de tiempo nativos de Figma. Consulta Usar animaciones de Figma Motion para ver todos los pasos de activación y las propiedades compatibles.

Quitar las animaciones de una capa. Si no quieres que una capa tenga animaciones, puedes seleccionar No Entry Animation o No Exit Animation (o ambas) o, como alternativa, cambiar el nombre de cualquier capa de Figma con el prefijo locked- (por ejemplo, locked-RectangleBackground). Así también 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.

Añadir animaciones de entrada ​

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 de arriba. Desplázate por la lista de animaciones y haz clic en el nombre de una animación para aplicarla a tu capa. Verás que la vista previa del banner se actualiza al instante con la nueva animación aplicada.

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 de arriba, haz clic en el selector de abajo 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; de lo contrario, ambas animaciones se solaparán y sus transiciones entrarán en conflicto al mismo tiempo.