Transformer des wireframes en designs cohérents peut rapidement devenir un casse-tête sans une approche structurée.
Un processus mal organisé entraîne des pertes de temps, des incohérences visuelles, et complique la maintenance des interfaces, ce qui nuit à l’expérience utilisateur.
Cet article vous guide à travers l’utilisation de composants réutilisables dans Figma, pour concevoir des pages de manière efficace, en minimisant les erreurs et en optimisant votre flux de travail.
Design de l’Arrière-plan avec Figma
Pour notre arrière-plan, vous pouvez chercher sur internet un design qui vous plaît et que vous allez modifier par la suite pour être en cohérence avec notre thème. De mon côté, j’ai trouvé l’image suivante sur Freepik qui me semble intéressant :
Bien sûr, nous allons le télécharger et modifier le fichier .ai dans Adobe illustrator en enlevant les textes et changeant les couleurs oranges en vert :
Exporter ensuite sous formats .svg. Pour y arriver dans illustrator, aller dans Fichier > Exporter > Exporter sous… > Type et choisissez .svg.
Dirigeons-nous maintenant dans Figma et créons un frame de même dimension que les autres puis ajoutons la figure modifiée et ajustez le tout selon votre désir.
Il ne faut pas oublier de verrouiller le plan pour la suite pour ne pas être modifié lors du design figma :
Création de la Page d’Accueil sur Figma
Une fois notre arrière-plan posé, nous pouvons à présent commencer à designer notre page d’accueil.
Pour commencer les festivités, il faut dupliquer le frame contenant l’arrière-plan et y ajouter les éléments du wireframe de la page d’Accueil.
Puis nous allons placer le footer :
- Commencer par supprimer les wireframes :
- Naviguer dans Assets et ajouter le composant du footer dans le frame :
- Choisissez la variante que nous avons définie pour la page d’accueil et ajustez l’emplacement :
Tadam ! Notre footer est prêt, voyez à quel point les composants Design sont nécessaires dans la création d’un design.
Faites la même démarche pour les boutons de la page d’accueil avec le composant bouton livraison qu’on a créée.
Faites correspondre chaque bouton avec les différentes variantes du composant.
Pour terminer notre page d’accueil, il nous manque notre logo. Et oui celui qu’on a designé dans Illustrator, vous vous souvenez ? Intégrons-le dans Figma pour commencer :
Puis prenons les éléments du logo du dessous, groupons ces éléments et copions-le dans la page d’accueil.
Mettez par la suite le logo dans le wireframe et ajustez sa taille avec le reste.
Supprimez les éléments du wireframe et n’oubliez pas de centrer le logo.
C’est terminé ! Du moins pour notre page d’Accueil. Passons à présent au design figma de la page Alertes.
Design de la Page Alertes avec Figma
Une fois la page d’Accueil terminée, nous allons passer au design figma de la page Alertes :
Commençons, par dupliquer le frame Arrière-plan et copions les éléments du wireframe de la page Alertes :
Maintenant, remplacer le wireframe du logo en copiant le logo déjà créé dans la page d’Accueil.
Changez ensuite l’emplacement du texte Alertes et mettez-le en 20px :
Puis ajouter le footer correspondant à notre page comme ceci :
Et enfin, pour les informations dans la page, on va procéder ainsi :
- Colorez l’arrière-plan du rectangle en blanc et arrondissez les bordures de 8px :
- Ajoutez l’icône ménage à la place du petit rectangle à côté et n’oubliez pas de bien le positionner :
- Dans l’autre partie du rectangle, transformer l’ellipse comme sur la figure en ajoutant un contour et en enlevant la couleur au centre. Puis ajouter l’icône alerte :
Grouper puis dupliquer le tout pour remplir le reste de la page :
Conception de la Page Historique dans Figma
Directement après la page Alertes nous allons designer la page Historique :
On refait les étapes récentes en copiant la page Arrière-plan et en ajoutant les wireframes de la page Historique.
Faites les mêmes manipulations qu’avec la page Alertes :
- Placez le logo
- Ajouter le titre de la page à la même hauteur que celui de la page d’Alertes
- Intégrer le footer correspondant
Ensuite pour les informations de la page, copier celui de la page Alertes créée avant :
Puis changer l’icône à droite par celui de l’icône historique :
Terminer le tout en copiant l’élément créé et en changeant le texte et l’icône dans chaque cas
Formation Figma UX/UI 3/4 : Maîtriser le design interactif
Transformez vos maquettes en expériences interactives captivantes et engageantes !
Configuration de la Page Réglages sur Figma
C’est maintenant le tour de la page Réglage d’avoir son design figma :
On revient donc au même processus que la dernière fois :
- Copier la page Arrière-plan et ajouter les wireframes de la page réglage
- Placez le logo
- Ajuster le titre de la page
- Mettre en place le footer
Pour terminer, ajouter un texte en dessous pour indiquer la version de l’application
Suite à cela, reproduisez le design figma du rectangle vu récemment et appliquez à ceux de la page réglage :
Création de la Page Chatbot avec Figma
On s’attaque maintenant au design figma de la page Chatbot après celui de la page Réglage :
Comme toujours, reprenez les étapes suivantes pour le design figma de cette page :
- Dupliquer la page Arrière-plan et ajouter les wireframes
- Copier le logo dans la page
- Modifier l’emplacement du titre et sa taille
Spécifiquement pour le bas de cette page, on a designé la barre de message que nous allons ajouter :
Pour la discussion dans le chatbot, on va venir apporter quelques modifications :
- Changer d’abord, l’icône du bot par ceci
- Puis modifier la couleur et la bordure du rectangle où se situera le texte
- Ajouter un petit rectangle et modifier ces lignes avec l’outil plume pour affiner le design figma des messages envoyés
- Sélectionner les deux formes et cliquer sur Union selection
- Dupliquer le tout un peu plus bas et inverser la forme crée
- Ajouter les textes de la discussion pour finaliser le tout et modifier l’opacité de ces zones de texte à 80%
Design du Header dans Figma
Nous avons jusqu’à présent fait le design figma des pages principales se situant dans le footer. À présent il est temps de passer à celles qui sont dans la page principale. Mais avant toute chose, il faut qu’on définisse le design du header que l’on va créer pour chaque page.
Bien sûr pour nous faciliter la vie, on va créer un composant !!
Donc on va commencer par copier le wireframe du header dans notre design figma system :
Ensuite, on ajoute les bordures et l’effet shadow comme pour les autres boutons :
Copier le logo et le texte de l’ancien bouton dans ce dernier :
Grouper les éléments, sélectionner le groupe créé puis cliquer sur le bouton Create component.
Créer ensuite les deux propriétés icône et texte et rattacher les valeurs avec ces derniers :
Maintenant faites un essaie avec les différentes icônes pour voir si ça fonctionne et pour faire quelques ajustements :
Création de la Page Livraison sur Figma
On a notre header, alors on va commencer directement par le design figma de notre page Livraison
Comme toujours, on va dupliquer la page Arrière-plan, rajouter les wireframes et placer le footer. Ce qui va nous donner ceci :
Placer ensuite le header pour la page livraison :
Pour notre calendrier, il y aura quelques modifications que nous devrons effectuer :
- Ajuster d’abord les chiffres et la couleur du tableau comme ceci :
- Ajouter une bordure supérieure pour le rectangle contenant les jours de la semaine et réduire l’opacité des lignes entre chaque rangée de dates :
- Pour marquer la date actuelle, ajouter une ellipse verte au niveau du texte et changer la couleur du texte correspondant :
- Puis indiquer avec des petites ellipses sur les jours où vous avez reçu une livraison :
Pour finir, ajuster tout le reste comme sur la figure suivante :
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
Design de la Page Réception avec Figma
Passons directement à la page réception qui ne va pas nous prendre beaucoup de temps :
Comme on l’a fait un peu plus haut, il faut qu’on :
- Dupliquer la page Arrière-plan
- Ajouter les éléments du wireframe de la page Réception
- Ajouter le footer et le header
On devrait obtenir ceci à la fin :
Dirigez-vous ensuite dans le Design system et copier les exemples qu’on déjà crée avec le composant bouton colis :
Copiez-les dans la page Réception en faisant attention à changer le numéro de chaque bouton :
Terminer le tout en ajoutant le bouton Ajouter en bas de la page :
Conception de la Page Étiqueteuse sur Figma
Maintenant pour la page étiqueteuse, on recommence par les étapes tout à l’heure :
- Dupliquer la page Arrière-plan
- Ajouter les éléments du wireframe de la page Étiqueteuse
- Placer le footer et le header
Pour arriver à ceci :
Ajouter par la suite le composant étiqueteuse :
Comme vous le voyez, le design figma n’est pas très bien visible donc on va faire quelques changements dans notre composant. Pour cela, changez juste la couleur des rectangles pour obtenir ceci :
Puis ajouter le bouton impression dans la page de l’Étiqueteuse pour avoir le rendu final :
Gestion de la Page Stock avec Figma
C’est au tour de la page Stock d’avoir son design figma. Répétons les étapes précédentes :
- Dupliquer la page Arrière-plan
- Ajouter les éléments du wireframe de la page Stock
- Placer le footer et le header correspondant
Intégrer les exemples dans le Design system qu’on a fait pour le bouton stock à partir du bouton colis à la place des wireframes.
N’oubliez pas de changer le texte pour ces derniers.
Finaliser le tout en ajoutant le bouton Ajouter à la fin.
Design de la Page Ménage dans Figma
Pour la page Ménage, les étapes sont les mêmes que celui de la page Stock :
- Dupliquer la page Arrière-plan
- Ajouter les éléments du wireframe de la page Ménage
- Placer le footer et le header
- Ajouter les exemples qu’on a déjà créés dans le Design system
- Ne pas oublier de mettre le bouton Ajouter
Conception de la Page Température avec Figma
Pour terminer cette partie sur le design figma de notre application, nous allons réaliser celui de la page Température en suivant les mêmes étapes que les deux pages précédentes :
- D’abord, crée le frame avec les éléments du wireframe. Puis ajouter le header et le footer
- Copier les composants correspondants à la page Température dans le Design system
- Et finir avec le bouton Ajouter
C’est ici que se termine la fin de cet article où nous avons transformé nos wireframes en design figma visuel. Si vous l’avez constaté, on a pu gagner énormément du temps en utilisant les composants que si l’on avait fait tout à la main. Dans le prochain article, nous allons exploiter un autre avantage des composants dans le prototypage de notre application.
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 suivant les étapes décrites dans cet article, vous serez capable de créer des designs professionnels et cohérents pour vos applications web en utilisant Figma. L’utilisation de Figma permet non seulement de gagner du temps, mais aussi d’assurer une grande flexibilité et précision dans vos designs.
Continuez à explorer et à expérimenter avec Figma pour perfectionner vos compétences en design et créer des interfaces utilisateur exceptionnelles. Et par la suite nous aborderons le sujet de prototypes Figma.
