Tutorial en vídeo: Añade animaciones Split Text a tus banners de Figma
Este vídeo muestra cómo añadir animaciones Split Text (por carácter, palabra o línea) a banners de Figma con el plugin Bannerify.
Usar animaciones Split Text
Bannerify incluye un conjunto específico de animaciones Split Text para capas de texto. Te permiten animar el texto por caracteres, palabras o líneas, en lugar de mover toda la capa como un solo bloque.
Para aplicar una:
- Añade una capa de texto normal de Figma a tu banner.
- Carga la capa en la línea de tiempo de Bannerify.
- Haz clic en el selector de animación de entrada o de salida de esa capa de texto.
- Abre el grupo Split Text (GSAP Only).
- Elige la animación Split Text que quieras.
- Previsualiza el resultado en Bannerify y ajusta los tiempos si hace falta.
Para obtener el resultado final más limpio, usa la exportación HTML / GSAP cuando quieras el runtime específico de Split Text de Bannerify.
Combinar entrada y salida
Puedes usar Split Text en la animación de entrada, en la animación de salida o en ambas.
- Las animaciones Split Text de entrada y de salida aparecen en el mismo orden en los selectores para que sea fácil emparejarlas.
- Las etiquetas de salida son simétricas siempre que es posible, como Type On / Type Off, Rise / Fall y Reveal / Conceal.
- Para obtener los mejores resultados, asegúrate de que la animación de salida empiece después de que termine la de entrada.
Capas de texto compatibles
Split Text solo está disponible cuando la capa seleccionada se puede preparar de forma segura como texto HTML enriquecido.
Tu capa de texto debe:
- ser una capa de texto normal
- usar una fuente web segura, una Google Font o una fuente personalizada con una URL directa a un archivo .woff / .woff2 añadida en el panel de fuentes personalizadas de Bannerify
- no tener enlaces de texto en línea
- no tener formato de lista
- no tener anulaciones de formato de texto
- no usar el modo de texto desplazable de Bannerify
Si más adelante vuelves a cambiar una capa compatible a una fuente o una configuración de texto no compatibles, Bannerify mantendrá en la capa la animación Split Text seleccionada, pero la marcará como no disponible hasta que la capa vuelva a cumplir los requisitos.
URL de fuentes personalizadas
Si tu capa de texto usa una fuente de marca personalizada que no está disponible como fuente web segura ni como Google Font, añade una URL directa a un archivo de fuente .woff o .woff2 en el panel de fuentes personalizadas de Bannerify.
La URL debe apuntar directamente al propio archivo de fuente, como https://example.com/fonts/client-font.woff2. En este campo no sirve una página normal de la fuente, una página de descarga, un archivo CSS ni un archivo ZIP.
Bannerify detecta los estilos de fuente personalizados que usan las capas Split Text y muestra cada estilo de fuente una sola vez, así que puedes pegar la URL de ese estilo en lugar de añadir la misma URL a cada capa de texto.
Para abrir el panel de fuentes personalizadas:
- Aplica una animación Split Text a la capa de texto con la fuente personalizada.
- Haz clic en Configure Fonts en el aviso que aparece debajo de la vista previa del banner, o pasa el ratón por encima de la capa de texto en la línea de tiempo y haz clic en Fonts.
- Pega la URL directa al archivo .woff o .woff2 de cada estilo de fuente de la lista.
- Haz clic en Done y vuelve a previsualizar o exportar.
Bannerify usa esas URL de fuentes para renderizar la vista previa de Split Text, las exportaciones de canvas/vídeo y las exportaciones HTML / GSAP. En las exportaciones HTML / GSAP, Bannerify también añade automáticamente la regla @font-face correspondiente.
Puedes elegir animaciones Split Text en capas con fuentes personalizadas antes de añadir la URL de la fuente. Bannerify mostrará un aviso debajo de la vista previa del banner hasta que añadas una URL válida a un archivo .woff o .woff2.
Si antes habías añadido una URL de fuente personalizada para Split Text directamente en una capa de texto, Bannerify mueve automáticamente esa URL guardada al nuevo panel de fuentes personalizadas cuando lo abres.
Cuándo no está disponible Split Text
Bannerify bloquea Split Text en las capas en cualquiera de estas situaciones:
- la capa seleccionada no es una capa de texto
- la capa tiene una anulación de formato
- Scrollable Text está activado en esa capa
- el texto contiene enlaces en línea
- el texto tiene formato de lista
- Bannerify no puede preparar la capa de texto para la vista previa de Split Text
Cuando esto ocurre, Bannerify muestra el motivo directamente en la interfaz del plugin, en lugar de aplicar la animación sin avisar.
Si el único problema es una fuente personalizada sin una URL válida a un archivo .woff / .woff2, Bannerify te deja seleccionar la animación Split Text y muestra un aviso en lugar de ocultar la opción.
Aplicación en bloque, pegado y atajos del teclado numérico
Split Text sigue reglas más estrictas que las animaciones normales cuando lo aplicas a varias capas a la vez.
- Todas las capas seleccionadas deben ser capas de texto
- Todas las capas de texto seleccionadas deben cumplir ya los requisitos de Split Text, o solo necesitar una URL a un archivo de fuente personalizada .woff / .woff2
Esta regla se aplica a:
- Aplicar en bloque
- Copiar y pegar animaciones
- Aplicar con atajos del teclado numérico
Si una sola de las capas seleccionadas no es compatible, Bannerify bloquea esa acción de Split Text y muestra un aviso.
Notas sobre la vista previa y la exportación
Bannerify llama a este grupo Split Text (GSAP Only) porque las exportaciones HTML / GSAP usan el runtime específico de Split Text de Bannerify.
En las versiones actuales:
- la vista previa de Bannerify admite Split Text
- los métodos de exportación actuales que renderizan con canvas también pueden renderizar Split Text
- la exportación HTML / GSAP sigue siendo la mejor opción cuando quieres el resultado más fiel en animaciones de texto dividido
Para obtener los mejores resultados
- Usa Split Text sobre todo en titulares cortos, llamadas de atención o textos breves.
- Ten en cuenta los saltos de línea intencionados, porque las animaciones por líneas siguen el diseño del texto renderizado.
- Previsualiza la animación al tamaño final del banner antes de exportar.