Créer des boutons cohérents dans Figma peut être difficile sans un design system.
Sans uniformité, vos designs peuvent paraître désordonnés et peu professionnels.
Cet article vous guide dans la création d’un bouton REJOINDRE, en utilisant un design system pour garantir l’intégrité visuelle.
Perfectionnez vos designs pour une expérience fluide sur Web et Mobile avec Figma
Pour la page Adiclub, nous allons maintenant créer le composant pour le bouton REJOINDRE. Ce que nous allons faire pour avoir une bonne intégrité du design, c’est tout juste de reprendre le design du bouton JE TENTE MA CHANCE avec quelques modifications.
Revenons alors directement dans notre Design system et dupliquer d’abord le fond noir pour accueillir notre nouveau bouton et changer sa couleur en gris.
Sélectionner ensuite le composant du bouton JE TENTE MA CHANCE puis aller dans l’instance du premier état du bouton et sélectionner uniquement le rectangle et le texte qui s’y trouvent :
Il vous suffit ensuite de le copier au-dessus de l’autre fond noir :
Faites pareil avec la deuxième instance du bouton JE TENTE MA CHANCE pour avoir ceci :
Ajouter ensuite les modifications suivantes sur les deux états pour avoir ceci :
Grouper ensuite chaque état du bouton et créer un composant avec les deux groupes :
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 dans Figma?
Pourquoi utiliser un design system?
Qu'est-ce qu'un composant dans Figma?
Comment modifier un bouton existant dans Figma?
Quels sont les avantages de dupliquer des composants?
Conclusion
En appliquant ces étapes, vous pouvez facilement créer des boutons fonctionnels et visuellement cohérents dans Figma. Comment comptez-vous intégrer ces méthodes dans vos futurs projets de design?
