Tutoriel vidéo : ajouter des animations personnalisées à vos bannières Figma

Cette vidéo montre comment ajouter des animations par keyframes personnalisées à vos bannières avec le plugin Bannerify.

Ouvrir le panneau des animations personnalisées

Pour ouvrir le panneau des animations personnalisées, cliquez sur le bouton Custom Animations dans l’en-tête principal de Bannerify. Le panneau des animations personnalisées s’ouvre et vous pouvez commencer à ajouter votre propre animation par keyframes.

Créer des keyframes d’animation personnalisées

Lorsque vous ouvrez le panneau des animations, vous voyez 2 keyframes : la première (0 %) et la dernière (100 %). Elles sont ajoutées par défaut et ne peuvent pas être supprimées, car une animation par keyframes a besoin d’au moins une image de départ et d’une keyframe qui indique où elle se termine.

Sélectionner une keyframe à modifier

Vous pouvez passer instantanément d’une keyframe à l’autre en cliquant sur une keyframe de la piste Keyframes, en haut du panneau des animations personnalisées. Cliquer sur une keyframe vous permet de modifier les propriétés de cette keyframe précise.

Insérer de nouvelles keyframes

Pour ajouter une keyframe entre les points de début et de fin par défaut, saisissez son pourcentage (par exemple 50) dans le champ Add at, puis sélectionnez Add.

Chaque nouvelle keyframe que vous ajoutez est automatiquement créée avec les mêmes propriétés que la keyframe actuellement sélectionnée ; vous pouvez ainsi ajuster les propriétés à partir des keyframes que vous avez déjà ajoutées. La keyframe ajoutée est aussi sélectionnée automatiquement après que vous avez cliqué sur le bouton Add.

Modifier les propriétés des keyframes

Vous pouvez modifier 5 propriétés différentes pour chacune des keyframes de votre animation. Toute différence de propriétés entre vos keyframes est animée automatiquement. Par exemple, une échelle de 2x sur la keyframe 0 % et une échelle de 1x sur la keyframe 100 % créent automatiquement une animation de « rétrécissement ».

• La propriété X anime la position horizontale (gauche/droite) de votre élément, en pixels.
• La propriété Y anime la position verticale (haut/bas) de votre élément, en pixels.
• La propriété Opacity anime le pourcentage de transparence de votre élément.
• La propriété Rotate anime l’angle de rotation de votre élément, en degrés.
• La propriété Scale anime la taille de votre élément.

Utiliser des transformations X/Y relatives en pourcentage

Si vous préférez définir la position X/Y en pourcentage de l’élément animé, passez l’unité Position de px à % dans les propriétés de la keyframe : vous pourrez alors saisir des valeurs X/Y en pourcentage (au lieu de pixels).

Une valeur de transformation X/Y en pourcentage anime automatiquement l’élément auquel l’animation est appliquée en partant de sa position et en appliquant le pourcentage à sa taille. Par exemple, une transformation X de 10% sur une keyframe déplace de 10px un calque de 100px de large. La même animation, avec une transformation X de 10%, appliquée à un calque de 200px de large le déplace de 20px.

Séparer l’échelle en options X/Y

Si vous préférez définir l’échelle de chaque axe X/Y séparément, passez le mode Scale de Uniform à X / Y dans les propriétés de la keyframe : vous pourrez alors définir indépendamment les valeurs d’échelle horizontale et verticale de vos keyframes, au lieu de les mettre à l’échelle de façon identique pour un agrandissement ou une réduction uniforme.

Ce réglage est utile si vous devez animer la largeur ou la hauteur d’un calque sans modifier en même temps l’autre axe.

Utiliser l’aperçu en direct pour voir votre animation

Pour voir le rendu de votre animation selon les keyframes et les propriétés que vous avez modifiées, regardez la zone Live preview, à côté des propriétés des keyframes. Toutes les modifications apportées à vos keyframes, à leurs propriétés ou à l’easing s’affichent automatiquement dans l’aperçu en direct.

Vous pouvez ajuster la vitesse de lecture de l’aperçu en direct. Pour voir votre animation personnalisée à différentes vitesses, modifiez la vitesse de lecture de l’aperçu en direct en faisant glisser le curseur Duration, sous l’aperçu, afin de changer le nombre de secondes que dure chaque boucle.

Copier-coller les propriétés des keyframes

Vous pouvez copier-coller les propriétés d’une keyframe vers une autre : sélectionnez d’abord la keyframe dont vous voulez copier les propriétés, cliquez sur le bouton Copy, sélectionnez la keyframe sur laquelle vous voulez les coller, puis cliquez sur le bouton Paste pour coller les propriétés copiées sur la keyframe sélectionnée. Vous pouvez aussi faire un clic droit sur une keyframe et choisir Copy Properties ou Paste Properties.

Les propriétés copiées ne restent disponibles que jusqu’à la fermeture du panneau. Tant que le panneau des animations personnalisées est ouvert, vous pouvez copier et coller des propriétés depuis et vers n’importe quelle keyframe de vos animations. Une fois le panneau des animations personnalisées fermé, les propriétés copiées ne peuvent plus être collées.

Supprimer des keyframes

Pour supprimer une keyframe, cliquez sur n’importe quelle keyframe de la piste Keyframes pour la sélectionner, puis cliquez sur le bouton Delete (ou faites un clic droit sur la keyframe et choisissez Delete Keyframe) pour la supprimer de la timeline. Notez que vous ne pouvez pas supprimer les keyframes 0% et 100%, car ce sont des keyframes par défaut indispensables à la timeline de votre animation.

Après la suppression d’une keyframe, la keyframe 0% est automatiquement resélectionnée comme keyframe active à modifier.

Supprimer une keyframe d’animation la supprime définitivement. Lorsque vous supprimez l’une de vos keyframes, elle est définitivement retirée de votre timeline et vous ne pourrez pas annuler la suppression. Vous pouvez toutefois copier (Copy) les propriétés d’une keyframe, la supprimer, puis coller ces propriétés dans une autre keyframe tant que vous modifiez encore la timeline de votre animation.

Définir l’easing de l’animation

Vous pouvez choisir le type d’easing de votre animation en sélectionnant une option dans le menu Easing. L’easing s’applique automatiquement à toute votre timeline et met à jour la zone Live preview, pour que vous voyiez comment l’easing choisi modifie le mouvement de votre animation par keyframes.

Vous pouvez choisir parmi les options d’easing suivantes :

• Ease (par défaut)
• Ease out
• Ease in
• In and out
• Linear
• Gentle
• Overshoot
• Anticipate

Définir une valeur d’easing Cubic Bezier personnalisée

Tutoriel vidéo : ajouter un easing cubic-bezier aux animations de bannières dans Figma

Cette vidéo montre comment ajouter un easing cubic-bezier personnalisé aux animations de bannières dans Figma avec le plugin Bannerify.

Pour utiliser votre propre courbe, faites glisser les poignées de la courbe dans le menu Easing, ou collez une valeur CSS cubic-bezier valide (par exemple cubic-bezier(0.65,0.05,0.36,1);) dans le champ situé sous les préréglages. Vous pouvez générer une courbe cubic-bezier personnalisée avec un site comme https://easings.co/, ou tout autre service en ligne de votre choix qui aide à générer des courbes CSS cubic-bezier.

Définir le point d’origine de l’animation

Par défaut, l’origine de toutes vos animations personnalisées est définie sur Center et Center pour les axes X/Y, mais vous pouvez la modifier en cliquant sur l’un des neuf points de la grille Origin point, qui combine Top, Center ou Bottom pour l’axe vertical avec Left, Center ou Right pour l’axe horizontal.

Modifier l’origine de l’animation change l’endroit où l’animation est « épinglée » sur le calque. Par exemple, si vous définissez l’origine sur Top et Left, ce point devient celui autour duquel pivote une animation de rotation, ou celui à partir duquel et vers lequel votre calque peut être agrandi ou réduit.

Enregistrer votre nouvelle animation personnalisée

Pour enregistrer votre nouvelle animation, donnez-lui un nom dans le champ de texte Animation name, puis cliquez sur le bouton Add New Animation.

Les animations personnalisées ne sont enregistrées et disponibles que dans le fichier Figma actuel. Une animation enregistrée est disponible sur toutes les pages de votre fichier Figma actuel. En revanche, vos animations enregistrées n’apparaîtront pas si vous lancez Bannerify dans un tout autre fichier Figma ou dans un nouveau fichier, car elles sont enregistrées directement dans le fichier Figma et ne peuvent pas être transférées vers un autre fichier. Vous devrez recréer vos animations dans chaque nouveau fichier Figma. Vous pouvez aussi créer une nouvelle page dans le fichier Figma actuel, où vos animations personnalisées enregistrées dans ce fichier resteront disponibles.

Utiliser vos animations personnalisées enregistrées

Dès que vous avez enregistré au moins une animation personnalisée, vous pouvez l’utiliser dans vos bannières en cliquant sur les listes déroulantes des animations d’entrée et des animations de sortie dans la timeline de vos calques : un nouveau groupe d’options, Custom Animations, y affiche toutes les animations personnalisées que vous avez enregistrées.

Appliquer en masse des animations personnalisées. Comme pour les autres animations prédéfinies, vous pouvez appliquer en masse votre animation personnalisée avec la fonctionnalité d’application en masse.

Mettre à jour vos animations enregistrées

Pour mettre à jour une animation personnalisée enregistrée, choisissez-la dans le menu Saved animations : l’animation enregistrée et ses keyframes se chargent dans le panneau des animations personnalisées.

Une fois l’animation enregistrée choisie, modifiez vos keyframes et leurs propriétés selon vos besoins. Lorsque les modifications vous conviennent, cliquez sur le bouton Update Saved Animation pour les enregistrer et remplacer les keyframes précédentes de l’animation.

Notez que la mise à jour d’une animation enregistrée applique automatiquement les keyframes modifiées à tous les calques de vos bannières qui utilisaient déjà cette animation personnalisée.

Créer une nouvelle animation à partir d’une animation enregistrée. Pour charger une animation enregistrée et la modifier sans « remplacer » la version enregistrée, créez une nouvelle animation à partir de celle-ci : saisissez un nouveau nom dans Animation name et cliquez sur le bouton Add New Animation.

Supprimer vos animations enregistrées

Pour supprimer une animation, sélectionnez une option sous Saved animations pour charger l’animation, puis cliquez sur le bouton Delete Saved Animation pour supprimer votre animation enregistrée.

Supprimer une animation enregistrée la supprime définitivement et la retire de vos calques. Lorsque vous supprimez l’une de vos animations enregistrées, elle est définitivement retirée de la liste Saved animations. Tous les calques de vos bannières qui utilisaient l’animation personnalisée supprimée reviennent à l’état sans animation.