Suite logique de l’UX design et de l’UI design, animer ses maquettes est devenu essentiel pour tester son ergonomie auprès des utilisateurs. Animations de survol, scroll, changement de page : utilisez les animations pour rendre vos maquettes intuitives, interactives et réalistes. Découvrez dans cet article les bases de l’animation sur Figma et des exemples concrets sur un fichier Figma entièrement accessible pour vous permettre de créer pas à pas des animations qui donneront vie à votre maquette.
Animer ses maquettes sur Figma : les fondamentaux
Créer une interaction
Après avoir désigné vos maquettes, il est temps de passer à l’animation des différents éléments pour pouvoir naviguer sur votre prototype comme sur un véritable site web. Pour ce faire, rien de plus simple : dans Figma, cliquez sur Prototype situé tout en haut dans le bandeau à droite de l’interface. La mécanique est très similaire à celle d’Adobe XD. Une fois que vous avez cliqué sur Prototype, vous verrez que les éléments sur lesquels vous cliquerez ou passerez votre souris auront un contour bleu avec un petit rond à droite de la sélection.
Faites bien attention à mettre vos éléments dans des Frames. Si ce n’est pas le cas, le petit rond n’apparaîtra pas et il ne sera pas possible d’ajouter une interaction sur l’élément en question.
Passez votre souris sur ce rond et une croix apparaîtra. Maintenez votre clic sur ce rond et faîtes le glisser vers un autre élément, qu’il soit sur la même frame que l’élément sélectionné ou non, puis relâchez le clic. Un trait bleu liant les deux éléments apparaît : bien joué, vous avez créé votre première interaction !
Une fois que vous avez créé une interaction sur un élément, une petite fenêtre va s’ouvrir. C’est dans celle-ci que vous allez paramétrer vos interactions.
Paramétrer les interactions
Le premier champs (ici On click) désigne ce qui va causer l’interaction :
- On click / On tap : déclenchement au clic pour le desktop / au contact du doigt pour le mobile
- On drag : déclenchement en maintenant le clic et en déplaçant la souris vers la gauche ou la droite
- While hovering : déclenchement au survol
- While pressing : déclenchement en maintenant le clic
- Key/gamepad : déclenchement suite à l’entrée d’une certaine touche du clavier
- Mouse enter : déclenchement lorsque le curseur de la souris est sur l’élément
- Mouse leave : déclenchement lorsque le curseur de la souris n’est plus sur l’élément
- Mouse down : déclenchement lorsqu’on clique avec la souris sur l’élément
- Mouse up : déclenchement lorsqu’on lâche le clic (après avoir cliqué sur l’élément)
- After delay : déclenchement après une certaine durée choisie
Le deuxième champs (ici Change to) désigne le type d’interaction créée :
- Navigate to : pour naviguer vers une autre page
- Change to : pour échanger l’élément avec un autre tout en gardant la même page
- Open overlay : pour ouvrir un overlay à un endroit désiré
- Swap overlay : pour échanger l’élément avec un overlay
- Close overlay : pour fermer un overlay
- Back : pour naviguer vers l’écran précédent
- Scroll to : pour scroller vers un élément au-dessus ou en-dessous de celui qui est animé
- Open link : pour ouvrir une url
Le troisième champ (ici Variant2) désigne l’élément cible, celui qui est au bout de la flèche tracée précédemment pour créer l’interaction.
Créer une animation
La rubrique Animation vous permet de rendre vos interactions plus esthétiques à l’œil de vos utilisateurs. Avec Smart animate, vous pouvez par exemple ajouter un délai en millisecondes ainsi qu’un effet d’apparition pour que l’animation de l’interaction ne soit pas instantanée et brutale.
Attention, vos animations sont visibles uniquement via le mode Present de Figma. Pour y accéder, cliquez sur la petite flèche située à droite du bouton Share dans le bandeau noir où sont placés les outils. Une nouvelle fenêtre s’ouvrira et vous pourrez visionner votre maquette comme si elle était sur votre navigateur. Vous savez donc comment créer des interactions et visionner votre prototype interactif. Laissez-moi à présent vous parler des éléments indispensables à utiliser et connaître pour animer vos maquettes correctement : les overlays, les components ainsi que les variants.
Animer ses maquettes sur Figma : components, overlays et variants
Les components ou composants
Pour créer des maquettes facilement modifiables, il est impératif de faire appel aux components (ou composants). Certes, ils ne sont pas indispensables pour créer des interactions sur les différents éléments de votre maquette, mais ils ont toute leur légitimité pour n’importe quel élément récurrent.
Exemple : vous aviez décidé de créer un menu avec quatre premiers niveaux au début de votre projet. Cependant, après réflexion ou suite à une demande, vous décidez de rajouter une cinquième rubrique. Si vous avez créé un menu et que vous vous êtes contenté de le dupliquer sans le transformer en component, il faut alors changer tous les menus de vos maquettes un par un. Grâce aux components, vous pouvez effectuer des modifications sur le component principal et les autres menus issus de ce component, appelés instances, seront automatiquement modifiés. Pour créer un component, sélectionnez le ou les éléments souhaités puis cliquez sur les quatre petits losanges en haut dans la barre d’outils. Pour créer une instance d’un component, copiez collez simplement le component. Les components gardent toujours le logo composé de losanges, tandis que les instances sont représentées par un losange vide. Si vous souhaitez détacher une instance de son component pour y apporter des modifications propres, faîtes un clic droit sur l’instance puis cliquez sur Detach instance.
Les overlays
Les overlays sont des éléments pouvant être affichés au-dessus d’autres éléments. Toute frame peut devenir un overlay. Pour définir une frame cible comme overlay, créez une interaction entre deux éléments puis choisissez un type d’interaction entre Open overlay ou Swap overlay. Les overlay sont utiles pour créer des menus burger ou encore des menus paramètres sur mobile. Il est possible de les positionner où on le souhaite dans les options de l’Overlay en mettant son positionnement en Manual.
Ici, nous avons défini qu’en cliquant sur l’icône du menu burger, l’overlay Menu va s’ouvrir. En choisissant l’option Manual pour placer l’overlay, celui-ci va apparaître au même niveau que l’icône du menu burger en transparent. Vous pouvez déplacer cet overlay transparent pour indiquer où celui-ci va s’ouvrir sur la maquette, par rapport à l’icône du menu burger. Il vous suffira ensuite de placer votre component Header sur votre maquette pour voir le résultat.
Nouveauté 2020-2021, les variants ont révolutionné l’outil de prototypage déjà très apprécié par les designers. Les variants sont des composants interactifs, c’est-à-dire des components qui vont être regroupés et sur lesquels on va pouvoir mettre des animations. Vous pourrez ainsi facilement créer des sliders, des boutons, des checkbox, etc.
Pour créer un variant, commencez par créer un component avec les éléments souhaités. Ensuite, dans le bandeau des options à droite, cliquez sur le + à droite de Variants pour créer un variant. Ajoutez enfin les animations d’un variant à l’autre pour créer l’animation voulue.
Les variants sont très pratiques car ils vous permettent de simplifier vos créations : vous pouvez par exemple créer des variants à la place d’overlays et donc avoir moins de frames sur votre espace de travail.
Vous êtes à présent fin prêts à créer des interactions pour vos prototypes ! Néanmoins, si vous n’êtes pas sûrs de savoir comment faire, nous avons réalisé pour vous un Figma avec 10 animations et interactions que vous pouvez librement utiliser. Ces interactions ont été créées avec tous les éléments expliqués plus hauts. Vous trouverez dans ce Figma :
- Menu desktop et menu burger
- Barre et icône de chargement
- Switch et checkbox
- CTA
- Slider
- Navigation entre différentes pages
- Scroll
- Tap bar
- swipe
- Actions en plusieurs étapes
Article rédigé par Laura Fernandes-Vidal