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.

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.