De nombreux designers rencontrent des difficultés pour créer des designs cohérents et efficaces dans Figma, notamm
Sans une compréhension claire de ces aspects, les projets peuvent sembler désorganisés, entraîner des erreurs de mise en page, et nuire à l’expérience utilisateur finale, entraînant frustration et perte de temps.
Dans cet article, nous vous guiderons à travers des étapes simples pour maîtriser les fonctionnalités essentielles de Figma, améliorer vos designs et garantir des résultats professionnels.
Premiers Pas dans l'Utilisation de Figma
Pour pouvoir bien travailler, il est d’abord important d’avoir tous les outils de travail en main. D’où la nécessité d’aborder dans cette partie, le choix de son plan de travail et le choix de police qui sera utilisée.
Choisir votre Plan de Travail pour l'Utilisation de Figma
Vous avez déjà vu dans l’article précédent, comment créer un plan de travail avec l’outil frame :
Choisissez le format pour un iPhone 14 et 15 pro max pour notre projet.
Sélection des Polices pour l'Utilisation de Figma
Le problème se pose comme ceci : « OK, il y a bien des polices prédéfinies dans Figma mais comment faire pour rajouter d’autres polices personnelles ? » Vous me posez cette question, moi je vous donne la réponse en suivant ces étapes :
- Choisissez parmi les sites web où pouviez télécharger les polices que vous voulez comme Dafont, Google-fonts(que l’on va utiliser comme exemple), Font-squirrel, etc….
- Rechercher dans la barre de recherche inter (pour l’exemple)
- Cliquer sur Obtenir la police
- Puis cliquer sur Télécharger tout
- Ouvrez le fichier .zip télécharger et double cliquer sur les polices à installer
Pour les utilisateurs MacOs, il y a un petit complément sur l’installation des polices :
- Faites juste un double clic sur le fichier de police (ex .ttf) dans le chercheur
- Puis terminer en cliquant sur installer dans la nouvelle boîte de dialogue qui apparaît.
Une fois tout cela terminé, redémarrez Figma et toutes vos polices doivent y apparaître.
Création de Texte dans Figma
Maintenant que vos polices sont installées, il est temps de les utiliser en créant votre titre et votre premier paragraphe pour le projet.
Conception de Titres pour l'Utilisation de Figma
Comme pour le plan de travail tout à l’heure, ceci sera sous forme de petit exercice. Souvenez-vous de comment créer une zone de texte juste en faisant un clic sur le plan de travail. Mettez le titre Newsletter avec la police Inter Bold avec une taille de 24. Vous devriez arriver à ce même résultat :
Écriture de Paragraphes dans Figma
Il y a une pratique la plupart utilisée, qui est la duplication pour créer d’autres zones de texte à partir d’une qui est déjà créée : « Ouais, parce que nous autres designers on doit économiser du temps » donc je vous propose deux façons de faire des duplications dans Figma :
Alt + déplacer
Ici, vous devez juste maintenir la touche Alt de puis déplacer avec votre souris
Ctrl + D
Sélectionner la zone de texte correspondante et faite un Ctrl + D puis tirer
À présent, appliquer ce que vous venez d’apprendre en créant un paragraphe à partir du titre. Mettez-y le texte « On se donne rendez-vous dans votre boîte mail » avec la police Inter medium et une taille 14 pour aboutir à ce résultat :
Gestion des Éléments pour l'Utilisation de Figma
Très bien, à présent nous avons besoin d’inclure une illustration pour notre formulaire, je vous montre alors deux techniques les plus simples et rapides pour le faire.
Importation d'Éléments pour l'Utilisation de Figma
La première c’est tout simplement de faire un glisser – déposer dans votre projet de l’illustration que vous avez ou tout simplement de le copier et vous le coller (Ctrl + V) dans votre espace de travail.
Je vous propose donc maintenant de télécharger une illustration de Newsletter que vous voulez et d’essayer de reproduire ceci :
Centrage et Alignement des Éléments dans Figma
Pour que votre design soit le plus réussi aux yeux des utilisateurs, il va falloir apprendre à bien placer les éléments sur votre plan. Voici quelques méthodes simples pour pouvoir les centrer :
- Utiliser les fonctions prédéfinies de Figma :
- Pour vérifier l’alignement, vous pouvez maintenir sur Alt et mettre votre curseur hors de l’élément :
- Vous pouvez aussi arranger la dimension de l’élément ou son emplacement directement :
Essayer donc d’appliquer cela à votre illustration pour bien la positionner(centrer).
Intégration de Votre Palette de Couleurs pour l'Utilisation de Figma
Une des choses importantes que nous allons mettre dans le projet maintenant c’est la palette de couleur pour embellir notre design.
Vous pouvez choisir des palettes sur le web mais faites attention qu’il soit en accord avec celui de votre illustration.
Voici l’étape à suivre pour enregistrer votre palette dans Figma :
- Veuillez appuyer sur l’endroit indiqué sur l’image pour créer votre style
- Puis attribuer à la couleur un nom et entrer sa valeur HEX ou utiliser le ColorPicker
Vous avez maintenant vos couleurs prêts à l’emploi, essayons de changer la couleur du titre avec la couleur principale :
Dessin de Formes pour l'Utilisation de Figma
Vous avez déjà vu comment créer des formes , vous allez maintenant appliquer vos connaissances pour créer 3 champs de texte :
- Dessiner d’abord un rectangle
- Ajouter une couleur de contour noir
- Modifier la couleur de fond en blanc
- Arrondissez les coins pour que ça soit moins agressif
- Ajouter ensuite des labels et aligner le tout.
Vous devriez obtenir ceci à la fin :
Compréhension de l’Ordre des Calques dans Figma
Dans cette partie, nous allons nous intéresser à l’ordre des calques, comment ils sont positionnés et pourquoi les positionner dans l’ordre bien évidemment. Pour ce faire, nous allons insérer des « Placeholder » (Texte de substitution) dans les champs de texte.
Marie a disparu ?
L’une des plus grandes erreurs quand on fait du design c’est de voir un élément qui ne s’affiche pas alors qu’elle est bien créée. Comme ici, le texte Marie ne s’affiche pas.
Pour comprendre, sachez que chaque élément est représenté par un calque et chaque calque est rangé dans l’ordre à droite de votre espace de travail, du plus haut vers le plus bas :
Pour éviter donc de faire disparaitre Marie, il est préférable de la placer (et les autres zones de texte) en tête sur la liste des calques.
Création de Votre Premier Bouton avec Figma
Notre formulaire a maintenant besoin d’un bouton pour valider les informations entrées par l’utilisateur. Mais « Comment créer un bouton ? » me diriez-vous. Voici une formule simple : BOUTON = FORME + TEXTE, allez je vous montre comment faire :
- Créer une forme rectangulaire pour votre bouton
- Ajouter une couleur de fond de votre palette au bouton (pour qu’il soit bien impactant)
- Arrondissez les bordures et vous devriez obtenir ceci
- Entrer ensuite le texte S’abonner dedans avec une couleur blanche et une police inter bold.
Voilà, vous avez votre premier bouton totalement fonctionnel :
Comment bien centrer le texte ?
Pour bien centrer votre texte dans le bouton, la méthode la plus simple c’est de sélectionner les deux éléments et d’utiliser les boutons prédéfinis dans Figma :
- Appuyer d’abord sur ce qu’indique l’image pour centrer horizontalement
- Puis cliquer sur l’autre bouton pour centrer verticalement
Vous devriez à la fin obtenir un bouton comme ceci :
Pour être plus précis, vous pouvez manipuler les valeurs en pixel :
Formation Figma UX/UI 1/4 : Maîtriser le Design d’interfaces UX/UI
Initiez-vous au design d'interfaces et créez des expériences utilisateur intuitives !
Groupes dans Figma : Optimisation de l'Utilisation
Un groupe c’est tout simplement, un groupe d’élément classer ensemble qui vous permet d’éviter les répétitions et de bien structurer vos éléments.
Par exemple, pour votre bouton, il nous suffira de sélectionner la forme et le texte et d’appuyer sur Ctrl + G. Il suffit de le renommer en bouton pour le préciser aux développeurs :
À vous maintenant de créer des groupes pour les champs de texte que nous avons créés avant :
- Grouper d’abord chaque placeholer avec la forme correspondante
- Puis grouper chaque label avec le champ de texte
Assurer vous que les espacements entre chaque les labels et leurs champs de texte soit identiques et bien alignés.
Exploiter le Mode Présentation pour l'Utilisation de Figma
Maintenant que vous avez fini le design, vous pouvez le tester en vous mettant en mode présentation. Pour cela il y a deux façons de s’y prendre :
Mode preview
Pour y accéder, il suffit de cliquer sur ce bouton
Le mode preview vous permet de voir les changements que vous faites en temps réel sur votre design.
Mode Présentation
Comme pour le mode preview, il vous suffit d’appuyer sur ce bouton
Comme pour le mode preview, il vous suffit d’appuyer sur ce bouton
Maintenant essayer de faire la manipulation suivante sur votre plan de travail puis de regarder dans le mode présentation :
Vous pouvez alors défiler le contenu comme sur un smartphone :
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
Découverte du Mode Développeur pour l'Utilisation de Figma
Figma permet une bonne collaboration entre designer et développeur pour faciliter l’intégration du code.
Pour entrer en mode développeur, il faut juste appuyer sur le bouton dans la figure suivant :
La fonction de base est bien sûr de pouvoir regarder le code CSS de chaque élément pour gagner du temps en développement :
Une autre dernière fonctionnalité c’est de pouvoir mettre votre plan dans une section et de le mettre en Ready for Dev dans le mode designer pour que les développeurs puissent voir les derniers changements sur le plan dans le mode développeur :
- Dans le mode Designer :
- Dans le mode développeur :
Appuyer la partie indiquée pour voir les derniers changements
Ici par exemple, nous montre que l’on a supprimée l’illustration
Nous voilà maintenant à la fin de cet article, où nous avons réalisé pas à pas notre projet tout en parcourant les principes du webdesign. Vous pouvez être très fier de vous, n’arrêtez pas de pratiquer et d’essayer de créer de nouveaux projets pour bien assimiler tout ce que nous avons appris.
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 appliquant les compétences acquises dans cet article, vous êtes désormais prêt à concevoir des formulaires de newsletter efficaces en utilisant Figma. Cette exploration approfondie des outils et techniques de Figma vous habilite à optimiser vos projets de design. Pour aller encore plus loin, découvrez notre prochain article sur la création d’un site pour agence de voyage avec Figma, et continuez à perfectionner vos compétences en design.
