Figma est un outil disponible via un navigateur web qui permet de concevoir des designs system complets incluant les prototypes. En UX/UI design, le prototypage est un moyen efficace pour explorer le fonctionnement d’un produit/service et le présenter aux différentes parties prenantes avant sa production. La collaboration en temps réel entre designers et développeurs d’une même équipe se déroule sur la base du prototype à réaliser.
Dans cet article, nous découvrons comment les designers UX/UI font pour créer des prototypes dans Figma avec différents composants interactifs ?
Les premiers réflexes de pro à avoir
Avant de s’attaquer aux fonctions les plus techniques du prototypage, quelques petites mesures s’imposent pour protéger vos conceptions. On vous apprend rien de nouveau si vous avez eu une bonne formation à l’éditeur Figma, mais néanmoins voici une petite revue des bases de l’organisation et de la prise en main des fonctions de prototypages proposées par ce logiciel.
Alors, lorsque vous êtes prêts à commencer votre conception, ajoutez une copie de chaque écran et composant nécessaire sur une nouvelle page. Classez le tout dans un ordre logique avec des noms clairs et identifiables. L’utilisation de copies vous permettra d’utiliser les mêmes conceptions dans de nombreux prototypes, tout en gardant les versions originales en sécurité et organisées.
Design de prototype avec Figma
Les principales fonctionnalités dont vous aurez besoin pour créer votre prototype sont présentées dans le panneau « Prototype » à droite. On y trouve, par exemple, les commandes « Ajouter un nouveau flux de prototype », « Ajouter et configurer le défilement par débordement » et « Configurer les paramètres du prototype ».
Pour démarrer votre expérience de prototypage, sachez que chaque page d’un fichier Figma peut comporter plusieurs flows. Chacun d’eux doit, cependant, avoir un nom et un point de départ uniques. Pour ajouter des flows, sélectionnez le frame (bloc) et cliquez sur « Ajouter » dans le menu « Flow Starting Point ». Vous pouvez ensuite le renommer et ajouter une description à partir de l’icône « Editer ».
L’ajout des transitions sur Figma
Votre flow créé, il est maintenant temps d’ajouter des transitions (interactions) pour lier vos frames et construire ainsi un prototype fonctionnel. En permettant de connecter deux frames, les interactions montrent comment ces éléments interagissent entre eux. Pour ce faire, il suffit de sélectionner le premier frame (calque) et de faire glisser le nœud bleu qui apparaît vers le deuxième frame. Le menu « Détails de l’interaction » apparaît alors et la connexion est désormais faite. Le premier bloc deviendra le nouveau point de départ du flux s’il n’a pas d’autres connexions.
Les interactions s’articulent autour d’un mouvement défini qui se manifeste par :
- Le déclencheur : L’événement qui provoque la transition en tapant/cliquant, en glissant, en survolant, en appuyant sur une touche/un pavé numérique, etc.
- L’action : Le changement qui se produit (naviguer vers, changer vers, ouvrir la superposition, échanger la superposition, fermer la superposition, retour, défiler vers, ouvrir le lien).
- L’animation : Le comportement de la transition (instantané, animation intelligente, entrer, sortir, pousser, glisser vers, etc.).
Les interactions peuvent prendre plusieurs formes :
Les interactions instantanées
Utilisez des animations instantanées pour que l’action se déroule sans mouvement ni effet. C’est idéal pour les actions telles que la navigation entre les pages ou l’affichage d’une info-bulle.
Les transitions animées
Utilisez des animations pour ajouter du mouvement à vos interactions (dissolution, entrée, sortie, poussée, entrée, sortie). Sélectionnez différentes courbes (easing curves) et ajustez le temps pour personnaliser l’animation. Les courbes de simplification déterminent la vitesse au début, au milieu et à la fin de l’animation. Ainsi, une animation linéaire se déplacera à la même vitesse tout le temps, alors qu’une animation réglée sera plus lente au début, puis s’accélérera. L’ajout de ces courbes rend l’animation plus douce et plus réaliste.
Les interactions animées intelligentes
Utilisez les animations intelligentes « Smart Animate) pour identifier les frames correspondantes sur différentes images et animer la différence entre elles. Ces différences peuvent inclure un changement de position, de taille, de couleurs, etc. Figma saura quelles couches correspondent en fonction de leur nom et de leur ordre.
Les bases des animations & transitions pour le prototypage sur Figma
L’ajout d’options pour compléter votre prototype sur Figma
Une fois les interactions et les animations ajoutées, il ne manque que quelques réglages pour que votre prototype soit livrable. Parmi les options que vous pouvez utiliser, on cite :
La fixation de la position
Cette fonction est utile pour les éléments que vous souhaitez voir rester au même endroit pendant le défilement, comme la navigation haut/bas, le CTA, etc. Configurez ce paramètre dans le panneau de conception sous l’onglet « Contraintes » en sélectionnant le frame que vous souhaitez fixer, puis en cochant « Fix position when scrolling ».
Ajouter le défilement par débordement
Le défilement par débordement vous permet de faire défiler des frames individuelles dans votre prototype. Cette fonction est utile pour prototyper des composants d’une interface utilisateur qui ont leur propre comportement de défilement comme des listes, des carrousels, des menus, des tableaux, etc.
Options de prototypage sur Figma
Pour utiliser le défilement par débordement, vous devez avoir un frame (pas un groupe) dont le contenu imbriqué déborde au-delà des limites. Ce contenu apparaît alors masqué avec l’option « clipped content » activée. Il suffit de sélectionner le frame en question et de sélectionner le type de défilement (horizontal ou vertical).
Présentation du prototype
Une fois votre prototype créé, vous pouvez le présenter en sélectionnant l’icône « Présenter » à côté du point de départ de votre flux ou dans la barre d’outils supérieure. Toute personne ayant accès au prototype peut interagir avec lui et laisser des commentaires à l’équipe.
Pour modifier les paramètres de présentation, ouvrez « Paramètres du prototype » et sélectionnez l’appareil sur lequel vous souhaitez que votre prototype apparaisse. Ce paramètre s’appliquera à chaque flux de prototype sur votre page. Si vous concevez pour plusieurs applications mobiles, utilisez plusieurs pages dans votre fichier Figma.
Pour partager le prototype, il suffit de sélectionner « Partager le prototype » dans la barre d’outils de la présentation. Pour ne partager que le prototype, et non le fichier de conception, sélectionnez « can view prototypes only » dans la première entrée.
Autres questions posées par les lecteurs :