Les interactions complexes dans Figma peuvent être difficiles à gérer, ce qui nuit à la fluidité du design.
Des interactions mal configurées conduisent à une expérience utilisateur médiocre et peuvent rendre le design system difficile à maintenir.
Cet article vous guide pour créer des interactions efficaces et fluides dans Figma, en utilisant des techniques comme ‘Smart animate’ et ‘After delay’.
Perfectionnez vos designs pour une expérience fluide sur Web et Mobile avec Figma
On va maintenant résoudre le problème que l’on a rencontré précédemment concernant les boutons. Vous retrouverez sur le tableau suivant les modifications que nous allons apporter :
Pour les boutons :
Après avoir fait un clic et basculé sur l’état On, nous allons poser un délai puis revenir à l’état Off.
Pour le bouton LIKE :
Logiquement, si on peut cliquer sur un bouton LIKE pour voter, on pourrait aussi recliquer dessus pour enlever le vote. C’est ce que nous allons faire maintenant.
Bon, vous avez vu qu’on peut créer des interactions sur les instances des composants qu’on crée dans le sticky scroll . Mais cette méthode n’est pas très conseillée.
Pour y arriver, supprimer d’abord les interactions qu’on a créées dans le sticky scroll sur les boutons se trouvant dans le tableau ci-dessus, mais aussi pour les bandes dorées et les boutons du footer.
Puis redirigez-vous vers le Design system web et faites les manipulations suivantes :
- Pour le boutonJE TENTE MA CHANCE :
Vous avez vu comment créer une interaction via le panneau Prototype, mais vous pouvez aussi faire pareil en appuyant sur le signe « + » sur les côtés de l’élément sélectionné et l’étirer jusqu’à son autre état.
S’ouvre ensuite ce panneau contenant les propriétés que vous pouvez retrouver si vous recliquez sur la flèche indiquant l’interaction. Maintenant, mettez les propriétés comme on l’a fait précédemment pour passer de l’état Off à l’état On.
Vous pouvez si vous voulez ajouter une petite animation en changeant « Instant » en « Smart animate » par exemple et soyez curieux en changeant les propriétés pour avoir l’effet que vous voulez.
Maintenant pour le délai de retour, vous allez faire la même démarche, mais cette fois-ci en partant de l’état On . Mais au lieu de déclencher l’interaction On click , mettez sur After delay.
- Pour le bouton EMAIL et REJOINDRE, comme nous l’avons vu dans le tableau du dessus, vous allez recommencer le processus qu’on fait avec le bouton JE TENTE MA CHANCE.
- Pour le boutonLIKE :c’est à peu près la même marche à suivre, mais au lieu de mettre l’interaction pour passer de l’étatOn à l’état OffsurAfter delayvous allez changer enOn click.
- Pour les bandes dorées et les boutons du footer, ajouter une interaction allant de l’état Off vers On quand on passe au-dessus de ces derniers.
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 une interaction sur un bouton dans Figma ?
Comment utiliser le délai dans les interactions Figma ?
Quelles sont les astuces pour gérer les interactions dans un design system web ?
Comment ajouter des animations dans les transitions de Figma ?
Comment gérer les interactions complexes avec les boutons dans Figma ?
Conclusion
En appliquant ces techniques, vous pouvez transformer vos designs Figma en interfaces interactives et attrayantes. Comment envisagez-vous d’améliorer vos prototypes avec ces conseils ?
