Choisir des animations

Choisissez parmi des dizaines d’animations prédéfinies à base de keyframes pour les calques de vos bannières.

Tutoriel vidéo : animez et exportez vos bannières en HTML depuis Figma

Cette vidéo montre comment animer et exporter en quelques secondes des bannières HTML prêtes pour la production depuis Figma.

Animations ​

Bannerify propose des dizaines d’animations prédéfinies à base de keyframes, réparties en 5 catégories :

  • Entrées (Entrances)
  • Sorties (Exits)
  • Transformations de base (Basic Transforms)
  • Effets d’accroche (Attention Seekers)
  • Panoramiques d’arrière-plan (Background Pans)

Utiliser les animations Split Text. Bannerify inclut aussi un ensemble dédié d’animations par caractère, par mot et par ligne pour les calques de texte compatibles. Consultez Animations Split Text pour la configuration, les polices compatibles et les limites actuelles.

Utiliser les animations natives Figma Motion. Choisissez une animation détectée dans le groupe Figma Motion d’un calque, ou choisissez Apply Each Layer's Figma Motion dans le menu d’entrée Batch Layer Actions. Une fois Motion appliqué à au moins un calque, activez Mirror Figma Motion Timings au-dessus de la timeline si vous souhaitez aussi reprendre les décalages de timing natifs de Figma. Consultez Utiliser les animations Figma Motion pour la procédure d’activation complète et les propriétés prises en charge.

Retirer les animations d’un calque. Si vous ne voulez aucune animation sur un calque, vous pouvez choisir No Entry Animation et/ou No Exit Animation, ou renommer le calque Figma avec le préfixe locked- (par exemple locked-RectangleBackground). Aucune animation n’est alors ajoutée, et la liste de sélection des animations est également désactivée dans la timeline du plugin.

Ajouter des animations d’entrée ​

Pour définir une animation d’entrée, survolez le calque à animer dans la timeline de Bannerify et cliquez sur la liste de sélection du haut. Faites défiler la liste des animations et cliquez sur le nom d’une animation pour l’appliquer à votre calque. L’aperçu de la bannière se met à jour instantanément avec la nouvelle animation.

Ajouter des animations de sortie ​

Les animations de sortie s’ajoutent de la même façon que les animations d’entrée : au lieu de cliquer sur la liste de sélection du haut, cliquez sur la liste de sélection du bas pour choisir une animation de sortie pour votre calque.

Assurez-vous que toute animation de sortie définie sur un calque commence après la fin de l’animation d’entrée. Sinon, les deux animations se chevauchent et leurs transitions entrent en conflit.