Tutoriel vidéo : ajoutez des animations Split Text à vos bannières Figma

Cette vidéo montre comment ajouter des animations Split Text (par caractère, par mot ou par ligne) à vos bannières Figma avec le plugin Bannerify.

Utiliser les animations Split Text

Bannerify inclut un ensemble dédié d’animations Split Text pour les calques de texte. Elles animent le texte par caractères, par mots ou par lignes, au lieu de déplacer tout le calque d’un seul bloc.

Pour en appliquer une :

1. Ajoutez un calque de texte Figma classique à votre bannière.
2. Chargez le calque dans la timeline de Bannerify.
3. Cliquez sur la liste de sélection de l’animation d’entrée ou de sortie de ce calque de texte.
4. Ouvrez le groupe Split Text (GSAP Only).
5. Choisissez l’animation Split Text souhaitée.
6. Prévisualisez le résultat dans Bannerify et ajustez le timing si besoin.

Pour un résultat final le plus propre possible, utilisez l’export HTML / GSAP si vous voulez profiter du moteur Split Text dédié de Bannerify.

Associer entrée et sortie

Vous pouvez utiliser Split Text pour l’animation d’entrée, pour l’animation de sortie, ou pour les deux.

• Les animations Split Text d’entrée et de sortie apparaissent dans le même ordre dans les listes de sélection, pour les associer facilement.
• Les noms des animations de sortie reprennent ceux des entrées lorsque c’est possible, par exemple Type On / Type Off, Rise / Fall et Reveal / Conceal.
• Pour de meilleurs résultats, assurez-vous que l’animation de sortie commence après la fin de l’animation d’entrée.

Calques de texte compatibles

Split Text n’est disponible que si le calque sélectionné peut être converti sans risque en texte HTML enrichi.

Votre calque de texte doit :

• être un calque de texte classique ;
• utiliser une police web-safe, une Google Font ou une police personnalisée avec une URL .woff / .woff2 directe ajoutée dans le panneau des polices personnalisées de Bannerify ;
• ne contenir aucun lien dans le texte ;
• ne pas être mis en forme en liste ;
• ne pas avoir de remplacements de format de texte ;
• ne pas utiliser le mode de texte défilant de Bannerify.

Si vous repassez ensuite un calque compatible à une police ou une configuration de texte non prise en charge, Bannerify conserve l’animation Split Text choisie sur le calque, mais la signale comme indisponible jusqu’à ce que le calque redevienne compatible.

URL de polices personnalisées

Si votre calque de texte utilise une police de marque personnalisée qui n’est ni une police web-safe ni une Google Font, ajoutez l’URL directe d’un fichier de police .woff ou .woff2 dans le panneau des polices personnalisées de Bannerify.

L’URL doit pointer directement vers le fichier de police lui-même, par exemple https://example.com/fonts/client-font.woff2. Une page de présentation de la police, une page de téléchargement, un fichier CSS ou un fichier ZIP ne fonctionnent pas dans ce champ.

Bannerify détecte les styles de police personnalisés utilisés par les calques Split Text et affiche chaque style une seule fois : vous collez l’URL une fois par style de police, au lieu d’ajouter la même URL à chaque calque de texte.

Pour ouvrir le panneau des polices personnalisées :

1. Appliquez une animation Split Text au calque de texte qui utilise la police personnalisée.
2. Cliquez sur Configure Fonts dans l’avertissement sous l’aperçu de la bannière, ou survolez le calque de texte dans la timeline et cliquez sur Fonts.
3. Collez l’URL .woff ou .woff2 directe de chaque style de police listé.
4. Cliquez sur Done, puis relancez l’aperçu ou l’export.

Bannerify utilise ces URL de polices pour afficher l’aperçu Split Text, les exports canvas/vidéo et les exports HTML / GSAP. Pour les exports HTML / GSAP, Bannerify ajoute aussi automatiquement la règle @font-face correspondante.

Vous pouvez choisir des animations Split Text sur des calques en police personnalisée avant d’avoir ajouté l’URL de la police. Bannerify affiche alors un avertissement sous l’aperçu de la bannière jusqu’à ce qu’une URL .woff ou .woff2 valide soit ajoutée.

Si vous aviez déjà ajouté une URL de police Split Text personnalisée directement sur un calque de texte, Bannerify déplace automatiquement cette URL enregistrée dans le nouveau panneau des polices personnalisées lorsque vous l’ouvrez.

Quand Split Text est indisponible

Bannerify bloque Split Text sur un calque dans chacune de ces situations :

• le calque sélectionné n’est pas un calque de texte ;
• le calque a un remplacement de format ;
• Scrollable Text est activé sur ce calque ;
• le texte contient des liens ;
• le texte est mis en forme en liste ;
• Bannerify ne parvient pas à préparer le calque de texte pour l’aperçu Split Text.

Dans ce cas, Bannerify affiche la raison directement dans l’interface du plugin au lieu d’appliquer l’animation sans rien dire.

Si le seul problème est une police personnalisée sans URL .woff / .woff2 valide, Bannerify vous laisse choisir l’animation Split Text et affiche un avertissement au lieu de masquer l’option.

Application en masse, collage et raccourcis du pavé numérique

Split Text suit des règles plus strictes que les animations classiques lorsque vous l’appliquez à plusieurs calques à la fois.

• Chaque calque sélectionné doit être un calque de texte.
• Chaque calque de texte sélectionné doit déjà être compatible avec Split Text, ou n’avoir besoin que d’une URL de police personnalisée .woff / .woff2.

Cette règle s’applique :

• à l’application en masse ;
• au copier-coller d’animations ;
• aux actions d’application par raccourci du pavé numérique.

Si un seul des calques sélectionnés n’est pas compatible, Bannerify bloque l’action Split Text et affiche un avertissement.

Remarques sur l’aperçu et l’export

Bannerify nomme ce groupe Split Text (GSAP Only) parce que les exports HTML / GSAP utilisent le moteur Split Text dédié de Bannerify.

Dans les versions actuelles :

• l’aperçu de Bannerify prend en charge Split Text ;
• les exports actuels rendus via canvas peuvent aussi afficher Split Text ;
• l’export HTML / GSAP reste la meilleure option pour obtenir l’animation de texte découpé la plus fidèle.

Pour de meilleurs résultats

• Réservez surtout Split Text aux titres courts, aux accroches ou aux textes compacts.
• Tenez compte des retours à la ligne voulus, car les animations par ligne suivent la mise en page du texte affiché.
• Prévisualisez l’animation à la taille finale de la bannière avant d’exporter.