Créer un prototype interactif dans Figma peut sembler complexe.
Sans une bonne compréhension, les interactions risquent d’être maladroites, frustrant l’utilisateur.
Cet article vous guide pas à pas pour configurer un sticky scroll et tester efficacement votre prototype.
Perfectionnez vos designs pour une expérience fluide sur Web et Mobile avec Figma
Quand on a fait notre scénario d’utilisation, on a dit que l’utilisateur va scroller à travers les différentes pages. Vous allez surement dire : « Mais là les pages sont séparées les unes des autres, comment va-t-on pouvoir scroller dessus ? ». C’est une très bonne question, c’est pour cela que nous allons créer un autre frame appelé sticky scroll .
Pour y arriver, commencer d’abord par grouper tout le contenu du frame pour chaque page.
Faites de même avec les autres pages en incrémentant le numéro de la page à chaque groupe.
À présent, dupliquez la page d’accueil et renommez-la en sticky scroll , puis il vous reste à étirer le nouveau frame afin d’ajouter les autres pages sur le bas.
Vous pouvez à présent copier le groupe que vous avez créé dans chaque page dans le sticky scroll et de bien les placer les unes au-dessous des autres.
Répétez le processus avec la page vote, sauf qu’il faudra redimensionner le bakcground.
Continuer avec la page Gold Stripe Edition et Adidas, en ajoutant un rectangle blanc en guise de fond blanc des pages pour garder la même dimension quand on va le copier dans le sticky scroll.
Si vous voulez plus d’espace sur le sticky scroll et que vous avez besoin de l’étirer n’oublier de définir les constraints pour chaque groupe possédant le contenu de chaque page dans afin que les éléments ne soient pas infectés.
Rajouter la page footer, avec notamment un rectangle noir en guise de fond.
Finaliser le prototype Figma
Après avoir posé notre sticky scroll , il est à présent possible de scroller à travers les différentes pages. Pouvoir constater cela, sélectionner le frame et passer en mode présentation et scroller à l’aide de votre souris.
Mais bien évidemment, il nous reste à poser les différentes interactions sur notre site. Suivez juste le guide dans le tableau suivant pour créer les interactions en mode prototype :
Pour les bandes dorées
Cliquer sur une des bandes et appuyer sur le bouton « + » pour ajouter une interaction.
Après, il faudra modifier les propriétés comme ceci :
Bouton JE TENTE MA CHANCE
Pareil pour ce bouton, créer d’abord une interaction dans la section prototype puis ajouter ces propriétés pour pouvoir changer l’état du bouton lors d’un clic.
Bouton EMAIL
Recommencer le même processus avec le bouton EMAIL.
Toujours avec la même démarche avec le bouton LIKE qui va changer d’état lorsqu’on clique dessus.
Assurez-vous d’avoir ajouté l’interaction sur les trois boutons LIKE
Bouton REJOINDRE
Pour celui-ci aussi, vous allez créer une interaction puis ajouter les propriétés suivantes.
Bouton du footer
Pour ces derniers, on va changer d’état lorsqu’on passe la souris au-dessus donc vous allez ajouter les propriétés suivantes sur chaque bouton.
Ça sera tout pour les interactions qu’on retrouvera sur notre site. Dans la partie qui va suivre, nous allons tester tout ça et ajouter des transitions pour animer notre site web.
Tester le prototype Figma efficacement
Tout d’abord afin de pouvoir tester notre projet directement sur le sticky scroll, il faut d’abord définir un flow car sinon on retrouvera les wireframes et les autres pages quand on sera en mode présentation. Pour créer un flow, sélectionner le sticky scroll et cliquer sur Flow starting point comme indiqué sur la figure.
Nommez-le comme Flow web, car on va créer un autre flow pour la version mobile par la suite.
Maintenant, vous pouvez essayer de faire passer la souris au-dessus des bandes pour voir les interactions.
Essayer aussi de cliquer sur les boutons pour les tester et voir les interactions.
Constatez que si l’on appuie sur le bouton, on ne peut pas revenir vers l’état précédent. On reste bloqué sur l’état On , on va ajuster cela dans la prochaine partie pour que l’on puisse revenir vers l’état Off après un certain délai.
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.
FAQ
Comment créer un sticky scroll dans Figma ?
Comment tester les interactions dans un prototype Figma ?
Comment ajouter des interactions aux boutons dans Figma ?
Pourquoi utiliser un prototype interactif dans Figma ?
Comment définir un flow dans Figma ?
Conclusion
En utilisant Figma pour créer des prototypes interactifs, vous améliorez considérablement l’expérience utilisateur de vos projets. Quels autres outils de design utilisez-vous pour enrichir vos prototypes ?
