Créer des interfaces cohérentes et réutilisables est souvent un défi pour les designers, surtout lorsqu’il s’agit de composants complexes.
Sans une bonne stratégie, les équipes perdent du temps à réinventer des éléments, ce qui augmente les incohérences et diminue l’efficacité du design.
Dans cet article, découvrez comment utiliser Figma pour concevoir et gérer des composants réutilisables, garantissant une interface homogène et une maintenance simplifiée.
Qu'est-ce qu'un composant design Figma ?
Pour ceux qui ne sont pas familiarisés avec ce terme, on peut le définir comme un élément graphique qui a ces propres styles que nous allons utiliser à plusieurs reprises au sein d’un design comme une barre de navigation. Le but ici c’est de garder une certaine homogénéité pour assurer l’expérience utilisateur et de faciliter la tâche en cas de changement de design.
J’espère que vous avez maintenant compris le principe. Pour appliquer tout ça dans notre projet, je vous invite à regarder les composants qu’on va utiliser.
Identification des composants à créer dans Figma
Pour voir les composants design Figma que nous allons créer par la suite. Commençons par voir notre première page :
- La page d’Accueil
Si l’on fait attention à celui-ci, on peut constater qu’il va y avoir pas mal d’éléments qui vont se répéter. Comme ces différents éléments (boutons) :
Mais surtout le footer qui sera très utilisé, avec plusieurs états :
- La page Historique
Tout d’abord, j’aimerais vous expliquer pourquoi on ne va pas créer de composants design Figma pour les éléments de la page d’Alertes.
Tout simplement parce que ce ne sont que de simples boutons pour de simples alertes qui resteront statiques dans notre design tandis que dans la page Historique si l’on clique sur Action de nettoyage ça va nous afficher plus d’informations sur cet élément-là.
- La page Gestion de stocks, Ménage et Température
Dans ces trois pages, nous allons mettre en place des composants design Figma pour les éléments déroulants afin de voir plus d’informations pour chaque élément. Pour voir ce qu’il y a à l’intérieur de notre frigo par exemple.
Mais aussi pour le bouton Ajouter que l’on retrouve dans ces trois pages.
- La page Étiqueteuse
Nous allons bien sûr ne pas oublier de créer un composant design Figma pour l’étiqueteuse en elle-même et le bouton d’impression relié à celle-ci.
Donc ça sera tout pour les composants design Figma que nous allons créer. Il y en a pas mal donc nous allons commencer directement par celui du footer.
Conception du footer pour un composant design Figma
Pour commencer le design de notre footer, nous allons dupliquer la page d’accueil pour récupérer facilement notre footer par la suite. Il faut maintenant créer un frame où nous allons marquer Design system pour montrer que les éléments que nous allons créer dedans pourront évoluer avec le temps.
Maintenant, on va juste copier les éléments du footer vers l’autre frame, en groupant (Ctrl + G) le tout en passant et en changeant la couleur de fond du footer en blanc.
Après, nous allons aligner les 4 ellipses sur le bord supérieur du footer et changer la couleur de toutes les ellipses en vert (#009245) et en supprimant les textes à l’intérieur.
Il suffit ensuite d’insérer les éléments graphiques que nous avons à sa place.
Pour notre page d’accueil, nous allons cacher les ellipses et colorer les icônes à l’intérieur en noir, car notre footer est déjà en blanc.
Puis pour mettre en évidence le bouton d’accueil sur le footer pour la navigation, on va créer une ellipse (dans le groupe footer) que l’on prendra soin de bien placer au milieu du footer et recouvrant le bouton Home.
On sélectionne après cette ellipse et le rectangle du footer puis on va dans Union selection > Substratct selection.
Pour obtenir ceci à la fin :
On ajoute enfin un effet shadow comme indiquer sur la figure suivante et une bordure de 10 px sur les coins supérieurs :
Voilà donc le design que je propose pour notre footer, comme toujours vous n’êtes pas obligé de faire comme moi, peut être que vous pouvez faire mieux en ajoutant deux ou trois autres modifications. Bon c’est bien ce qu’on vient de faire, mais maintenant il faut réaliser tous les états du footer pour chaque bouton de navigation dans le footer. Et c’est que nous allons aborder dans la partie suivante.
Formation Figma UX/UI 3/4 : Maîtriser le design interactif
Transformez vos maquettes en expériences interactives captivantes et engageantes !
Création des différents états du footer pour un composant design Figma
Avant de commencer quoi que ce soit, il faut que je vous explique pourquoi avoir plusieurs états du footer. C’est simplement pour mettre en évidence qu’on est dans une autre page de la barre de navigation.
États du footer sur la page d’accueil dans Figma
Quand on est sur une autre page comme les suivants :
Le footer sera comme celle qu’on vient de créer.
Mais quand on est sur la page d’Accueil elle-même, nous aurons ceci :
États du footer sur les autres pages avec Figma
Pour cela, nous allons prendre la page Réglage et commencer par faire réapparaitre l’ellipse correspondant au bouton réglage et colorer l’icône en blanc.
Puis on fait monter le tout au même niveau que le bouton d’accueil précédemment tandis qu’on fait descendre le bouton d’accueil.
Ensuite on changer la couleur de l’icône pour la page d’accueil et l’on masque l’ellipse.
On sélectionne pour terminer la zone du footer et on déplace l’ellipse qu’on a substitué de la zone sur le bouton de réglage.
Et voilà, quand on ouvrira la page Réglage, le footer prendra cette forme-là. Il nous suffit maintenant de répéter la même opération pour chaque bouton du footer pour avoir ceci :
Une chose importante, il ne faut pas oublier de nommer chaque état du footer comme il se doit pour éviter de se perdre.
Créer votre premier composant footer avec Figma
Pour mettre notre footer en tant que composant design Figma, nous allons sélectionner tous les états du footer puis aller dans Components > Create component set :
Maintenant si je vais dans Assets, pour récupérer notre footer et qu’on le place dans notre design on peut constater qu’on peut choisir plusieurs états du footer.
Ça sera donc tout pour notre footer, dans la suite nous allons nous attaquer au design de la barre de message de la page Chatbot.
Figma Masterclass : UX/UI du Concept au Prototypage
Maîtrisez l'Art du Design Collaboratif avec Figma : Parcours d'Apprentissage Complet pour Créer, Collaborer et Innover Ensemble
Réalisation de la barre de message dans Figma
On va continuer le design des composants design Figma par la barre de message de la page Chatbot. Pour cela, il faut copier le wireframe, colorer la zone de saisie en blanc et on va arrondir ses bordures 20 px.
Après cette étape, on va commencer par ajouter le bouton de validation du message (avec une icône) et un petit texte avec une opacité pour montrer que c’est une zone de texte comme suit :
Puis, on remplace les deux ellipses à côté par des icônes comme ceci :
Enfin, il suffit de bien aligner les éléments entre eux, de grouper (Ctrl + G) le tout sans oublier de nommer le groupe qu’on vient de créer.
Maintenant qu’on a le design de notre barre de message, dans la prochaine partie on va créer l’autre état de notre barre de message quand on cliquera dessus.
Conception du bouton livraison dans Figma
On revient donc sur la barre qu’on a créée récemment et qu’on va dupliquer.
Après on va étirer la zone de texte avec le texte Aa jusqu’à l’extrémité du design puis cacher les icônes de l’appareil photo et du microphone.
On va renommer ce deuxième élément par Message clic pour le différentier avec l’autre.
Pour terminer, sélectionner les deux éléments et cliquer sur Components > Create component set comme tout à l’heure.
Bien sûr, il ne faut pas oublier de renommer ce composant :
Conception des variantes du bouton livraison
À présent, nous allons designer bouton livraison sur la page d’accueil.
Nous allons d’abord commencer par copier le wireframe que nous avons créé dans notre Design system et faire les modifications suivantes :
Suite à cela, nous allons intégrer le logo correspondant dans nos ressources graphiques comme ceci :
Maintenant, il faut créer un état de ce bouton quand on va cliquer dessus. Il faut juste dupliquer le rendu et procéder comme suit :
Et comme toujours, il ne faut pas oublier de grouper les éléments :
Création des variantes du bouton livraison
Suite à la création du bouton de livraison, nous allons définir les différentes variantes pour celui-ci. Mais avant toute chose, il faut qu’on définisse les deux états créés récemment en un composant.
Nous allons faire un drag and drop sur notre bouton depuis Assets vers un frame pour le tester.
Pour le reste de nos variantes, on doit définir des propriétés à notre composant design Figma pour pouvoir le modifier facilement en commençant par le texte dans le bouton :
Maintenant que c’est fait, il ne faut pas oublier de rattacher le texte de notre composant design Figma (dans les deux états) à cette propriété si on veut pouvoir le modifier facilement.
Comme vous pouvez le voir, si vous ajoutez un bouton dans Figma, il est plus facile de le modifier juste en changeant les valeurs de ces propriétés.
On a maintenant la possibilité de changer notre texte, mais il nous faut aussi les icônes pour les boutons dans home. Donc pour créer une propriété attribuée à cela, suivez le guide ci-dessous :
Il faut ainsi relier les icônes (deux états) de notre composant design Figma à cette nouvelle propriété comme nous l’avons fait avec les textes.
Si vous tester, le bouton qu’on a ajouté depuis Assets tout à l’heure et qu’on change la valeur de la propriété rattachée aux icônes par une autre icône. Il se peut que vos icônes soient aplaties.
Pour éviter cela, il faut faire les manipulations suivantes :
- Tout d’abord dupliquer le frame contenant les icônes.
- Puis créer des rectangles de dimension constante et ajouter les en fond de chaque icône. Redimensionner les icônes s’il le faut :
- Grouper chaque icône avec le rectangle correspondant, changer la couleur du rectangle en transparent (opacité : 0%) et changer chaque élément en composant.
- Revenons ensuite à l’étape précédente, où on va changer les valeurs dans la propriété par ceux du frame Icones 2 que nous avons créés.
- Et ensuite, mettez le texte juste au-dessous de la zone délimitée par l’icône pour ne pas être superposée.
Faites à nouveau le test et vous verrez que vous ne rencontreriez plus d’erreurs comme avant.
Je pense que vous êtes suffisamment capable de faire le reste des boutons qu’on a dans notre page d’accueil, car dans la prochaine partie, on faire le design du bouton colis.
Conception du bouton colis dans Figma
Dans cette partie, nous allons réaliser le design du bouton colis se situant dans la page Réception.
On va donc copier cet élément dans notre Design system pour commencer le travail et entamer les changements suivants :
On a notre premier état du bouton quand il n’est pas appuyé, réalisons maintenant dans le cas où on a cliqué dessus. Pour cela, il suffit simplement d’inverser l’icône flèche :
Ensuite de rajouter un rectangle sans couleur de fond, avec une bordure à 10px et un contour de 1px.
Et l’on ajoute deux champs de texte à l’intérieur du rectangle comme ceci :
Création des variantes du bouton colis
On retourne sur ce qu’on a créé récemment, et on regroupe les deux états en leur attribuant chacun un nom.
Sélectionnez ensuite les deux éléments, et on crée un composant design Figma :
Par la suite, il faut ajouter des propriétés à ce composant :
- D’abord, pour le nom du bouton, on crée une propriété Text :
- Puis on relie le texte de notre bouton à cette propriété pour les deux états :
- Ensuite vient le tour des aliments, on crée la propriété Text tout en ajoutant les informations :
- Sans oublier de relier le tout après :
- Vous pouvez faire pareil pour la quantité de nourriture pour finir le rendu :
Maintenant si vous tester le bouton, vous pourriez changer le nom facilement, les aliments ainsi que la quantité
On pourra utiliser ce même bouton en créant d’autres composants design Figma pour les pages Mes Stocks, Ménages et Températures.
Conception du bouton étiqueteuse dans Figma
C’est maintenant au tour du bouton étiqueteuse d’avoir son propre design.
On va copier le wireframe dans notre Design system et attaquer avec les changements suivants :
Pour l’intérieur du rectangle principal, on va procéder ainsi :
On a notre premier état, on va designer un autre état quand la personne cliquera sur « Indiquer le produit » en dupliquant le tout et changer quelques points :
- Rallonger le rectangle principal et ajouter un autre rectangle rattaché au produit qu’il faudra indiquer.
- On change la couleur et les bordures des deux rectangles :
- Ajoutez les produits avec des traits de séparations et le tour est joué
Maintenant, pour le composant, il faut d’abord grouper les éléments des deux états et créer un component set.
Conception du bouton impression dans Figma
Après le bouton étiqueteuse, nous va designer le bouton impression relié à ce composant. Pour les différents états du bouton, nous allons juste les faire ainsi :
On va grouper les éléments de chaque état et créer un component set.
Conception du bouton Ajouter dans Figma
Pour clôturer ce chapitre, nous allons terminer avec le design du bouton Ajouter qui nous permettra d’ajouter des éléments dans notre page Mes Stocks par exemple.
Pour cela, on prend le bouton du wireframe et on le modifie ainsi :
Puis on va prendre un rectangle de la même dimension que le bouton colis et faire les modifications suivantes :
Pour terminer, il suffit de créer un composant avec ces deux états et voilà.
C’est ici que nous allons terminer ce chapitre sur les composants, où on a appris ce qu’est un composant, à identifier les éléments de notre design qu’il faut transformer en composant, comment les créer avec les différents états et propriétés selon le cas. Dans le prochain chapitre qui va suivre, nous allons entamer la mise en place du design de notre application mobile en intégrant ces composants qu’on a créés.
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. Découvrez des cours variés pour tous les niveaux !
Conclusion
En intégrant les composants design Figma dans votre processus de conception, vous pouvez non seulement gagner du temps, mais aussi garantir une uniformité et une qualité accrues dans vos projets.
Ce guide vous a montré comment créer, configurer et utiliser des composants dans Figma, en soulignant les meilleures pratiques pour maximiser leur efficacité.
En appliquant ces techniques, vous serez mieux équipé pour relever les défis du design moderne et offrir des interfaces utilisateur de haute qualité. Continuez à explorer les possibilités offertes par Figma et à affiner vos compétences pour rester à la pointe du design UX/UI.
