Créer un design de page attrayant et fonctionnel peut être complexe, surtout lorsque chaque élément visuel doit être aligné et optimisé pour l’expérience utilisateur.
Un design mal structuré peut entraîner une confusion des utilisateurs, diminuer l’engagement et nuire à la conversion. Cela devient particulièrement frustrant lorsque des éléments comme les carrousels et les barres de recherche ne sont pas correctement optimisés.
Cet article vous guide étape par étape pour concevoir des composants clés sur Figma, garantissant une interface propre, moderne et intuitive pour vos utilisateurs.
Designer avec Figma : Création de l'Entête
Revenons dans Figma et commençons par dupliquer (Ctrl + D) notre wireframe.
Après cela, nous allons faire la série de modifications suivante :
- Placer le logo dans la partie que l’on a désignée pour cela
- mettre le texte de notre numéro de téléphone en style H1 et le mettre en couleur bleue
- dupliquer le texte du numéro et le modifier puis le mettre en style H2
- modifier la couleur de la zone de l’entête en blanc
- supprimer le bouton profil et le modifier comme suit
- Peaufinons un peu le tout en essayant de rapprocher le cercle au maximum à la bordure de la forme et modifier sa taille par rapport à la taille du texte du numéro
- Pour terminer, nous allons modifier le bouton pour changer la langue, en supprimant la forme de cercle et mettre le style du texte en H3
Optimisation de l'Header avec Plugins pour designer avec Figma
Pour styliser un peu notre header, on va intégrer quelques icônes grâce aux plugins suivants :
Leurs points communs, c’est qu’ils fournissent des images en format .SVG pour pouvoir les éditer par la suite.
Bien, maintenant cherchons ces trois icônes qu’on va intégrer :
Mettons en place les deux premières icônes dans le bouton profil et plaçons le tout dans l’autre bout de la grille :
Modifions à présent les deux autres icônes comme ceci :
Notre header devrait ressembler à ceci après :
Très bien, nous avons donc colorié notre header ainsi qu’intégrer des icônes pour affiner son design avec Figma. Passons maintenant à l’étape suivante, celui de la barre de recherche.
Formation Figma UX/UI 2/4 : Maîtriser l’essentiel du Design
Apprenez à concevoir des designs percutants et fonctionnels avec confiance !
Guide de design avec Figma :Conception de la Barre de Recherche
Nous avons déjà notre wireframe, prêt à l’emploi, de notre barre de recherche que nous allons designer avec Figma en commençant par importer des icônes.
Sélection d'Icônes pour la Barre de Recherche pour designer avec Figma
Sur votre projet Figma, aller dans la section des plugins comme tout à l’heure et essayer de rechercher les icônes suivantes :
Pour la section Séjour, j’ai opté pour cette icône que vous ne trouverez pas dans les plugins
Vous pouvez le retrouver en format .SVG en cliquant sur ce lien.
Intégrez-les dans votre design et réduisez leurs tailles proportionnellement pour avoir ceci :
Mais comme vous voyez tout est un peu condensé donc on va ajuster tout ça pour bien espacer notre design.
Alignement des Composants Graphiques pour designer avec Figma
Pour voir l’alignement de nos éléments graphiques, nous allons verrouiller la zone de saisie de la barre de recherche pour éviter de le déplacer.
Après, nous allons mettre un peu de marge à gauche et à droite des icônes :
Puis ajuster l’espacement au milieu entre les textes et finir en réduisant un peu la taille des icônes :
Designer avec Figma : Création de la Barre de Recherche Figma
Dans cette étape, nous allons rajouter quelques couleurs sur notre barre de recherche.
Premièrement, on va colorer en bleu le palmier et le texte Séjour et le mettre en gras.
Puis on va changer la taille du trait au milieu et changer sa couleur en gris.
Pour chaque bouton filtre, nous allons faire ces manipulations suivantes :
Et enfin, nous allons remplacer le texte Recherche par une icône en forme de loupe et mettre l’arrière-plan en bleu.
Intégration d'Images pour le Carrousel Figma
Pour inclure la photo dans la zone conçue pour la barre de recherche, nous allons faire ainsi :
Il ne faut pas oublier d’harmoniser le tout en agrandissant les deux flèches à côté et les mettre en blanc.
C’est déjà pas mal tout ce qu’on a fait jusque-là. Dans la prochaine partie, nous allons passer au design Figma de notre tableau.
Designer le Carrousel Principal avec Figma
Pour que les clients soient attirés par les offres spéciales, il faut donner à notre carrousel un design qui régale les yeux et pour faire cela. On va commencer par les comptes à rebours et le titre.
Configuration des Compteurs et Titres avec Figma
Donc pour notre titre, on va changer le contenu textuel et colorer la petite description en gris que l’on va ajouter au style de couleur.
Recherchez maintenant dans vos plugins, une icône en forme d’éclair (pour l’effet à durée limitée) et colorer en jaune. Plaçons-le à côté du titre et positionnons le tout au centre de la page.
Voilà pour ce qui est du titre, attaquons directement le design de notre compte à rebours. Pour ce faire avec Figma, nous allons suivre quelques étapes suivantes :
- Modifiez la forme dans le wireframe en rectangle et colorons le tout en blanc avec des bords arrondis
- Dupliquez la forme précédente et supprimons uniquement les bordures à droite comme ceci :
- Placez le tout sur le côté gauche du rectangle et placez l’icône en forme d’éclair comme sur la figure :
- Maintenant, ajoutons le contenu textuel comme l’exemple sur l’image et dupliquez le tout pour le reste :
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
Insertion de Titres et Navigation pour le Carrousel
Donc comme tout à l’heure, on va choisir trois autres photos sur internet et on va les mettre en background pour notre carrousel.
Changeons maintenant le titre « Lorem ipsum » en un vrai nom de ville par exemple « Espagne, Barcelone » tout en ajoutant une icône et colorons le tout en blanc.
Pour les points de navigation, rien de plus simple, on va juste changer la couleur en blanc tout comme les flèches de navigation.
Description des Offres du Carrousel avec Figma
On ne va pas laisser les descriptions de notre carrousel en lorem ipsum, vous vous en doutez. Donc je vous propose le contenu suivant qu’on va mettre dans notre première description.
Pour les deux autres, on va modifier le texte comme ceci :
Bien, maintenant vous allons ajouter des icônes sous forme d’étoiles pour marquer l’avis sur la destination.
Design avec figma : Bouton de Validation
Terminons cette partie avec notre bouton de validation, nous allons faire les suites de modifications suivantes pour arriver au résultat voulu avec un design Figma:
- D’abord arrondir les bordures pour affiner notre bouton
- Après cela, agrandir la taille de la police et bien centrer le tout
- Mettez la couleur de l’arrière-plan sur bleu et le tour est joué
Notre section pour les offres spéciales devrait maintenant attirer plus de clients. Dans la prochaine partie, on va commencer le design du tableau pour afficher les offres promotionnelles de notre agence de voyages.
Désigner avec Figma : Structuration du Tableau pour Promotions
Pour notre tableau, il y a quelques ajustements à faire et tout sera au top. D’abord, définissons le design principal de notre tableau.
Pour y parvenir, on va procéder ainsi :
- Changeons la couleur du tableau en blanc pour qu’on puisse voir les lettres écrites dessus et ajoutons un contour à ce dernier pour délimiter sa zone
- Une fois fait, pour le texte on va changer comme ceci :
- Au niveau du prix, on ajoute un rectangle avec un fond jaune et on change la couleur de la police en blanc
- Maintenant, pour les petites flèches, on va changer avec des icônes pour que ça soit moins agressif et changer la couleur en bleu.
- Dupliquons le groupe qu’on vient de créer, et changeons aussi la flèche du bas de page avec l’icône
Application d'Ombre Portée sur le Tableau Figma
Comme le titre nous le dit, nous allons ajouter un effet d’ombre sur notre tableau pour que ça soit plus agréable pour les yeux et cela par un design Figma. Donc d’abord, il va falloir grouper tous les éléments de notre tableau.
Puis ajouter l’effet « Drop Shadow » comme ceci :
Entre-temps, on va ajouter une couleur de background au niveau de la zone du tableau pour que ça soit moins vide :
Révision des Données du Tableau Promotionnel
Pourquoi nous faut-il changer les informations du tableau ? Tout simplement pour ne pas avoir la répétition et que tout paraît plus naturel.
À partir de la deuxième ligne, nous allons ajouter les informations suivantes :
Finissons le tout avec notre titre (style H1) en plaçant une icône pour indiquer que ce sont des offres de dernières minutes à côté de notre titre :
Voilà, on a terminé pour notre tableau des offres promotionnelles, maintenant, passons à la vidéo de présentation.
Désigner avec Figma : Création de la Vidéo de Présentation
Notre vidéo comme nous l’avons dit va comporter une petite présentation des voyages déjà organisés. Donc il nous faut une image pour illustrer ce fait.
Pour notre bouton, on va tout simplement changer la couleur du cercle en blanc et celui du triangle en bleu pour qu’on puisse le distinguer.
Ajout et Gestion d'Icônes pour la Vidéo avec Figma
Ce n’est pas encore fini, il nous reste à modifier la partie des avis clientèle afin de rassurer nos futurs clients.
Trouvons les icônes suivantes et plaçons-les dans notre design :
Puis colorer le tout en bleu avec les textes correspondants.
Il nous reste plus maintenant que notre footer et nous aurons fini avec la partie design.
Désigner avec Figma : Aménagement du Footer
Pour notre footer, nous allons tout simplement changer la couleur du background en bleu et la couleur des contenus en blanc comme ceci :
Ensuite, pour les moyens de paiement, on va prendre les icônes suivantes et les incorporer :
Pareil pour les réseaux sociaux :
Et voilà, on a terminé notre projet comme vous pouvez le voir sur le visuel suivant. Passons à d’autres modes maintenant pour voir le rendu de notre travail.
Adaptation à Différents Modes d'Affichage avec Figma
Réglages pour le Mode Présentation
Si vous vous mettez en mode Preview cela va nous afficher les trois frames de notre projet et il faut défiler pour voir notre page d’accueil.
Le problème ici si vous scroller, vous allez voir que notre header n’est pas fixe donc nous allons devoir faire une petite modification.
Autres choses, en mode Present, Figma ne propose que la version pour les ordinateurs MacOs ce qui fait que notre design est coupé ici, mais nous allons voir comment résoudre cela.
Stabilisation de l'Entête dans le Mode Présentation
Tout d’abord, il va falloir s’assurer que notre header prend toute la taille de la page
Ensuite, grouper tout le contenu et placer le groupe créé en tête dans la liste des calques pour qu’elle soit toujours affichée au-dessus des autres éléments lors du scroll.
Sélectionnez ensuite le header et aller dans le prototype pour fixer son emplacement.
Essayer maintenant le mode preview puis scroller pour voir le résultat.
Ajustement de la Taille d'Écran : un outil de design Figma
Pour éviter l’erreur qu’on a vue tout à l’heure dans le mode présentation, sélectionner d’abord notre frame et regarder sa dimension.
Puis désélectionner le, et allez dans un prototype. Dans device, choisissez custom size puis entrer la largeur correspondante :
Regardons maintenant ce que ça donne en mode Present :
Très bien, maintenant ça marche comme on l’a souhaité.
Transition vers le Mode Développeur pour désigner avec Figma
On va donc passer en mode développeur afin de partager notre travail à l’équipe de développement.
Souvenez-vous, il faut juste switcher le bouton du haut.
Puis sélectionnez le frame et mettez-en Ready for dev :
Voilà, pour le reste cela ne nous appartient pas, c’est aux développeurs de prendre les éléments de notre design et le code généré par Figma pour commencer son travail.
Donc on a terminé avec cette partie, c’était certes un peu long, mais ça en valait la peine.
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
Ce tutoriel a démontré comment designer avec Figma pour optimiser la création d’interfaces, en intégrant des éléments visuels et en peaufinant chaque détail pour une expérience utilisateur améliorée. Pour aller encore plus loin, consultez notre prochain article sur la création d’une application pour les restaurants sur Figma, où nous appliquerons ces principes à un projet concret.
