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.
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.