Composants Design Figma

L'Équipe Alphorm
L'Équipe Alphorm 20e lecture en min

Dans le domaine du design UX/UI, l’utilisation des composants dans Figma est essentielle pour garantir la cohérence et l’efficacité des projets. Dans notre précédent article, nous avons exploré comment Utiliser Figma pour les Wireframes, soulignant l’importance de cette étape cruciale dans le processus de design. Aujourd’hui, nous allons approfondir cette approche en nous concentrant sur un aspect tout aussi vital : les composants. Un composant design Figma permet de créer des éléments réutilisables, simplifiant ainsi le processus de conception et de mise à jour des interfaces. Dans cet article, nous explorerons les différentes étapes pour créer et optimiser des composants dans Figma, en illustrant chaque étape avec des exemples pratiques. Que vous soyez débutant ou expérimenté, cette approche vous permettra d’améliorer votre flux de travail et d’assurer une expérience utilisateur optimale.

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.

Illustration montrant les composants design Figma

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) :

 

Composant des boutons de la page d'accueil composants design figma

Mais surtout le footer qui sera très utilisé, avec plusieurs états :

Composant pour les différents états du footer composant design figma
  • 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.

Pas de composant pour la page Alertes composant design figma

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à.

Composant pour la page Historique composant design figma
  • 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.

Composant design figma pour les éléments déroulants

Mais aussi pour le bouton Ajouter que l’on retrouve dans ces trois pages.

Composant design figma pour le bouton Ajouter
  • 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.

Composant design figma pour la page Étiqueteuse

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.

Avant et après du composant design du footer

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.

Frame pour le design system figma

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.

Copier et modifier le wireframe du footer pour composant design figma

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.

Modifications des ellipses du footer pour composant design figma

Il suffit ensuite d’insérer les éléments graphiques que nous avons à sa place.

Élément graphique dans nos ressources pour composant design figma

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.

Masquer les ellipses dans le composant design figma

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.

Ellipse de substitution pour la forme du footer pour composant design figma

On sélectionne après cette ellipse et le rectangle du footer puis on va dans Union selection > Substratct selection.

Fusionner l'ellipse avec le rectangle du footer pour composant design figma

Pour obtenir ceci à la fin :

Nouvelle forme du footer pour composant design figma

On ajoute enfin un effet shadow comme indiquer sur la figure suivante et une bordure de 10 px sur les coins supérieurs :

Ajuster les détails du footer pour composant design figma

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.

Vous avez cette curiosité de découvrir plus de dimensions sur Figma, nous vous recommandons notre formation vidéo : Formation 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.

Plusieurs états nécessaires pour le footer pour composant design figma

États du footer sur la page d’accueil dans Figma

Quand on est sur une autre page comme les suivants :

Différents états du footer selon la page pour composant design figma

Le footer sera comme celle qu’on vient de créer.

Premier état du footer pour les sous-pages pour composant design figma

Mais quand on est sur la page d’Accueil elle-même, nous aurons ceci :

Footer en état sélectionné pour la page d'accueil pour composant design figma

É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.

Ellipse réapparaît derrière l'icône réglage pour composant design figma

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.

Intervertir les icônes Home et Réglage pour composant design figma

Ensuite on changer la couleur de l’icône pour la page d’accueil et l’on masque l’ellipse.

Modification de l'icône de la page d'accueil pour composant design figma

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.

Déplacement de la forme substituée sur l'icône Réglage pour composant design figma

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 :

Différents états du footer selon la page pour composant design figma

Une chose importante, il ne faut pas oublier de nommer chaque état du footer comme il se doit pour éviter de se perdre.

Calques des états du footer pour composant design figma

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 :

Guide pour créer un composant pour le footer

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.

Utilité des composants dans le design figma

Ç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.

Vous souhaitez maîtriser Figma et créer des wireframes efficaces ? Ne manquez pas notre parcours Figma complet, conçu pour vous guider pas à pas: Parcours Figma

Réalisation de la barre de message dans Figma

Avant et après du design de la barre de message

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.

Ajustements sur le wireframe de la barre de message pour le composant design figma

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 :

Designer correctement la zone de texte pour composant design figma

Puis, on remplace les deux ellipses à côté par des icônes comme ceci :

Ajouter deux icônes à côté de la zone de texte pour composant design figma

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.

Premier état de la barre de message pour composant design figma

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.

Dupliquer le design de la barre de message pour créer un composant design figma

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.

Étirer la zone de texte jusqu'à l'extrémité pour un composant design figma
Cacher les deux icônes pour ne pas superposer les éléments pour un composant design figma

On va renommer ce deuxième élément par Message clic pour le différentier avec l’autre.

Deuxième état de la barre de message

Pour terminer, sélectionner les deux éléments et cliquer sur Components > Create component set comme tout à l’heure.

Guide pour créer un composant pour la barre de message

Bien sûr, il ne faut pas oublier de renommer ce composant :

Importance de renommer le composant de la barre de message

Conception des variantes du bouton livraison

À présent, nous allons designer bouton livraison sur la page d’accueil.

Avant et après du design du bouton de livraison

Nous allons d’abord commencer par copier le wireframe que nous avons créé dans notre Design system et faire les modifications suivantes :

Modification du wireframe du bouton de livraison

Suite à cela, nous allons intégrer le logo correspondant dans nos ressources graphiques comme ceci :

Premier état du bouton de livraison

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 :

Deuxième état du bouton de livraison

Et comme toujours, il ne faut pas oublier de grouper les éléments :

Grouper les éléments du bouton de livraison

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.

Guide pour créer un composant pour le bouton de livraison

Nous allons faire un drag and drop sur notre bouton depuis Assets vers un frame pour le tester.

Tester l'utilité du composant du bouton de livraison

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 :

Guide pour définir une propriété d'un composant
Erreur : propriété définie non utilisée

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.

Lier les valeurs du design avec la propriété définie

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.

Tester la propriété pour le texte

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 :

Guide pour définir une propriété pour les icônes

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.

Relier les icônes du design avec la propriété définie

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.

Erreur de liaison des icônes avec la propriété

Pour éviter cela, il faut faire les manipulations suivantes :

  • Tout d’abord dupliquer le frame contenant les icônes.
Dupliquer le frame des ressources graphiques
  • 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 :
Rectangle de fond ajouté pour chaque icône
  • Grouper chaque icône avec le rectangle correspondant, changer la couleur du rectangle en transparent (opacité : 0%) et changer chaque élément en composant.
Nouveaux éléments graphiques après modifications
  • 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.
Changer les valeurs des propriétés avec les nouveaux éléments
  • Et ensuite, mettez le texte juste au-dessous de la zone délimitée par l’icône pour ne pas être superposée.
Ajuster l'emplacement des icônes et des textes

Faites à nouveau le test et vous verrez que vous ne rencontreriez plus d’erreurs comme avant.

Nouveau test pour rectifier l'erreur

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.

Création des différents boutons possibles

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.

Avant et après du design du bouton colis

On va donc copier cet élément dans notre Design system pour commencer le travail et entamer les changements suivants :

Premier état du bouton colis

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 :

Flèche inversée pour le deuxième état du bouton colis

Ensuite de rajouter un rectangle sans couleur de fond, avec une bordure à 10px et un contour de 1px.

Rectangle créé pour le champ d'information

Et l’on ajoute deux champs de texte à l’intérieur du rectangle comme ceci :

Texte ajouté dans le champ d'information

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.

Grouper les éléments pour les deux états du bouton colis

Sélectionnez ensuite les deux éléments, et on crée un composant design Figma :

Guide pour créer le composant du bouton colis

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 :

 

Guide pour créer une propriété pour le composant du bouton colis
  • Puis on relie le texte de notre bouton à cette propriété pour les deux états :
Relier le texte du bouton colis avec la propriété créée avant
  • Ensuite vient le tour des aliments, on crée la propriété Text tout en ajoutant les informations :
Créer une propriété pour les informations dans le champ d'information
  • Sans oublier de relier le tout après :
Relier le champ de texte avec la propriété correspondante
  • Vous pouvez faire pareil pour la quantité de nourriture pour finir le rendu :
Tester la fonctionnalité du composant du bouton colis

Maintenant si vous tester le bouton, vous pourriez changer le nom facilement, les aliments ainsi que la quantité

Relier le deuxième champ de texte avec une propriété à créer

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.

Bouton colis réutilisé pour d'autres pages

Conception du bouton étiqueteuse dans Figma

C’est maintenant au tour du bouton étiqueteuse d’avoir son propre design.

Avant et après du design du bouton étiqueteuse

On va copier le wireframe dans notre Design system et attaquer avec les changements suivants :

Modifications du wireframe du bouton étiqueteuse

Pour l’intérieur du rectangle principal, on va procéder ainsi :

Ajustements apportés au bouton étiqueteuse

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.
Créer une nouvelle zone de texte pour le bouton étiqueteuse
  • On change la couleur et les bordures des deux rectangles :
Ajuster les rectangles pour le rendu du design
  • Ajoutez les produits avec des traits de séparations et le tour est joué
Deuxième état du bouton étiqueteuse

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 :

États du bouton impression à créer

On va grouper les éléments de chaque état et créer un component set.

Composant créé à partir du bouton impression

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.

Avant et après du design du bouton Ajouter

Pour cela, on prend le bouton du wireframe et on le modifie ainsi :

Premier état du bouton Ajouter

Puis on va prendre un rectangle de la même dimension que le bouton colis et faire les modifications suivantes :

Deuxième état du bouton Ajouter

Pour terminer, il suffit de créer un composant avec ces deux états et voilà.

Composant créé à partir du bouton Ajouter

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.

Composants dans notre design system

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.

ÉTIQUETÉ : Figma
Partager cet article
Par L'Équipe Alphorm Démocratiser la Connaissance Informatique pour Tous !
Suivre :
L'Équipe Alphorm, c'est la démocratisation de la connaissance informatique. Passionnés et dévoués, nous sommes là pour vous guider vers le succès en rendant la technologie accessible à tous. Rejoignez notre aventure d'apprentissage et de partage. Avec nous, le savoir IT devient une ressource inspirante et ouverte à tous dans un monde numérique en constante évolution.