Durant un projet de design, réaliser un prototype avec des micro interactions prend du temps. Par conséquent, elles sont parfois négligées voire mises de côté. Pourtant ces interactions sont au cœur de l’expérience utilisateur. Un prototype faiblement interactif peut biaiser les tests utilisateurs. Tandis qu’un prototype avec une animation de faible qualité ne sera pas convaincante aux yeux des clients.
Figma possède pourtant des fonctionnalités qui permettent de recréer facilement des transitions réalistes dans un prototype. Dans cet article, nous allons voir comment le mettre en œuvre. Nous allons utiliser pour cela des outils tels que : les auto layouts, les composants et leurs variants ainsi que le smart animate.
Ensemble nous allons essayer de refaire l’écran ci-dessous :
Mon objectif est de vous montrer comment créer des micro interactions qui viendront enrichir le réalisme de votre prototype facilement et rapidement. Dans ce but, nous allons prendre cet écran tout droit tiré du jeu mobile Two Dots. Les jeux sont d’excellents exemples tant leurs transitions sont fluides.
Commençons avec l’auto layout. Il s’agit d’une propriété qu’on ajoute aux éléments de l’interface. Cette propriété permet d’adapter les interfaces aux différentes tailles d’écrans ainsi qu’au contenu. Ici, nous allons l’utiliser pour déplacer nos éléments d’interfaces. Voir ici pour en savoir plus sur d’autres propriétés Figma .
Nous allons tout d’abord décomposer l’écran en sous parties. Il s’agit d’un écran contenant une boîte de dialogue au centre. Dans cette boîte de dialogue, on trouve une section avec le titre et les objectifs du jeu et une section sombre où se trouve deux boutons. Nous avons décomposé l’écran en partant de l’élément d’interface le plus grand jusqu’au plus petit. L’illustration ci-dessous vous donne une idée plus visuelle de la structure de cet écran :
Une fois votre décomposition faite, il va s’agir maintenant de composer l’écran. Cette fois, nous allons commencer par composer l’élément le plus petit jusqu’à l’élément le plus grand. Il faudra donc d’abord composer la boîte de dialogue pour la centrer sur votre écran.
Placez votre boîte de dialogue dans un auto layout de façon à pouvoir changer son alignement et donc la déplacer plus tard. Voici ci-dessous un petit test de déplacement de cette boîte de dialogue dans l’écran.
Un composant est un élément d’interface réutilisable à travers votre design. Par exemple, un bouton, une boîte de dialogue, un carrousel. Les variants, quant à eux, sont des groupes de composants qui présentent des similarités. Ils peuvent avoir, par exemple, des variations de taille, de couleurs ou encore de texte. Ici, ce qui va nous intéresser avec les variants, c’est qu’ils vont nous permettre de produire les différentes étapes d’une animation.
Avant de créer vos variants, il vous faut un plan pour visualiser votre animation. Je vous conseille donc de faire un storyboard, sur papier cela va vous aider à identifier les différentes étapes de votre animation. Définissez d’abord votre étape initiale. Ensuite faites votre seconde étape en prenant en compte les éléments qui vont changer. Continuer comme ça jusqu’à obtenir toutes les étapes nécessaires de votre animation.
Maintenant, il va s’agir de designer ces étapes. Faites un composant avec l’écran que vous venez de créer. Dupliquez cet écran pour faire votre étape initiale et configurez-le selon le storyboard établi. Dupliquez votre écran pour faire le second et répéter cette opération jusqu’à avoir toutes vos étapes d’animation.
Regroupez enfin ces étapes en variants. Pour cela, sélectionnez les toutes, utilisez la création multiple de composants, et assemblez en variants. Votre composant contient les étapes de son animation.
Intéressons-nous maintenant au smart animate. Il s’agit d’un type d’animation avancée. Il met en correspondance des éléments d’interface du même nom entre deux écrans. Dans notre cas, nous allons les utiliser pour créer des animations entre nos étapes.
Voir ici pour en savoir plus.
Nous allons reprendre le storyboard et appliquer les effets souhaité en connectant vos variants entre eux.
Pour ma première transition, j’ai besoin que ma boîte de dialogue apparaisse du haut de l’écran, se place au centre avec un petit effet de rebond. Je vais donc avoir besoin que ma boîte de dialogue se trouve déjà dans mon état initial, en opacité 0 pour ne pas être visible, et en haut de l’écran. Pour déplacer en haut de l’écran, je vais changer l’alignement de l’auto layout comme nous avons vu dans la première partie. Enfin, je vais ajouter une interaction entre mes deux variants. Elle se déclenche après 2s et utilise une animation Smart Animate (pour déplacer la boîte de dialogue) “Ease in and out back” (pour l’effet de rebond).
Testez maintenant cette interaction en dupliquant l’étape initiale et en ajoutant un “Flow starting point”. Répétez enfin sur les autres. Vous avez maintenant un composant interactif avec des micro-interactions.
Comme vous avez pu le voir, Figma a réussi à centraliser tous les outils nécessaires à la création de prototypes en haute fidélité en incluant le design de micro-interactions.
Maintenant avec tous ces outils, il devient plus simple et plus rapide de réaliser un prototype de haute fidélité.
Vous débutez avec Figma ou vous voulez approfondir le sujet ? N’hésitez pas à nous contacter car nous mettons en place une formation complète qui vous aidera à maîtriser cet outil.
Nous envoyons une fois par mois nos nouveaux articles, tutoriaux et notre veille technologique
