Maîtriser Figma de A à Z : le guide complet

1. Objectifs

   • Comprendre ce qu'est Figma, à quoi il sert et quelle offre choisir
   • Se repérer dans l'interface : pages, calques, canevas, barre d'outils, onglets « Design » et « Prototype »
   • Dessiner avec les frames, les formes, le texte et les images ; organiser les calques
   • Maîtriser l'alignement, les contraintes, les grilles et l'auto layout (Hug, Fill, Fixed)
   • Construire un système réutilisable : styles, variables, composants, variantes et propriétés
   • Réaliser un prototype complet : connexions, overlays, défilement, composants interactifs, Smart animate
   • Collaborer, gérer les versions, exporter et préparer le passage au code
   • Organiser un fichier propre et travailler vite grâce aux raccourcis

1. Présentation

   • Cette leçon est un guide complet, pensé pour des étudiants qui n'ont jamais ouvert Figma. Elle part de la question « Figma, c'est quoi ? » et va jusqu'aux fonctions utilisées par les designers professionnels : composants à variantes, auto layout imbriqué, variables, prototypes interactifs.
   • Elle est organisée en six parties et suit un fil rouge : la construction complète de l'application BiblioCampus. Chaque notion est expliquée, illustrée, puis mise en pratique dans un exemple pas à pas. Prévoyez plusieurs séances : lisez une partie, reproduisez les manipulations dans Figma, puis passez à la suivante.
   • Conseil de travail : gardez Figma ouvert dans un onglet et cette leçon dans un autre. Ne vous contentez pas de lire, refaites chaque geste.

• Nous continuons avec BiblioCampus, notre application fictive de réservation de livres. Pour les activités, créez le dossier 30-maitriser-figma/ dans votre dépôt GitHub ui-ux-design-bts.

1. Partie 1 : découvrir Figma

   • Avant de dessiner, il faut savoir ce qu'est l'outil, ouvrir un compte et se repérer dans l'interface.

1. Figma, c'est quoi ?

   • Figma est un logiciel de design d'interfaces qui fonctionne dans le navigateur (une application de bureau existe aussi). Tout est enregistré en ligne, automatiquement :

• Figma remplace à lui seul plusieurs outils : un logiciel de dessin pour les maquettes, un outil de prototypage, et un espace de partage avec l'équipe et les développeurs.
• Dans cette leçon, les termes de l'interface sont donnés en anglais, entre guillemets (« Fill », « Auto layout »…) : c'est le vocabulaire utilisé par les designers et dans la documentation. Figma peut aussi s'afficher en français (« Brouillons », « Sans titre », « Récents »…) : si un nom ne correspond pas, cherchez son équivalent français, ou passez l'interface en anglais dans les paramètres de votre compte pour suivre la leçon à l'identique.

1. Créer un compte et choisir son offre

   • Figma propose plusieurs offres. Pour apprendre, la gratuite suffit :

• Créez votre compte sur figma.com → « Sign up ». Si votre établissement vous a fourni une adresse e-mail, utilisez-la : c'est obligatoire pour demander l'offre Education.
• Travaillez dans vos brouillons (« Drafts », « Brouillons » en français) : le nombre de fichiers n'y est pas limité, même avec l'offre gratuite. En revanche, l'offre Starter limite chaque fichier d'équipe à 3 pages et n'autorise que 3 fichiers Design dans le projet d'équipe : c'est une raison de plus de demander l'offre Education, gratuite pour les étudiants.

1. L'écran d'accueil

   • Après connexion, vous arrivez sur l'écran d'accueil :

• Pour créer un fichier, cliquez sur le bouton « Design » (icône bleue) dans la rangée de boutons en haut de l'écran d'accueil, à côté de « FigJam », « Slides » et « Make » : un fichier vierge s'ouvre dans un nouvel onglet.
• Deux autres méthodes donnent le même résultat : depuis vos brouillons, cliquez sur « + Create » (en haut à droite) puis « Design » ; ou tapez simplement figma.new dans la barre d'adresse du navigateur.
• Renommez le fichier tout de suite : en haut à gauche de la fenêtre, double-cliquez sur son nom (« Untitled » ou « Sans titre »), tapez « BiblioCampus – Prénom Nom » puis appuyez sur Entrée.

1. L'interface d'un fichier

   • Un fichier Figma s'organise en six zones. Prenez le temps de les repérer : toute la suite de la leçon y fait référence :

• La zone ⑥ change selon ce qui est sélectionné : c'est le cœur de Figma. Prenez l'habitude de regarder ce panneau après chaque clic.
• Les pages (zone ②) sont comme les onglets d'un classeur : une page « Wireframes », une page « Maquettes », une page « Composants »…
• La barre latérale (zone ①) choisit ce qu'affiche le panneau de gauche : « Fichier » (pages et calques), « Ressources » (composants et bibliothèques, l'ancien onglet « Assets »), « Outils » (plugins), « Variables »… L'icône Figma tout en haut ouvre le menu principal.

1. Se déplacer et sélectionner

   • Le canevas est infini : il faut savoir s'y déplacer rapidement :

• Si vous êtes perdu sur le canevas, appuyez sur Maj+1 : Figma affiche tout le contenu de la page.

1. Partie 2 : dessiner

   • Cette partie présente les outils de base : frames, formes, texte, images, calques, contraintes et grilles.

1. La barre d'outils

   • Chaque outil a une touche de raccourci. Les apprendre fait gagner un temps considérable :

1. Frame, groupe ou section

   • La notion la plus importante de Figma est le frame. Il ne faut pas le confondre avec le groupe et la section :

• Pour créer un écran de téléphone : touche F, puis dans le panneau de droite choisir un format prédéfini (par exemple « Android Compact », 412 × 917, ou « iPhone 16 », 393 × 852). On peut aussi taper une taille sur mesure, par exemple 360 × 800.
• Un frame peut contenir d'autres frames : un écran contient un en-tête, qui contient une icône et un titre. C'est cette imbrication qui permet l'auto layout.

1. Formes et propriétés

   • Toute forme se règle dans l'onglet « Design », de haut en bas :

• « Fill » est le remplissage (couleur, dégradé ou image) ; « Stroke » est le contour ; « Effects » regroupe ombres et flous. Le « + » de chaque section ajoute une couche, le « − » la supprime.
• De haut en bas, le panneau affiche : « Position » (alignement, X, Y, rotation), « Layout » (largeur W et hauteur H), « Appearance » (opacité et rayon des coins), puis « Fill », « Stroke » et « Effects ». L'opacité et le rayon des coins se règlent donc dans « Appearance ».
• La couleur se saisit en hexadécimal (#1565C0) ; l'opacité à côté, en pourcentage.

1. Le texte

   • L'outil Texte (T) crée des blocs de texte. Leur typographie se règle dans l'onglet Design :

• Choisissez une police lisible sur écran (Inter, Roboto, Open Sans) et limitez-vous à deux polices par projet au maximum.
• Taille minimale conseillée sur mobile : 14 pour le texte courant, 12 pour les légendes.

1. Les images

   • Dans Figma, une image est toujours le remplissage d'une forme :

1. Les calques

   • Chaque élément de l'écran est un calque, rangé dans un arbre :

• Un fichier aux calques bien nommés se comprend sans l'ouvrir : c'est indispensable quand on travaille en équipe ou qu'on le rend à l'enseignant.

1. Aligner, répartir et contraindre

   • Figma aide à placer les éléments avec précision :

1. Les grilles de mise en page

   • Une grille de colonnes aide à placer les éléments de façon régulière :

• Depuis mai 2025, cette fonction s'appelle « Layout guide » (anciennement « Layout grid »). Frame sélectionné, cliquez sur le « + » de la section « Layout guide », sous « Effects » dans le panneau de droite. Une grille uniforme s'applique par défaut : cliquez sur son icône de réglages et choisissez « Columns ».
• Ne la confondez pas avec l'option « Grid » de l'auto layout : le layout guide n'est qu'un repère visuel, alors que « Grid » range réellement les éléments en lignes et en colonnes, comme le CSS Grid.

1. Partie 3 : l'auto layout

   • L'auto layout est la fonction qui distingue un débutant d'un utilisateur confirmé de Figma. Elle fonctionne comme le flexbox en CSS : les éléments se placent tout seuls selon des règles.

1. Le principe

   • Un frame en auto layout range ses enfants en ligne ou en colonne, avec un espacement et des marges internes :

1. Hug, Fill, Fixed

   • Chaque élément d'un auto layout a une règle de taille, en largeur et en hauteur :

1. Des auto layouts imbriqués

   • La vraie puissance de l'auto layout apparaît quand on les imbrique :

• Méthode : on construit toujours de l'intérieur vers l'extérieur. D'abord les petits groupes (badge + heure), puis les blocs (titre + auteur + ligne de disponibilité), enfin la carte entière.

1. Partie 4 : construire un système réutilisable

   • Un projet sérieux ne se dessine pas écran par écran : on crée une fois les couleurs, les textes et les éléments, puis on les réutilise partout.

1. Styles et variables

   • Les styles et les variables donnent un nom aux choix graphiques :

• Créer un style de couleur : sélectionner une forme de la bonne couleur → dans « Fill », icône des styles (quatre points) → « + » → nommer « Couleur/Primaire ».
• Créer un style de texte : sélectionner le texte → icône des styles à côté de « Typography » → « + » → nommer « Titre/H1 ».
• Variables : cliquer sur l'icône « Variables » de la barre verticale tout à gauche (dans les versions plus anciennes : sans rien sélectionner, « Variables » dans le panneau de droite) → « Create variable » → choisir Couleur, Nombre, Texte ou Booléen.

1. Composants et instances

   • Un composant est un élément « modèle » ; ses copies, les instances, restent liées à lui :

1. Variantes et propriétés

   • Un bouton existe souvent en plusieurs versions : principal ou secondaire, normal, survolé ou désactivé. Les variantes les réunissent dans un seul composant :

1. L'onglet « Assets »

   • Tous les composants du fichier sont rassemblés dans l'onglet « Assets ». Dans les versions récentes de Figma, il s'ouvre par l'icône « Ressources » de la barre verticale, tout à gauche :

1. Partie 5 : prototyper

   • Les écrans sont prêts : il faut maintenant les rendre cliquables.

1. Connexions et flux

   • Le prototype se construit dans l'onglet « Prototype » :

1. Déclencheurs, actions et animations

   • Chaque connexion se règle précisément. Voici toutes les possibilités :

1. Défilement et composants interactifs

   • Pour qu'un prototype ressemble vraiment à une application, il faut gérer le défilement et les réactions des boutons :

1. Partie 6 : collaborer et livrer

   • Un design n'a de valeur que s'il est partagé, discuté et transmis aux développeurs.

1. Partager, commenter, versionner

   • Figma est conçu pour le travail à plusieurs :

1. Exporter

   • Pour un rapport, GitHub ou le développement, on exporte écrans et éléments :

1. Du design au code

   • Les développeurs retrouvent dans Figma toutes les valeurs dont ils ont besoin :

• Avec l'offre gratuite, l'inspection reste basique : on lit les valeurs d'un élément sélectionné dans le panneau de droite. Le Dev Mode complet (touche Maj+D) demande une place payante, incluse dans l'offre Education.

1. Plugins, Communauté et FigJam

   • Figma s'enrichit de nombreux outils complémentaires :

1. Organiser son fichier

   • Un fichier propre se reconnaît au premier coup d'œil :

1. Les raccourcis essentiels

   • Voici les vingt raccourcis à connaître par cœur à la fin de cette leçon :

1. Exemple 1 : créer le bouton de BiblioCampus, du rectangle au composant à variantes

   • Étape 1 – Le texte. Touche T, cliquer sur le canevas, taper « Réserver ». Police Inter, Semi Bold, 16, couleur blanche.
   • Étape 2 – L'auto layout. Texte sélectionné, Maj+A : Figma crée un frame autour du texte. Régler le padding à 12 en haut et en bas, 20 à gauche et à droite ; largeur et hauteur en « Hug ».
   • Étape 3 – L'apparence. Remplissage du frame : style « Couleur/Primaire » (#1565C0) ; rayon des coins : 8. Renommer le frame « Bouton ».
   • Étape 4 – Le composant. Frame sélectionné, Ctrl+Alt+K : l'icône devient ❖ violette.
   • Étape 5 – Les variantes. Cliquer sur « Add variant » deux fois. Renommer la propriété « Property 1 » en « État », et les valeurs en « Défaut », « Survol », « Désactivé ». Survol : #0D47A1 ; Désactivé : #CBD5E1.
   • Étape 6 – Le type. Ajouter une seconde propriété de variante « Type » (Primaire, Secondaire) et créer les trois variantes Secondaire : fond blanc, contour 1,5 #1565C0, texte bleu.
   • Étape 7 – La propriété texte. Sélectionner le texte « Réserver » dans le composant → dans la section « Text » du panneau, cliquer sur l'icône de propriété → « Create property » nommée « Libellé ».
   • Étape 8 – L'interaction. Onglet Prototype, sur la variante Primaire/Défaut : « While hovering » → « Change to » → Primaire/Survol, animation « Smart animate », 150 ms.
   • Résultat: glissé depuis l'onglet Assets (« Ressources »), chaque bouton se règle par menus (Type, État, Libellé) et réagit tout seul au survol dans le prototype.

1. Exemple 2 : construire la carte « livre » avec des auto layouts imbriqués

   • Étape 1 – La ligne de disponibilité. Créer un texte « ● En rayon » dans un frame en auto layout (padding 2 / 8, coins 999, fond #DCFCE7, texte #166534) : c'est le badge. Le transformer en composant « Contenu/Badge dispo ». Ajouter à côté un texte « il y a 3 min » (12, gris). Sélectionner les deux, Maj+A : auto layout horizontal, gap 6, Hug.
   • Étape 2 – Le bloc Infos. Titre « Design émotionnel » (style Titre/H2), auteur « D. Norman » (Corps/Secondaire), puis la ligne de disponibilité. Sélectionner les trois, Maj+A : auto layout vertical, gap 4. Renommer « Infos ».
   • Étape 3 – La couverture. Rectangle 72 × 96, coins 6, remplissage Image (mode Fill). Taille Fixed.
   • Étape 4 – La carte. Sélectionner la couverture et « Infos », Maj+A : auto layout horizontal, gap 12, padding 12, fond blanc, contour 1 #E2E8F0, coins 12. Régler « Infos » en largeur Fill. Renommer « Carte livre » et créer un composant.
   • Étape 5 – Le test. Placer une instance dans un frame de 360 de large avec la carte en largeur Fill. Remplacer le titre par « Don't Make Me Think, Revisited : une approche du bon sens… » : la carte s'agrandit en hauteur sans rien casser. Élargir le frame à 600 : les infos s'élargissent.

1. Exemple 3 : l'écran « Résultats » et son prototype, de A à Z

   • Étape 1 – Le frame. Touche F, format 360 × 800, nom « 02-Résultats », fond style « Couleur/Fond ». Layout guide de 4 colonnes, marge 16, gouttière 16.
   • Étape 2 – La structure. Auto layout vertical sur le frame, padding 16, gap 12. Y glisser : l'en-tête (composant), un texte « 24 résultats pour « design » », puis quatre instances de « Carte livre » en largeur Fill.
   • Étape 3 – Les contenus. Changer le titre, l'auteur et l'image de chaque instance (remplacements locaux). Sur la quatrième, remplacer le texte du badge par « ● Emprunté » et son fond par #FEE2E2.
   • Étape 4 – La navigation. Ajouter la barre de navigation (composant) en position absolue en bas de l'écran (icône « Absolute position » de l'auto layout), contraintes Left & Right et Bottom.
   • Étape 5 – Le défilement. Augmenter la hauteur du frame à 1 100 pour ajouter des résultats ; dans l'onglet Prototype, choisir le défilement vertical et fixer l'en-tête et la barre de navigation (position « Fixed »).
   • Étape 6 – Les connexions. Première carte → « 03-Fiche » (On click, Navigate to, Slide in vers la gauche, 300 ms). Flèche ← de l'en-tête de la fiche → « Back ». Icône ☰ → « 05-Menu » en « Open overlay », position à gauche, « Close when clicking outside ».
   • Étape 7 – Le test. ▷ Présenter : faire défiler, ouvrir la fiche, revenir, ouvrir le menu. Corriger tout ce qui ne réagit pas comme prévu, puis partager le lien du prototype.

1. Exemple 4 (bonus) : le mode sombre avec des variables

   • Cette fonction nécessite les modes de variables, disponibles avec l'offre Education ou Professional.
   • Étape 1: créer une collection « Couleurs » avec les variables couleur/fond, couleur/surface, couleur/texte, couleur/primaire.
   • Étape 2: ajouter un mode « Sombre » et remplir la seconde colonne (#0F172A, #1E293B, #F1F5F9, #90CAF9).
   • Étape 3: appliquer ces variables aux remplissages des écrans et des composants à la place des couleurs fixes.
   • Étape 4: sélectionner un frame → icône de mode dans la section « Layer » → « Sombre » : tout l'écran passe en mode sombre, composants compris.

1. Aide-mémoire

   • Les six parties de la leçon en un coup d'œil :

1. Activité 1 : découvrir l'interface

   • Créez votre compte, puis un fichier « BiblioCampus – Prénom Nom ». Créez les pages Couverture, Wireframes, Maquettes, Prototype, Composants. Faites une capture de l'interface et numérotez ses six zones.
   • Offre Starter : si Figma refuse de créer une 4^e page (limite de 3 pages par fichier), demandez l'offre Education. En attendant, créez les pages Maquettes, Prototype et Composants, puis rangez la couverture et les wireframes dans deux sections de la page Maquettes.
   • Vérifier : les cinq pages (ou les trois pages et deux sections) existent dans l'ordre, et votre capture identifie correctement les six zones de la leçon.

1. Activité 2 : choisir la bonne fonction

   • Pour chaque besoin ci-dessous, indiquez la fonction de Figma à utiliser :

• Vérifier : a : auto layout en Hug ; b : position Fixed pendant le défilement ; c : style (ou variable) de couleur ; d : Open overlay ; e : action Back ; f : composant à variantes avec While hovering → Change to ; g : contraintes Right + Bottom ; h : export SVG.

1. Activité 3 : dessiner sans auto layout

   • Dans un frame de 360 × 800, reproduisez à l'identique le wireframe de la fiche livre (leçon « Wireframe, maquette et prototype ») avec des rectangles, du texte et une image. Nommez tous les calques.
   • Vérifier : les marges de 16 sont respectées (vérifiez avec Alt) et aucun calque ne s'appelle « Rectangle » ou « Frame ».

1. Activité 4 : poser des contraintes et une grille

   • Ajoutez un layout guide de 4 colonnes à votre frame (section « Layout guide » du panneau de droite), puis réglez les contraintes de l'en-tête (Left & Right, Top) et du bouton (Left & Right, Bottom). Agrandissez le frame à 412 × 917.
   • Vérifier : l'en-tête et le bouton s'adaptent à la nouvelle largeur et le bouton reste en bas.

1. Activité 5 : créer les styles

   • Créez 4 styles de couleur et 4 styles de texte pour BiblioCampus et appliquez-les à votre écran.
   • Vérifier : en modifiant le style « Couleur/Primaire », toutes les zones concernées changent de couleur.

1. Activité 6 : réaliser le bouton à variantes

   • Suivez l'exemple 1 pas à pas pour créer le composant Bouton avec ses 6 variantes, sa propriété Libellé et son interaction de survol.
   • Vérifier : dans une instance, les menus Type, État et Libellé apparaissent, et le survol fonctionne en présentation.

1. Activité 7 : réaliser la carte livre

   • Suivez l'exemple 2 pour créer le composant « Carte livre » avec trois auto layouts imbriqués.
   • Vérifier : un titre de trois lignes agrandit la carte sans chevauchement, et la carte s'élargit avec son conteneur.

1. Activité 8 : réaliser l'écran Menu du jour

   • Réalisez l'écran CantineCampus décrit ci-dessous en utilisant uniquement l'auto layout, des styles et des composants :

• Vérifier : les huit points du cahier des charges sont respectés ; en supprimant un plat, les autres remontent automatiquement.

1. Activité 9 : construire le prototype complet

   • Suivez l'exemple 3 pour le parcours BiblioCampus : Recherche → Résultats → Fiche → Confirmation, avec défilement, Back, overlay de menu et Smart animate sur la confirmation.
   • Vérifier : le parcours se fait de bout en bout sans impasse, l'en-tête reste fixe pendant le défilement et le menu se ferme en cliquant à côté.

1. Activité 10 : collaborer

   • Invitez un camarade en « can view » sur votre fichier. Il laisse au moins trois commentaires ; vous les traitez et les résolvez. Créez une version nommée « Après relecture ».
   • Vérifier : trois commentaires résolus et une version nommée apparaissent dans l'historique.

1. Activité 11 : exporter et préparer le code

   • Exportez vos écrans en PNG 2x, l'icône du menu en SVG, et rédigez pour le bouton principal le code CSS correspondant (display, padding, gap, border-radius, background).
   • Vérifier : les fichiers sont nets, l'icône SVG s'ouvre dans le navigateur, et votre CSS reprend exactement les valeurs de l'auto layout.

1. Activité 12 : déposer votre travail sur GitHub

   • Déposez dans 30-maitriser-figma/ vos exports, votre fichier CSS et un fichier README.md contenant le lien de votre fichier Figma et celui du prototype, puis envoyez le tout :

git add 30-maitriser-figma
git commit -m "Ajoute la leçon sur la maîtrise de Figma"
git push

• Vérifier : le README contient les deux liens, les images s'affichent sur GitHub et le lien du prototype s'ouvre sans demander de droits de modification.

1. Erreurs fréquentes

1. À retenir

   • Figma permet de concevoir, prototyper et partager des interfaces dans le navigateur ; l'offre Starter suffit pour apprendre.
   • Le frame est la brique de base : écrans, cartes et boutons sont des frames.
   • L'auto layout (direction, gap, padding ; Hug, Fill, Fixed) rend les écrans souples et proches du code.
   • Styles, variables, composants et variantes évitent de refaire le même travail et garantissent la cohérence.
   • Le prototype relie les écrans avec des déclencheurs, des actions et des animations ; overlays, Back et défilement le rendent réaliste.
   • On partage, on commente, on nomme ses versions, on exporte et on garde un fichier propre.

On ne maîtrise pas Figma en lisant un guide, mais en refaisant chaque geste jusqu'à ce qu'il devienne un réflexe.