Créer un bouton LIKE personnalisé dans Figma peut sembler complexe.
Sans un guide clair, le processus de design peut devenir frustrant et chronophage.
Cet article vous montre comment redessiner un bouton LIKE inspiré d’Adidas, en utilisant des outils efficaces.
Perfectionnez vos designs pour une expérience fluide sur Web et Mobile avec Figma
Pour la page vote, nous avons défini le bouton LIKE comme étant éligible pour créer un composant. Mais ici nous n’allons pas prendre le design de l’icône que nous avons pris dans Font Awesome, mais prendre celui de Adidas, donc il va falloir que l’on redesign tout ça.
Prenez une capture d’écran du bouton LIKE dans le site de Adidas et intégrez-le dans Figma dans le Design system.
Chercher l’outil plume dans la barre d’outils de Figma et commencer par dessiner les points d’ancrage au-dessus de la capture d’écran.
Terminer l’utilitaire de l’outil plume pour avoir un design similaire à celui de Adidas.
Agrandissez la taille de l’icône comme celui du wireframe.
Pour finir, ajouter le texte au-dessous de l’icône pour montrer le nombre de like.
On passe ensuite le bouton LIKE de la page vote pour la version mobile. Comme avec les autres, commencer par renommer le composant.
Si vous vous dirigez dans Assets et que vous ajoutez le bouton LIKE dans la page mobile, on constate que la taille des boutons est proportionnelle.
Donc nul besoin d’ajuster quoique ce soit dans le design, juste le nome du composant.
Créer un bouton LIKE dans Figma
Afin d’avoir notre composant, nous allons désormais définir les différents états du bouton LIKE. Si on fait un petit retour sur la page de Adidas, on constate que la couleur du bouton LIKE devient noire quand on clique dessus :
On va donc reproduire la même chose avec notre bouton LIKE dans le Design system. Tout d’abord groupons notre icône avec le texte pour les nombres de LIKE et nommer le.
Dupliquer le groupe puis ajouter une couleur noire pour l’icône comme ceci :
Sélectionner les deux groupes puis créer un composant avec Create component set.
N’oubliez pas de faire un test dans la partie Assets pour voir le 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 LIKE dans Figma?
Comment adapter le bouton LIKE pour mobile dans Figma?
Comment gérer les états du bouton LIKE dans Figma?
Qu'est-ce qu'un Design system dans Figma?
Pourquoi utiliser l'outil plume dans Figma?
Conclusion
En suivant ces étapes, vous pouvez créer des boutons LIKE uniques et adaptés à votre projet dans Figma. Quels autres éléments du Design system souhaitez-vous personnaliser pour améliorer l’expérience utilisateur de votre interface?
