Tutoriel Wireframe Figma: Guide Complet

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

Bienvenue dans notre guide complet sur la création de wireframes Figma pour les débutants. Dans cet article et après l’identité visuelle que nous avons fait, nous allons explorer les étapes essentielles pour concevoir des wireframes efficaces en utilisant Figma, un outil puissant et intuitif pour le design UX/UI. Que vous soyez novice ou que vous souhaitiez améliorer vos compétences, ce tutoriel vous aidera à maîtriser les bases et à créer des wireframes professionnels avec Figma.

Utiliser la grille pour le wireframe dans Figma

Premièrement, nous devons créer un fichier design car on a toujours travaillé dans Figjam.

Interface de création d'un fichier design dans Figma

Puis créer un frame avec les dimensions d’un appareil mobile. Dans mon cas, j’ai pris celui de l’iphone 13 mini mais vous pouvez très bien utiliser un autre modèle.

Si vous avez oublié comment créer des grilles dans Figma, jetez un coup d’œil à la figure suivante.

 

Définition des dimensions du frame dans Figma

Maintenant vous allez mettre en place deux grille avec les propriétés ci-dessous :

Réglages des propriétés de grille dans un frame Figma

Vous devriez obtenir ce résultat à la fin :

Vue de la grille appliquée dans un frame Figma

Créer le wireframe de la page d’accueil avec Figma

Place maintenant au design de notre wireframe en commençant par notre page d’accueil. Tout d’abord, il faut définir la partie où nous allons placer notre logo comme ceci.

Positionnement du logo sur la page d'accueil du frame Figma

Puis ajouter un petit texte en Gotham Bold pour accueillir les visiteurs comme suit :

Exemple de texte de bienvenue inséré dans un frame Figma

Puis mettre les formes pour le lien vers les autres pages de l’application grâce à des rectangles

Principaux éléments ajoutés sur la page d'accueil du frame Figma

Il suffit de bien ajuster les éléments entre eux, ajouter les textes pour chaque forme le tour est joué.

Wireframe complet de la page d'accueil dans Figma

Bien sûr, il ne faut pas oublier de renommer notre frame.

Interface de renommage des frames dans Figma

Vous avez cette curiosité de découvrir plus de dimensions sur Figma, nous vous recommandons notre formation vidéo : Cliquez ici

Continuons à présent le design de notre page d’accueil mais cette fois-ci nous allons nous intéresser au footer (pied de page).

Pour cela nous allons d’abord placer un rectangle en signe de bande de séparation au pied de la page.

 

Ajout d'une zone pour le footer dans un frame Figma

Puis prenons l’outil ellipse et plaçons 5 cercles comme ceci avec un bon alignement :

Création des ellipses pour le footer dans un frame Figma

Terminons le tout avec les textes correspondants à chaque lien renferment les ellipses.

Nommer les ellipses dans le footer avec les liens Figma

Wireframe de la page Alertes

Pour le wireframe de cette page, c’est simple nous allons dupliquer la page d’Accueil et faire quelques changements.

Réglage des éléments pour la page Alertes dans Figma

Les éléments principaux de notre page sera représenté comme ceci :

Contenu détaillé de la page Alertes dans un frame Figma

Et on duplique cela pour finaliser le tout.

Wireframe complet de la page Alertes dans Figma

Wireframe de la page Historique avec Figma

Comme tout à l’heure, il nous suffira de dupliquer la page Alertes et procéder à des modifications élémentaires.

Wireframe complet de la page Alertes dans Figma

Pour le contenu principal on va juste supprimer les ellipses de la page Alertes et modifier le texte.

Réglage des éléments pour la page Historique dans Figma

On va garder le rectangle pour mettre des logos, par exemple, pour le relevé de température on va mettre un logo indiquant cela.

Contenu détaillé de la page Historique dans un frame Figma

Wireframe de la page Réglage dans Figma

 

Comme toujours, on va dupliquer la page Historique et changer le titre ainsi que le footer.

Réglage des éléments pour la page Réglages dans Figma

Après il nous suffira juste d’effacer les icônes pour chaque élément du contenu principal et de changer les textes par rapport aux différents réglages qui seront présents dans l’application.

Contenu détaillé de la page Réglages dans un frame Figma

Wireframe du Chatbot avec Figma

Peut-être que vous allez me demander : pourquoi a-t-on besoin d’un chatbot dans notre application ? C’est une très bonne question, les utilisateurs peuvent parfois rencontrer des problèmes avec les fonctionnalités se trouvant dans l’application. Au lieu de contacter le support technique, on a mis en place le chatbot pour répondre à des questions basiques et fréquemment utilisées (FAQ).
Créons un nouveau frame avec un titre Chatbot comme pour les autres pages mais sans le logo.

Placement du titre sur la page Chatbot dans un frame Figma

Puis on va designer le champ de saisie comme ceci :

Wireframe du champ de saisie dans un frame Figma

On va, par la suite, placer quelques formes pour illustrer une conversation dans le chatbot.

Exemple d'interaction utilisateur dans le Chatbot de Figma

Et enfin mettre une croix sur l’entête à l’aide de l’outil line pour montrer que l’on peut fermer ce chat.

Bouton de fermeture du Chatbot dans un frame Figma

Vous devriez obtenir ceci à la fin :

Vue finale du wireframe du Chatbot dans Figma

Wireframe de la page Livraison avec Figma

Nous avons terminé toutes les pages en relation avec le footer. Passons maintenant à ceux reliés à la page d’accueil en commençant par la page Livraison.

Pour cela nous allons dupliquer la page d’accueil et changer l’entête comme ceci :

Modification de l'entête de la page Livraison dans Figma

Après cela, il faut changer le contenu principal par un tableau pour marquer un calendrier. Pour y arriver, utiliser des rectangles ainsi que des lignes.

Création de la forme du calendrier dans un frame Figma

Il ne faut pas oublier d’ajouter les dates pour que notre calendrier soit convaincant.

Détails du calendrier incluant dates et jours dans Figma

Enfin, on va finir par mettre des éléments pour marquer les dernières livraisons récemment faites.

Ajout des dernières opérations dans un frame Figma

Wireframe de la page Réception

Pour cette page-là, nous allons tout simplement dupliquer la page Livraison et changer le texte dans la partie qui contiendra le logo pour la livraison.

Modification de l'entête de la page Réception dans Figma

Pour le contenu de la page, nous allons le modifier pour qu’on obtient à chaque colis reçus une partie qui est dédiée à celle-ci.

 

Contenu détaillé de la page Réception dans un frame Figma

Vous pouvez trouver l’icône sous forme de flèche dans le plugin Font Awesome Icônes.

Utilisation du plugin Font Awesome Icons dans Figma

Wireframe de la page Étiqueteuse

C’est maintenant le tour de la page Étiqueteuse d’avoir son propre wireframe. Pour y parvenir, on va commencer par dupliquer la page Réception et changer le texte pour le logo.

Ajout des informations produit dans l'étiqueteuse Figma

Ensuite, on ajoute un élément pour indiquer la date limite de consommation ainsi que le nom du produit correspondant comme suit :

 

Modification de l'entête de la page Étiqueteuse dans Figma

Pour terminer, ajouter un bouton qui permettra d’imprimer l’étiquette.

Wireframe finalisé de l'étiqueteuse dans Figma

Wireframe de la page Stock

Nous voici à présent sur le design de la page Stock qu’on va créer à partir de la page Réception car les deux sont à peu près pareil.

Il nous suffit juste de modifier le titre du logo et chaque élément du contenu principal par les marchandises dans le stock.

Contenu détaillé de la page Stocks dans un frame Figma

Finaliser le tout en ajoutant une icône dans Font Awesome Icons pour ajouter d’autres tache à faire.

Bouton pour ajouter du contenu dans un frame Figma

Wireframe de la page Ménage avec Figma

On est arrivé à l’avant dernière page qu’il faut designer dans la partie de la page d’accueil de notre projet. Dupliquons premièrement la page Stock et modifions le titre dans le logo.

 

Modification de l'entête de la page Ménage dans Figma

Et modifions le texte dans chaque élément de tel sorte qu’on obtient les appareils dont il faut faire le ménage.

 

Exemples de contenu pour la page Ménage dans Figma

Wireframe de la page Température avec Figma

Pour terminer cette partie sur les wireframes, nous allons designer la page dédiée à la température. Comme toujours on va dupliquer la page Ménage, changer le titre du logo.

Modification de l'entête de la page Température dans Figma

Modifier le texte inscrit dans chaque bloc pour obtenir ceci.

Wireframe finalisé de la page Température dans Figma
Exemples de contenu pour la page Ménage dans Figma

Voilà voilà, on a terminé ce chapitre à propos des wireframes de notre projet où nous avons fait le wireframe de notre page d’accueil, du footer et de chaque page liée à la page d’accueil. Dans le chapitre suivant, nous allons commencer à utiliser les composants dans un design dans Figma.

Conclusion

Nous espérons que ce guide sur la création de wireframes avec Figma pour les débutants vous a été utile. En suivant ces étapes, vous serez en mesure de concevoir des wireframes clairs et fonctionnels pour vos projets. Figma offre de nombreuses fonctionnalités pour simplifier le processus de design, et maîtriser cet outil peut grandement améliorer votre efficacité et la qualité de vos créations.

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.