Designer Efficacement avec Figma

L'Équipe Alphorm
L'Équipe Alphorm Ajouter un commentaire 16e lecture en min

Maintenant que nous avons pu appris le concept de Wireframe Figma Explorez l’art de designer avec Figma dans ce guide qui vous montre comment créer efficacement des interfaces, de l’entête au footer, en améliorant la qualité et l’efficacité de vos projets. Notre objectif est de réaliser les points suivants:

  • designer uniquement l’entête
  • concentrer sur notre barre de recherche
  • Mettre en place notre carrousel pour les offres spéciales
  • Designer notre tableau où seront affichées les offres promotionnelles
  • Inclure la vidéo de présentation dans notre design
  • Et pour finir, on va designer le footer de notre page d’accueil comme il le faut

Donc sans plus attendre, commençons à donner vie à notre entête.

Designer avec Figma : Création de l'Entête

Revenons dans Figma et commençons par dupliquer (Ctrl + D) notre wireframe.

Duplication de wireframe pour application de design final Figma.

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
Logo placé stratégiquement dans l'entête de la page via Figma.
  • mettre le texte de notre numéro de téléphone en style H1 et le mettre en couleur bleue
Design du numéro de téléphone pour amélioration de l'interface.
  • dupliquer le texte du numéro et le modifier puis le mettre en style H2
Sous-titre ajouté pour complémenter le numéro de téléphone.
  • modifier la couleur de la zone de l’entête en blanc
Header de la page rendu blanc pour un look épuré avec Figma.
  • supprimer le bouton profil et le modifier comme suit
Création du design principal du bouton profil dans Figma.
  • 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
Ajout de détails au bouton profil pour un design plus riche.
  • 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
Conception du bouton de choix de langue pour facilité d'accès.

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 :

Présentation des plugins pour trouver des icônes via Figma.

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 :

 

Sélection d'icônes spécifiques pour l'entête dans Figma.

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 :

Deux nouvelles icônes intégrées au bouton profil avec Figma.

Modifions à présent les deux autres icônes comme ceci :

Icônes placées pour les boutons de langue et de téléphone.

Notre header devrait ressembler à ceci après :

Rendu complet de l'header après intégration des éléments avec Figma.

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.

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 :

Présentation des icônes pour la barre de recherche depuis les plugins Figma.

Pour la section Séjour, j’ai opté pour cette icône que vous ne trouverez pas dans les plugins

Icône de palmier non disponible dans les plugins, ajoutée manuellement.

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 :

Taille des icônes ajustée pour correspondre au texte et à l'espace.

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.

Zone de saisie verrouillée pour éviter les déplacements accidentels.


Après, nous allons mettre un peu de marge à gauche et à droite des icônes :

Marges ajoutées à gauche et à droite des textes et icônes.

Puis ajuster l’espacement au milieu entre les textes et finir en réduisant un peu la taille des icônes :

Espacement entre les onglets ajusté pour une meilleure navigation.

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.

Section surlignée en bleu pour attirer l'attention dans Figma.

Puis on va changer la taille du trait au milieu et changer sa couleur en gris.

Couleur du trait central changée en gris pour un style discret.

Pour chaque bouton filtre, nous allons faire ces manipulations suivantes :

Designs spécifiques appliqués aux filtres pour améliorer l'interface.
Rendu final des filtres après redesign complet avec Figma.

Et enfin, nous allons remplacer le texte Recherche par une icône en forme de loupe et mettre l’arrière-plan en bleu.

Bouton de recherche redessiné pour une intégration optimale avec Figma.

Intégration d'Images pour le Carrousel Figma

Ce n’est pas encore terminé. En effet, il nous reste à poser l’image pour notre carrousel dans la barre de recherche pour donner l’envie de voyager.

Vous pouvez choisir l’image que vous voulez sur des sites comme Unsplash ou Freepik etc. Mais moi j’ai choisi celle-là :

Image sélectionnée pour l'utilisation dans le carrousel de Figma.

Pour inclure la photo dans la zone conçue pour la barre de recherche, nous allons faire ainsi :

Image placée comme arrière-plan d'une forme spécifique dans Figma.

Il ne faut pas oublier d’harmoniser le tout en agrandissant les deux flèches à côté et les mettre en blanc.

Flèches colorées pour s'accorder avec le design global dans Figma.

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.

Aperçu du design final de la barre de recherche créé avec Figma.

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.

Contenu du titre pour offres spéciales modifié dans Figma.

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.

 

Icône d'éclair placée à côté du titre pour un effet visuel dans Figma.

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

 

Conception de la forme principale pour le fond du compte à rebours.
  • Dupliquez la forme précédente et supprimons uniquement les bordures à droite comme ceci :
Étiquette ajoutée à gauche du compte à rebours dans Figma.
  • Placez le tout sur le côté gauche du rectangle et placez l’icône en forme d’éclair comme sur la figure :
Texte pour compte à rebours ajouté et stylisé dans Figma.
  • Maintenant, ajoutons le contenu textuel comme l’exemple sur l’image et dupliquez le tout pour le reste :
Texte pour compte à rebours ajouté et stylisé dans Figma.

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.

Images de fond pour chaque carrousel intégrées avec Figma.

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.

 

Noms de villes placés sur les fonds de carrousels dans Figma.

Pour les points de navigation, rien de plus simple, on va juste changer la couleur en blanc tout comme les flèches de navigation.

Couleurs des points de navigation et flèches modifiées dans Figma.

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.

Modèle de texte appliqué pour les descriptions sous le carrousel.

Pour les deux autres, on va modifier le texte comme ceci :

Exemples de descriptions pour les carrousels élaborés dans Figma.

Bien, maintenant vous allons ajouter des icônes sous forme d’étoiles pour marquer l’avis sur la destination.

Évaluations des destinations sous forme d'étoiles ajoutées dans Figma.

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
Angles du bouton arrondis pour un design plus doux dans Figma.
  • Après cela, agrandir la taille de la police et bien centrer le tout
Texte du bouton agrandi pour une meilleure visibilité dans Figma.
  • Mettez la couleur de l’arrière-plan sur bleu et le tour est joué
Couleur finale du bouton appliquée pour un look distinctif avec Figma.

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.

Aperçu final de la section des offres spéciales conçue avec Figma.

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
Couleur du tableau changée et contour ajouté avec Figma.
  • Une fois fait, pour le texte on va changer comme ceci :
Texte de la première ligne du tableau modifié dans Figma.
  • Au niveau du prix, on ajoute un rectangle avec un fond jaune et on change la couleur de la police en blanc
Création d'un design pour le pourcentage de réduction avec Figma.
  • 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.
Ligne du tableau alignée et designée pour uniformité avec Figma.
  • Dupliquons le groupe qu’on vient de créer, et changeons aussi la flèche du bas de page avec l’icône
Refonte Principale du Tableau avec Figma

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.

 

Groupement des Éléments du Tableau dans Figma

Puis ajouter l’effet « Drop Shadow » comme ceci :

Tous les éléments du tableau groupés pour gestion simplifiée avec Figma.

Entre-temps, on va ajouter une couleur de background au niveau de la zone du tableau pour que ça soit moins vide :

Zone du tableau colorée pour distinguer clairement les sections.

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 :

Informations du tableau modifiées pour éviter la répétition.

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 :

Titre pour les offres promotionnelles modifié pour plus de pertinence.

Voilà, on a terminé pour notre tableau des offres promotionnelles, maintenant, passons à la vidéo de présentation.

 

Aperçu final de la section des offres promotionnelles designée avec Figma.

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.

Photo sélectionnée pour représenter la vidéo de présentation avec Figma.

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.

Boutons pause et play designés pour la vidéo de présentation dans Figma.

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 :

Sélection des icônes pour la vidéo de présentation réalisée avec Figma.

Puis colorer le tout en bleu avec les textes correspondants.

Avis et informations sur la page d'accueil colorés pour distinction avec Figma.

Il nous reste plus maintenant que notre footer et nous aurons fini avec la partie design.

Aperçu final de la partie vidéo de présentation conçue avec Figma.

Pour notre footer, nous allons tout simplement changer la couleur du background en bleu et la couleur des contenus en blanc comme ceci :

Couleurs de fond et des textes du footer modifiées pour harmonie avec Figma.

Ensuite, pour les moyens de paiement, on va prendre les icônes suivantes et les incorporer :

Sélection des icônes pour les moyens de paiement intégrées avec Figma.

Pareil pour les réseaux sociaux :

Sélection des icônes pour les réseaux sociaux effectuée avec Figma.

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.

 

Aperçu final de la page d'accueil après design complet avec Figma.

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.

Faire défiler jusqu'au frame contenant le design final dans Figma.

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.

Aperçu du Scroll avec Header Non Fixe dans Figma

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.

Souci de dimensions affichées en mode présentation dans Figma.

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

Ajustement de la taille du header pour couvrir toute la page dans Figma.

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.

Le header est placé en tête dans les calques pour priorité dans Figma.

Sélectionnez ensuite le header et aller dans le prototype pour fixer son emplacement.

Configuration du header pour qu'il reste fixe pendant le scroll dans Figma.

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.

Mesure des dimensions du frame pour ajustements dans Figma.

Puis désélectionner le, et allez dans un prototype. Dans device, choisissez custom size puis entrer la largeur correspondante :

Dimensions du frame entrées pour le mode présentation dans Figma.

Regardons maintenant ce que ça donne en mode Present :

Nouvel aperçu du mode présentation après correction des dimensions.

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.

 

Explication de comment passer en mode développement dans Figma.

Puis sélectionnez le frame et mettez-en Ready for dev :

Marquage du frame du design comme prêt pour le développement dans Figma.

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. 

Transformez vos idées en designs époustouflants avec Figma ! 🌟 Ne ratez pas notre formation vidéo détaillée qui vous guidera à travers chaque fonctionnalité de Figma. Plongez dans le monde du design avec Figma dès maintenant !

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.

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.
Laisser un commentaire