Créer un design de bouton cohérent dans une interface utilisateur peut être complexe.
Sans un système organisé, le design devient incohérent et difficile à gérer, ce qui nuit à l’expérience utilisateur.
Dans cet article, nous explorons comment structurer un design system dans Figma pour concevoir des boutons efficaces et esthétiques.
Perfectionnez vos designs pour une expérience fluide sur Web et Mobile avec Figma
On ne perd pas de temps et on démarre tout de suite avec le design du bouton JE TENTE MA CHANCE , c’est parti !
Pas si vite ! On doit d’abord définir une chose afin de mieux organiser notre travail, il s’agit bien sûr du Design system pour notre web. Créer juste un frame comme sur l’image en dessous :
Une fois le plan de travail installé, on peut commencer à designer le composant de notre bouton. Pour cela commencez déjà par copier le bouton dans le Design System et ajoutent les modifications suivantes :
- D’abord, mettez la taille de la police sur 30 px
- Changer la typographie sur Adineue Pro Light Web dont vous pouvez télécharger la famille de la typographie ici .
- Ajouter ensuite un contour de 2 px avec Stroke .
- Supprimer totalement la couleur du bouton. À ce stade vous devrez avoir quelque chose qui ressemble à ceci :
- Ajouter un rectangle avec un fond noir pour pouvoir voir notre bouton, car notre background sera en noir.
- Changer la couleur du texte et du contour de notre bouton puis placer le bouton sur le background.
- Ensuite pour le deuxième état du bouton, quand on va interagir avec, nous allons ajouter une couleur au background en blanc, et mettre le texte en Adineue Pro Bold avec une couleur noire.
Continuons maintenant avec la création du composant, premièrement si vous ne l’avez pas encore fait, grouper chaque état du composant pour créer un composant par la suite.
Sélectionnez les deux groupes puis diriger vous vers la barre des outils de Figma et trouver Component > Create component set .
Vous pouvez maintenant tester le composant créé dans la partie Assets
Pour designer les éléments du mobile, vous pouvez vous compliquez la tâche en répétant le même processus qu’on a fait pour la version web, mais le chemin le plus court ça serait de dupliquer tout le Design system web et de modifier les éléments.
Premièrement, commencer par renommer le deuxième Design system en Design system mobile pour ne pas les confondre.
Pour le bouton JE TENTE MA CHANCE, renommer le composant en ajoutant le mot mobile pour le différencier par la suite de l’autre.
Dirigez-vous ensuite vers le wireframe de la page contenant le bouton JE TENTE MA CHANCE mobile et noter sa longueur et sa largeur.
Faites-en aussi pareil avec le texte du bouton, noter la taille de la police.
Apporter ensuite ces propriétés dans l’instance du composant JE TENTE MA CHANCE Mobile .
Appliquez les mêmes propriétés pour la deuxième instance.
Pour le plaisir des yeux, ajuster 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ée-t-on un design system dans Figma ?
Quelle est l'importance de la typographie dans le design UI ?
Comment tester un composant dans Figma ?
Comment adapter un design web pour mobile dans Figma ?
Pourquoi utiliser un fond noir dans le design de boutons ?
Conclusion
En appliquant ces techniques de design dans Figma, vous pouvez créer des interfaces utilisateur efficaces et esthétiques. Quelles autres fonctionnalités de Figma trouvez-vous essentielles pour le design UI ?
