Créer des prototypes efficaces dans Figma peut s’avérer complexe, entraînant des interactions peu fluides et des utilisateurs frustrés.
Sans une conception optimisée, les prototypes peuvent provoquer des retours négatifs, augmenter le temps de développement, et nuire à l’expérience utilisateur.
Cet article détaille comment utiliser Figma pour structurer vos prototypes, améliorer les transitions entre pages, et animer les composants afin de créer une navigation intuitive et fluide, garantissant ainsi une expérience utilisateur réussie.
Comprendre l'intérêt du prototypage avec Figma
Tout d’abord, un prototype design figma, pour les non connaisseurs, c’est une étape cruciale dans le processus de design prototype figma d’interface où l’on va donner vie à notre design. Cela englobe la conception de l’interface utilisateur (UI : User Interface), mais aussi l’expérience utilisateur (UX : User Experience).
Dans Figma, vous pouvez retrouver l’étape du Design et du Prototypage sur le côté droit de l’interface du logiciel comme ceci :
L’intérêt de créer un prototype design figma peut se résumer en quelques lignes :
- Créer une interaction sur le design de prototype figma pour améliorer l’expérience utilisateur
- Pouvoir passer d’une page à une autre facilement
- Ajouter des animations fluides
Exemple : Illustration du Prototypage
Ici pour passer à la page Alertes on va cliquer sur le bouton du footer où se trouve l’icône Alertes. Cela va déclencher une animation dont nous poserons la durée.
On peut aussi interagir avec les éléments du design comme ce bouton par exemple pour montrer qu’on a appuyé dessus.
Voilà tout l’intérêt du prototype design figma, dans la prochaine partie on va voir le fonctionnement du prototypage dans Figma.
Comprendre le fonctionnement du prototype dans Figma
Pour comprendre le fonctionnement du prototype design figma, nous allons basculer dans la partie prototype de Figma et commencer par :
Choisir l'appareil d'affichage dans le mode de présentation Figma
La première des choses qu’il faut vérifier c’est la dimension de l’appareil que l’on a choisi pour le mode présentation. Par exemple pour nos frames, on a choisi les dimensions de l’iPhone 13 mini donc normalement je choisis dans la partie prototype design figma l’iPhone 13 mini comme support de présentation.
Faites très bien attention à cela, car si vous choisissez un autre appareil, cela peut vous nuire lors de votre présentation.
Autre chose, pas très important dans la partie prototype design figma, c’est que vous avez la faculté de changer la couleur de fond de votre mode présentation.
Mais honnêtement, pour ma part j’ai toujours gardé celui en noir parce que ça me convient.
Placer les flows dans Figma
Deuxièmement, il faut savoir placer les flows. Mais c’est quoi d’abord les flows ? C’est juste les frames que vous allez choisir et qui vont s’afficher en premier. Par exemple, je sélectionne la page d’Accueil et je crée un flow.
Maintenant si je fais pareil avec la page Alertes lance le mode présentation, ça m’affiche directement la page d’Accueil et vous pouvez choisir de commencer par le Flow 1 ou 2 sur le côté gauche de l’écran.
Formation Figma UX/UI 3/4 : Maîtriser le design interactif
Transformez vos maquettes en expériences interactives captivantes et engageantes !
Faire des animations dans Figma
Remarquez qu’en mode prototype design figma, si vous avez cliqué sur un élément, il y a un bouton plus qui va s’afficher. Appuyez dessus et tirer le jusqu’à une autre page comme sur l’exemple suivante.
Cliquez ensuite sur la flèche bleue qui relie les deux éléments pour modifier les propriétés de l’animation.
Mettez-vous en mode présentation et appuyez sur le bouton Livraison pour voir ce qui se passe.
Essayez de créer deux autres animations partant du bouton Home du footer de la page Livraison avec la propriété suivante pour revenir à la page d’Accueil.
Et un autre allant du bouton Réception de la page d’Accueil vers la page Réception
Voyez le résultat dans le mode présentation.
Créer un scénario utilisateur dans Figma
Comme toute application, notre utilisateur va démarrer dans la page d’Accueil puis dedans avec les différents boutons il aura donc la possibilité de naviguer vers :
- La page Livraison
- La page Réception
- La page Étiqueteuse
- La page Mes Stock
- La page Ménage
- La page Température
Mais si vous vous souvenez, on a créé deux états pour ces boutons donc on va faire une petite animation passant par les deux états du bouton avant de se diriger vers la page pour enrichir l’expérience utilisateur.
Après on va ajouter une animation avec le footer, c’est-à-dire que chaque bouton du footer va nous diriger vers la page correspondante.
Pour les autres pages, sauf la page d’Accueil, leurs cas suivront ce schéma :
les pages Alertes, Historique et Réglage
Pour ces trois premières pages, il n’y aura pas d’interaction qu’on pourra ajouter
La page Chatbot
On va ajouter une petite animation pour les textes qui va s’afficher dans la page l’un après l’autre
La page Livraison
Rien d’exceptionnel
La page Réception
On va pouvoir interagir avec les boutons colis en affichant le deuxième état du bouton
Sans oublier aussi le bouton Ajouter.
La page Étiqueteuse
Va pouvoir être animé avec le clic sur le bouton étiqueteuse et le bouton impression
Pour les pages Mes Stocks, Ménage et Température
On va faire pareil que la page Réception. C’est-à-dire qu’il y aura une interaction avec les informations contenues dans la page et le bouton Ajouter
Voilà pour les différents scénarios possibles qu’on intègrera dans notre projet. On va tout de suite commencer cela dans la partie qui va suivre.
Figma Masterclass : UX/UI du Concept au Prototypage
Maîtrisez l'Art du Design Collaboratif avec Figma : Parcours d'Apprentissage Complet pour Créer, Collaborer et Innover Ensemble
Réaliser notre prototype Figma
Donc pour nos prototypes design figma, on va déjà commencer par les boutons de notre page d’Accueil qu’on reliera avec les autres pages. Comme tout à l’heure, appuyez sur le bouton plus à côté du bouton et tirer vers la page destinée. Puis ajouter une petite transition comme proposée sur l’image suivante.
On recommence la même procédure pour les autres pages en gardant les mêmes propriétés pour la transition.
Vous pouvez le tester dans le mode présentation pour voir le résultat.
À présent, toujours dans la page d’Accueil, on va relier les éléments du footer avec les pages correspondantes. Pour cela, on clique sur le petit plus à côté des icônes et on les porte vers la page.
Et on refait la même transition pour tout le reste.
Voyez ensuite le résultat des transitions qu’on a posé dans le mode présentation.
Pour la page Chatbot uniquement, on va dupliquer la page deux fois pour créer l’animation que nous voulions.
Puis on supprime quelques messages pour les deux pages pour avoir ceci :
Comme avec les éléments, on va relier les pages entre elles, mais la transition se fera à partir d’un certain délai.
Pour fermer le Chatbot, relier le bouton croix en haut de la troisième page avec la page d’Accueil pour nous rediriger vers celui-ci.
Pour les autres pages comme la page Alertes, Historique et Réglage, relier chaque bouton du footer avec la page correspondante comme on l’a fait avec celui de la page d’Accueil.
On a encore les pages Livraison, Réception, Étiqueteuse, Stock, Ménage et Température vous pouvez recommencer à reconnecter toutes les icônes avec les pages, mais pour ma part l’utilisateur va juste pouvoir switcher entre les pages qu’on a déjà définies au-dessus. Donc pour pouvoir revenir à la page d’Accueil depuis ces pages on va juste ajouter une transition comme ceci.
Ça sera donc tout pour le moment, il nous reste plus qu’à animer nos composants et c’est ce que nous allons faire juste après.
Animer les composants dans Figma
Répétez le processus avec le reste des pages.
Maintenant pour animer nos composants, nous allons revenir dans notre Design system et créer les animations directement dedans pour que ça s’applique sur les instances en commençant par les boutons de la page d’Accueil.
Pour cela, on va relier les deux variantes entre elles et on va activer l’animation avec le Touch down car si on clique dessus ça va directement nous emmener vers les autres pages.
Pour le tester, entrer en mode représentation et cliquer puis tirer vers le bas la souris.
Une fois que vous relâchez la souris, cela vous redirigera vers la page concernée.
Avec le reste des composants, on va procéder maintenant comme suit :
- Pour les boutons infos dans la page Réception, Mes Stocks, Ménage et Température
- Le bouton étiqueteuse
- Le bouton impression
- La barre de message
Par contre pour le bouton Ajouter il nous pose un petit problème, car si on changer le bouton par le deuxième état, tout est décalé d’un côté comme ceci :
Afin d’y remédier, créer un nouveau composant, mais cette fois-ci avec un rectangle pour délimiter le contour du composant comme ceci :
Puis masquer le rectangle pour avoir notre première variante en mettant son opacité à 0%.
Créer ensuite le composant avec component set.
Tester ensuite notre nouveau composant pour voir le résultat que ça donne.
Ajouter notre nouveau composant dans le design prototype design figma.
Pour finir, rajouter l’animation dans notre composant.
Tester notre prototype Figma
Il est maintenant temps de tester le fonctionnement de notre prototype design figma après avoir placé les animations sur les composants. Mettez-vous en mode présentation, pour que nous puissions voir notre application et le tester.
Donc la première chose qu’il faut régler, ça serait le flow de notre design qui en possède deux. On veut pourtant que l’utilisateur se connecte par la page d’Accueil donc on va supprimer le deuxième flow.
Puis en naviguant on remarque rapidement que le logo et le header et caché par la tête du modèle de notre téléphone.
Après pour les composants qu’on a animés, on constate qu’on peut déployer les boutons et voir leurs contenus, mais qu’on ne peut pas les fermer pour revenir en arrière.
Donc voilà pour le test de notre application, dans la suite nous allons rectifier ces erreurs pour pouvoir finaliser notre projet.
Ajuster les transitions dans Figma
Ce qu’il faut régler en premier lieu c’est bien évidemment les erreurs liées avec les composants. Rendez-vous dans le Design system puis faites une animation reverse pour tous les changements d’états que nous avons faits.
Après cela, on va sélectionner tous les logos de chaque page et les faire descendre pour ne pas être caché par la tête de notre appareil.
Voyer le résultat dans le mode présentation.
Faites le même avec les textes en guise de titre pour chaque page.
Puis ajuster le texte de bienvenue dans la page d’Accueil
C’est maintenant le tour des headers des autres pages d’être ajusté comme nous l’avons constaté dans le test qui précède.
Vérifier le résultat en mode présentation.
Pour terminer avec la page Chatbot :
- Changer la position de la croix de fermeture dans les trois pages du Chatbot :
- Puis changer l’animation comme ceci pour que la page soit balayée de haut vers le bas :
Tester de nouveau notre prototype Figma
On revient donc sur le mode présentation et l’on remarque les modifications que nous avons apportées. D’abord l’emplacement des logos et ceux des headers.
Puis avec les composants, on a réglé le petit bug. On peut ouvrir puis fermer chaque composant comme ceci :
Et enfin, on a aussi rectifié l’animation du Chatbot lors de sa fermeture que vous pouvez tester.
C’est sur cette partie que nous terminons cet article avec un projet fonctionnel et prêt pour la phase de développement. Dans le prochain chapitre, nous allons conclure tout ce que nous avons vu jusqu’ici en effectuant un bilan de cet article.
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui. Découvrez des cours variés pour tous les niveaux !
Conclusion
En suivant les étapes détaillées de ce guide, vous serez en mesure de créer des prototypes interactifs avec Figma qui amélioreront l’expérience utilisateur et la fluidité de navigation. Le design prototype Figma n’aura plus de secrets pour vous.
Vous serez capable de tester, ajuster et animer vos prototypes pour obtenir des résultats professionnels.
N’oubliez pas que la clé d’un bon prototype réside dans sa capacité à refléter fidèlement l’expérience utilisateur finale, et Figma est l’outil parfait pour y parvenir. Continuez à explorer et à expérimenter pour perfectionner vos compétences en design. Et par la suite nous allons traiter le volet dedesign figma.
