Tutoriel vidéo : animer et exporter des 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.
Sélectionner des animations
Bannerify propose des dizaines d’animations prédéfinies à base de keyframes, réparties en 5 catégories :
- Entrances
- Exits
- Basic Transforms
- Attention Seekers
- Background Pans
Pour définir une animation d’entrée, survolez le calque à animer dans la timeline de Bannerify et cliquez sur la liste déroulante du haut. Parcourez 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.
Retirer les animations d’un calque. Si vous ne voulez aucune animation sur un calque, sélectionnez No Entry Animation et/ou No Exit Animation, ou renommez le calque Figma avec le préfixe locked- (par exemple locked-RectangleBackground). Aucune animation ne sera alors ajoutée, et la liste déroulante des animations sera aussi désactivée dans la timeline du plugin.
Prévisualiser les animations de vos bannières dans la timeline
Pour prévisualiser les animations de vos bannières, cliquez sur le bouton d’icône Play, et mettez la timeline en pause à tout moment avec le bouton d’icône Pause. Vous pouvez aussi relancer la lecture depuis le début avec le bouton d’icône Restart.
Cliquez sur la règle temporelle au-dessus des bannières, ou faites-la glisser, pour parcourir l’animation. La tête de lecture commune reste alignée avec les pistes de timing de toutes les bannières. Vous pouvez aussi parcourir l’animation depuis l’en-tête d’une bannière, partout où sa règle est affichée.
Utilisez +, −, le curseur de zoom ou un pincement à deux doigts sur le trackpad au-dessus de la règle ou des pistes de timing pour zoomer de 100 % à 1000 %. Une fois zoomé, faites glisser la poignée bleue arrondie de la barre de défilement sous la règle pour vous déplacer vers la gauche ou la droite. Cliquez sur Fit pour afficher de nouveau toute la timeline. Ces commandes modifient l’affichage sans changer les timings des animations ni la durée de l’export. Consultez zoomer et faire défiler la timeline pour toutes les commandes de navigation.
Pour une modification plus précise, utilisez le magnétisme, les filtres de calques, les repères et les séquences de mouvement réutilisables, ou lisez en boucle une zone de travail pendant que vous ajustez une transition.
Timeline Settings
Cliquez sur Timeline Settings dans l’en-tête. Le panneau s’ouvre sur General et comporte quatre onglets :
| Onglet | Commandes |
|---|---|
| General | Durée de la timeline, Magic Delays et Magic Speeds |
| Timeline Tools | Lire en boucle une plage d’aperçu et ajouter des repères nommés |
| Motion Sequences | Enregistrer et réutiliser des animations coordonnées |
| Sync Timings | Copier les timings entre formats de bannière |
Snap, le filtre de calques, Zoom To Selection et les commandes de réduction des groupes se trouvent dans Timeline Settings → Timeline Tools.
Revoir et restaurer les modifications
Cliquez sur History, à côté des flèches Annuler/Rétablir, pour parcourir les modifications de votre timeline. Choisissez une étape pour revenir en arrière ou avancer ; Current indique l’état actif. Toute nouvelle modification effectuée après un retour en arrière remplace la suite de l’historique.
Ajuster la durée de la timeline
Ouvrez Timeline Settings → General, choisissez une durée sous Total Timeline Length, puis cliquez sur Update Timeline Length. Les durées disponibles vont de 1 seconde à 3 minutes. La modification s’applique à toutes vos bannières ; les plages de timing qui dépassent une timeline plus courte sont ajustées pour y tenir.
Vous pouvez restaurer la durée et les timings précédents avec Undo, ou choisir une étape antérieure dans History. Consultez ajuster la durée de la timeline.
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 déroulante du haut, cliquez sur la liste déroulante 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 chevaucheront et leurs transitions entreront en conflit.
Ajuster la vitesse et le timing des animations
Pour ajuster la vitesse et le délai de vos animations, cliquez sur le bord gauche ou droit de la barre de timeline de votre calque, puis maintenez le bouton enfoncé et faites glisser la souris pour modifier la durée de l’animation et son point de début ou de fin.
Pour déplacer votre animation sur la timeline, cliquez au milieu de la barre de timeline de votre calque, puis maintenez le bouton enfoncé et faites glisser la souris vers la gauche ou la droite pour changer sa position dans la timeline.
Saisissez des valeurs de timing précises au clavier. Si vous préférez ne pas utiliser la barre de timing, vous pouvez aussi définir la vitesse et le délai en cliquant sur la deuxième valeur de votre calque dans la timeline et en saisissant un nouveau nombre au clavier (par exemple 1.5) pour définir le nombre de secondes.
Animations en boucle
Si un calque porte une animation que vous voulez répéter à l’infini (même après la fin de la timeline de la bannière), activez l’interrupteur Loop à côté de l’animation sélectionnée. C’est pratique pour les animations très courtes qui se prêtent à une lecture en boucle (par exemple « Heartbeat », « Flicker » ou « Pulse »).
Copier-coller des animations
Vous pouvez copier rapidement une animation d’un calque de la timeline à un autre avec les boutons Copy et Paste. Cliquez sur le bouton Copy pour copier l’animation, puis cliquez sur le bouton Paste de n’importe quel autre calque pour la coller.
Coller une animation copiée sur plusieurs calques. Vous pouvez aussi appliquer en masse l’animation copiée à plusieurs calques avec la fonctionnalité d’application en masse.
Appliquer des animations en masse
Pour appliquer rapidement une animation à plusieurs calques en même temps, sélectionnez des calques à l’aide des cases à cocher situées à côté de chaque nom de calque (ou utilisez la fonctionnalité Quick Select Layers), puis définissez votre animation dans la zone qui s’ouvre en bas de la fenêtre du plugin. Lorsque l’animation vous convient, cliquez sur le bouton Apply Animations to Selected Layers pour appliquer la nouvelle animation à tous les calques sélectionnés.
Sélectionner rapidement des calques similaires
Si vous travaillez sur un jeu de bannières qui contiennent les mêmes éléments ou calques, vous pouvez utiliser le menu Quick Select Layers dans l’en-tête de Bannerify pour sélectionner automatiquement les calques similaires dans toutes vos bannières. C’est une excellente alternative au cochage manuel de chaque calque.
Exemple d’utilisation de Quick Select Layers. Par exemple, si toutes vos bannières contiennent un calque nommé CTA Button, cliquez sur cette option pour cocher automatiquement tous les calques CTA Button. Vous pourrez ensuite appliquer en masse des animations à ce calque dans toutes vos bannières en même temps.
Utiliser les délais et vitesses automatiques
Ouvrez Timeline Settings → General et choisissez une valeur sous Magic Delays ou Magic Speeds. Cliquez sur Apply To All Entry Animations ou Apply To All Exit Animations pour l’appliquer à toutes vos bannières.
Magic Delays
Choisissez un délai échelonné de 0,1 à 0,5 seconde. Les calques reçoivent des décalages de délai successifs tout en conservant la durée de leurs animations.
Magic Speeds
Choisissez une durée de 0,1 à 1 seconde. Les heures de début restent les mêmes, sauf si elles doivent être avancées pour tenir dans la timeline.
Chaque application constitue une étape de l’historique. Utilisez Undo, Redo ou le panneau History pour passer d’une modification à l’autre. Consultez Magic Delays et Magic Speeds.