Créer des boutons interactifs et responsives dans Figma peut être complexe.
Sans une approche structurée, les boutons peuvent manquer d’interactivité et de cohérence dans le design.
Cet article vous guide pour concevoir un bouton E-MAIL interactif et responsive dans Figma, en utilisant des composants et des outils spécifiques.
Perfectionnez vos designs pour une expérience fluide sur Web et Mobile avec Figma
Pour le bouton E-MAIL dans la page Concept, nous allons le copier sur un autre rectangle préalablement créé en noir dans notre Design system comme avec le bouton JE TENTE MA CHANCE.
Puis entamer avec la série de modifications suivantes :
- Changer la couleur du background en blanc.
- Mettre la police sur Adineue Pro Regular avec 30px .
- Ajouter ensuite une flèche avec l’outil Flèche sur la barre des outils de Figma avec une opacité de50%pour le couloir noir de la flèche :
- Pour le deuxième état du bouton, nous allons ajouter une interaction lorsqu’on va survoler le bouton. Pour cela, inversez juste la couleur du texte et celui de la flèche comme ceci :
N’oubliez pas de grouper chaque état du bouton comme sur la photo :
Sélectionnez les deux états et créer un composant en cliquant sur Create component set comme tout à l’heure :
Tester le composant créé dans la partie Assets pour voir si tout marche comme il le faut.
On passe maintenant au bouton E-MAIL mobile de notre projet, on va donc reprendre le composant dupliqué de ce dernier et le renommer pour le différencier de la version web.
Regardez ensuite les dimensions et la taille de la police dans le wireframe mobile.
Puis changer la propriété des instances par ceux du frame.
Modifier par la même occasion la taille des flèches pour qu’elles ne prennent pas trop de place.
Recarder ensuite la taille du cadre du composant.
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 bouton E-MAIL dans Figma ?
Comment ajouter des interactions à un bouton Figma ?
Comment adapter un bouton E-MAIL pour mobile dans Figma ?
Qu'est-ce qu'un Design system dans Figma ?
Comment tester un composant dans Figma ?
Conclusion
En créant un bouton E-MAIL interactif dans Figma, vous améliorez l’expérience utilisateur sur différents appareils. Quel autre élément souhaiteriez-vous intégrer dans votre Design system pour enrichir vos projets futurs ?
