Guide Complet sur Figma

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

Dans cet article, nous allons mettre en pratique les compétences acquises en utilisant Figma dans un projet concret. Comme introduit précédemment dans le guide introductif de figma, nous aborderons comment designer efficacement un formulaire pour une Newsletter avec Figma, en exploitant pleinement les outils et techniques que vous avez appris.

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 :

Visuel montrant où se trouve le bouton Frame dans Figma.

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

 

Bouton pour l'installation des polices sous Windows dans Figma.

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
Icone du chercheur sur MacOS utilisé dans Figma.
  • 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 :

Rendu final d'un grand titre de projet dans Figma.

Alt + déplacer

Première méthode de duplication dans Figma avec la touche Alt.

Ici, vous devez juste maintenir la touche Alt de puis déplacer avec votre souris

Ctrl + D

Deuxième méthode de duplication dans Figma avec 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 :

Image du rendu final d'un titre accompagné d'un paragraphe dans Figma.

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.

Montrer comment glisser et déposer des éléments dans Figma.

Je vous propose donc maintenant de télécharger une illustration de Newsletter que vous voulez et d’essayer de reproduire ceci :

Rendu final d'une illustration importée dans Figma.

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 :
Image des boutons utilisés pour centrer les éléments dans Figma.
  • Pour vérifier l’alignement, vous pouvez maintenir sur Alt et mettre votre curseur hors de l’élément :
Astuce pour vérifier l'espacement entre les éléments dans Figma.
Astuce pour vérifier l'espacement entre les éléments dans Figma.
  • Vous pouvez aussi arranger la dimension de l’élément ou son emplacement directement :
Modifier la dimension et la position des éléments en pixels dans Figma.

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.

Infos : Dans le design, il faut utiliser en générale au plus de 3 couleurs à part le noir et le blanc.

Voici l’étape à suivre pour enregistrer votre palette dans Figma :

  • Veuillez appuyer sur l’endroit indiqué sur l’image pour créer votre style
Processus de création d'un style de couleur personnalisé dans Figma.
  • Puis attribuer à la couleur un nom et entrer sa valeur HEX ou utiliser le ColorPicker
Configurer les propriétés de couleur pour un style dans Figma.

Vous avez maintenant vos couleurs prêts à l’emploi, essayons de changer la couleur du titre avec la couleur principale :

Guide pour changer la couleur d'un titre dans Figma.

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
Appliquer une couleur de contour noir aux champs de texte dans Figma.
  • Modifier la couleur de fond en blanc
  • Arrondissez les coins pour que ça soit moins agressif
Comment arrondir les coins des champs de texte dans Figma.
  • 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.

 

Illustration d'un élément qui ne s'affiche pas correctement dans Figma.
Rendu final des champs de texte créés dans Figma.

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 :

Montrer le concept de superposition des calques dans Figma.

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.

Astuce pour mettre les textes en tête des calques dans Figma.

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
Vue de la forme générale d'un bouton dans Figma.
  • Entrer ensuite le texte S’abonner dedans avec une couleur blanche et une police inter bold.

Voilà, vous avez votre premier bouton totalement fonctionnel :

Premier bouton avec un texte intégré créé dans Figma.

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
Technique pour aligner horizontalement le texte à l'intérieur d'un bouton.
  • Puis cliquer sur l’autre bouton pour centrer verticalement
Comment aligner verticalement le texte dans un bouton sur Figma.

Vous devriez à la fin obtenir un bouton comme ceci :

Rendu final d'un bouton intégré dans un formulaire complet sur Figma.

Pour être plus précis, vous pouvez manipuler les valeurs en pixel :

Ajustement précis des valeurs en pixels pour les éléments sur Figma.

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 :

 

Processus de création d'un groupe d'éléments sur Figma.

À 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

 

Technique pour regrouper chaque partie d'un champ de texte sur Figma.

Assurer vous que les espacements entre chaque les labels et leurs champs de texte soit identiques et bien alignés.

Vous cherchez à approfondir vos connaissances dans le design de figma, nous vous recommandons cette formation vidéo : Formation Figma 

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

Apparence du mode preview dans Figma pour vérifier le design.

Pour y accéder, il suffit de cliquer sur ce bouton

Bouton pour activer le mode preview dans Figma.

Le mode preview vous permet de voir les changements que vous faites en temps réel sur votre design.

 

Mode Présentation

Vue finale du mode présentation dans Figma, idéal pour les démonstrations.

Comme pour le mode preview, il vous suffit d’appuyer sur ce bouton

Image du bouton d'accès au mode présentation dans Figma.

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 :

Comment étendre et enrichir le contenu d'un plan de travail dans Figma.

Vous pouvez alors défiler le contenu comme sur un smartphone :

Simulation du défilement de contenu sur un dispositif mobile dans Figma.

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 :

 

Vue des modes designer et développeur simultanément dans Figma.

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 :

Affichage des propriétés CSS dans le mode développeur de Figma.

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 :

 

Organisation d'un plan de travail dans une section 'Ready for Dev' dans Figma.
  • Dans le mode développeur :
    Appuyer la partie indiquée pour voir les derniers changements
Accès aux derniers changements dans le mode développeur de Figma.

Ici par exemple, nous montre que l’on a supprimée l’illustration

Exemple de changements visibles pour un développeur dans Figma.

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.

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.

 
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.