Apprendre Figma pour designer un site ou une application : méthode complète pas à pas

Apprendre Figma, c’est acquérir l’outil de référence pour concevoir l’interface d’un site web ou d’une application : on y dessine les écrans, on y organise les composants réutilisables, puis on relie les écrans entre eux pour obtenir un prototype cliquable que l’on peut tester et transmettre aux développeurs.

Ce guide s’adresse aux designers débutants, chefs de projet, développeurs, entrepreneurs et à toute personne qui veut maquetter une interface proprement. Vous y apprendrez à structurer un fichier, construire des mises en page responsives avec l’Auto Layout, créer des composants et un design system, puis prototyper et livrer votre travail.

Qu’est-ce que Figma ?

Figma est un logiciel de design d’interface (UI) et d’expérience utilisateur (UX) qui fonctionne dans le navigateur et en application de bureau. Les fichiers sont stockés en ligne : plusieurs personnes peuvent y travailler en même temps, commenter et consulter les spécifications. Il sert à créer maquettes, prototypes interactifs, design systems et présentations.

L’écosystème Figma comprend plusieurs espaces :

• Figma Design : l’éditeur principal, pour les maquettes et les prototypes ;
• Dev Mode : une vue destinée aux développeurs, avec mesures, propriétés et extraits de code ;
• FigJam : un tableau blanc collaboratif pour les ateliers, les parcours utilisateurs et le brainstorming ;
• Figma Slides : des présentations construites dans le même environnement que les maquettes.

Le vocabulaire de base à connaître : une frame est un conteneur (un écran, une carte, un bouton) ; un composant est un élément réutilisable dont les copies, appelées instances, se mettent à jour quand on modifie le principal ; une page regroupe des frames dans un fichier.

Pourquoi apprendre Figma pour l’UI UX design ?

Figma s’est imposé comme l’outil standard des équipes produit, des agences web et des freelances. Les raisons sont concrètes :

• La collaboration en temps réel : designers, développeurs et clients voient la même version, sans échange de fichiers.
• Un seul outil de la maquette au prototype : pas besoin d’exporter vers un autre logiciel pour tester un parcours.
• Des composants intelligents : variantes, propriétés et variables permettent de gérer des dizaines d’états de boutons ou de champs sans les dupliquer.
• Un transfert vers le développement structuré : chaque couleur, espacement et typographie est lisible par le développeur.
• Un écosystème riche : plugins, kits UI et fichiers communautaires accélèrent le travail.

Les usages couvrent le design d’applications mobiles, de sites vitrines, de tableaux de bord SaaS, de boutiques en ligne, mais aussi des maquettes de présentation ou des supports visuels. Pour des visuels marketing rapides sans logique d’interface, un outil comme Canva reste plus direct : voyez notre guide pour créer des visuels professionnels avec Canva.

Comment designer une interface dans Figma : les étapes

Prenons un exemple concret : la page d’accueil d’une application de réservation, déclinée en version ordinateur et mobile, puis transformée en prototype.

Étape 1 — Organiser le fichier et créer les frames

Créez un nouveau fichier de design, puis organisez-le en pages dans le panneau de gauche : Couverture, Composants, Écrans, Prototype, Archives. Cette structure vous évitera de chercher vos éléments quand le projet grandira.

Appuyez sur F (ou A) pour l’outil Frame : le panneau de droite propose des formats prédéfinis (téléphone, tablette, ordinateur). Choisissez par exemple Desktop pour la version ordinateur. Nommez chaque frame explicitement (double-clic sur son nom, ou Ctrl+R / Cmd+R) : Accueil – Desktop, Accueil – Mobile.

Notre conseil : ne dessinez jamais directement sur le canevas. Tout élément doit appartenir à une frame, sinon l’Auto Layout, les contraintes et le prototype ne fonctionneront pas.

Étape 2 — Poser une grille de mise en page

Sélectionnez la frame et ajoutez une grille de mise en page dans le panneau de droite (layout grid, appelée guide de mise en page dans les versions récentes de l’interface). Un réglage courant pour un écran d’ordinateur : 12 colonnes, une gouttière de 24 px et des marges latérales. Pour un mobile, 4 colonnes suffisent.

Adoptez aussi une échelle d’espacement basée sur un multiple de 8 (8, 16, 24, 32, 48, 64). Utiliser toujours les mêmes valeurs donne immédiatement une impression de rigueur à l’interface.

Étape 3 — Dessiner les éléments de base

Les outils essentiels ont tous un raccourci d’une lettre :

Outil	Raccourci	Usage typique
Frame	F ou A	Écrans, cartes, conteneurs
Rectangle	R	Fonds, boutons, champs
Ellipse	O	Avatars, pastilles
Ligne	L	Séparateurs
Plume	P	Icônes et formes libres
Texte	T	Titres, paragraphes, libellés
Main	Espace maintenu	Se déplacer sur le canevas

Pour créer une icône, combinez des formes simples avec les opérations booléennes (barre d’outils, menu des opérations booléennes) : Union, Soustraire, Intersection, Exclure. Le résultat reste modifiable : vous pouvez déplacer une forme source à tout moment. Les images s’importent par glisser-déposer ou avec Ctrl+Maj+K (Cmd+Maj+K).

Étape 4 — Structurer avec l’Auto Layout

L’Auto Layout est la fonction qui fait la différence entre une maquette figée et une maquette professionnelle. Sélectionnez un texte et appuyez sur Maj+A : Figma crée une frame en Auto Layout autour. Réglez ensuite dans le panneau de droite :

• la direction (horizontale, verticale ou en grille selon les versions) ;
• l’espacement entre les éléments ;
• le padding (marges intérieures) ;
• l’alignement des enfants.

Chaque élément dispose aussi d’un comportement de dimensionnement : Fixe (taille imposée), Ajuster au contenu (Hug, la frame épouse son contenu) ou Remplir le conteneur (Fill, l’élément occupe l’espace disponible).

Exemple : un bouton en Auto Layout horizontal avec un padding de 16 × 24 px et le réglage Hug s’élargit automatiquement quand vous passez de « Réserver » à « Réserver maintenant ». Une carte en Auto Layout vertical avec un titre, un texte et un bouton se réorganise seule si vous supprimez le texte. Imbriquez les Auto Layouts : la page entière devient une pile de sections, chaque section une pile de cartes.

Étape 5 — Créer des composants et des variantes

Une fois votre bouton construit, transformez-le en composant avec Ctrl+Alt+K (Cmd+Option+K). Toutes les copies seront des instances liées au composant principal.

Ajoutez ensuite des variantes (panneau de droite > ajouter une variante) pour gérer les états : Défaut, Survol, Désactivé, et les tailles Petit, Moyen, Grand. Donnez des noms de propriétés clairs, par exemple État=Survol, Taille=Moyen. Les propriétés de composant (texte, booléen pour afficher une icône, remplacement d’instance) permettent de modifier une instance sans la détacher.

Rangez tous les composants principaux sur la page Composants. Si vous devez détacher une instance (Ctrl+Alt+B), c’est souvent le signe qu’il manque une variante ou une propriété.

Étape 6 — Définir styles et variables pour le design system

Un design system commence par des règles simples, enregistrées dans le fichier :

1. Couleurs : créez des variables de couleur organisées en deux niveaux, d’abord une palette brute (bleu-500, gris-100), puis des variables sémantiques (fond-principal, texte-secondaire, action-primaire) qui pointent vers la palette.
2. Modes : ajoutez un mode Clair et un mode Sombre à la collection sémantique. Appliqué à une frame, le mode change tout le thème d’un coup.
3. Typographie : créez des styles de texte pour chaque niveau (Titre 1, Titre 2, Corps, Légende) avec taille, graisse et interlignage.
4. Espacements et rayons : créez des variables numériques (espace-8, espace-16, rayon-carte) et appliquez-les dans l’Auto Layout.

Avec ces fondations, modifier la couleur principale de la marque ou l’arrondi des cartes se fait en un clic sur tout le projet.

Étape 7 — Décliner en responsive

Dupliquez l’écran ordinateur et redimensionnez-le au format mobile. Grâce à l’Auto Layout et aux réglages Fill, la plupart des éléments s’adaptent. Ajustez ensuite ce qui doit changer : passage de trois colonnes à une, menu remplacé par une icône, tailles de titres réduites.

Pour les éléments hors Auto Layout, les contraintes (gauche, droite, centre, échelle) définissent comment ils réagissent au redimensionnement de leur frame parente. Les réglages de largeur minimale et maximale évitent qu’un bloc devienne illisible sur un très grand écran.

Étape 8 — Prototyper avec Smart Animate

Passez dans l’onglet Prototype du panneau de droite. Sélectionnez un bouton, faites glisser la pastille qui apparaît vers l’écran de destination, puis réglez l’interaction :

• Déclencheur : au clic, au survol, en appuyant, après un délai ;
• Action : naviguer vers, ouvrir un overlay, faire défiler jusqu’à, revenir en arrière ;
• Animation : instantanée, dissolution, glissement, poussée ou Smart Animate.

Smart Animate anime automatiquement les calques qui portent le même nom sur deux écrans : un menu qui se déplie, une carte qui s’agrandit, un interrupteur qui bascule. Pour une micro-interaction sur un composant, créez les interactions directement entre ses variantes : chaque instance en héritera.

Pour les pages longues, réglez le débordement de la frame en défilement vertical et fixez l’en-tête avec la position Fixe ou Collant dans le panneau de design. Lancez ensuite la présentation (bouton Lecture en haut à droite) pour tester, ou partagez le lien du prototype.

Astuces et bonnes pratiques Figma

• Nommez vos calques au fur et à mesure : Smart Animate, le Dev Mode et vos collègues en dépendent.
• Utilisez Maj+2 pour zoomer sur la sélection et Maj+1 pour afficher tout le contenu de la page.
• Sélectionnez les calques identiques (menu Édition > Sélectionner tout ce qui correspond) pour modifier d’un coup une couleur ou une police.
• Pixel art pour s’entraîner : dessiner une icône sur une grille de 16 × 16 est un excellent exercice pour maîtriser le magnétisme et les alignements.
• Plugins utiles : bibliothèques d’icônes, générateurs de faux contenus, vérificateurs de contraste. Installez-les depuis le menu Ressources et gardez-en peu, bien choisis.
• Kits UI : partir d’un kit communautaire fait gagner du temps, à condition de le simplifier et de remplacer ses styles par les vôtres avant de l’utiliser.
• Figma Slides : pour présenter un parcours utilisateur à un client, vous pouvez construire un diaporama à partir de vos écrans sans passer par un autre logiciel. Pour les présentations plus classiques, nos conseils pour une présentation PowerPoint professionnelle restent valables.

Les erreurs fréquentes quand on apprend Figma

Erreur	Conséquence	Solution
Utiliser des groupes au lieu de frames	Pas d’Auto Layout, pas de défilement, contraintes incohérentes	Transformer les groupes en frames (Ctrl+Alt+G)
Espacements au hasard	Interface qui paraît « bricolée »	Échelle fixe en multiples de 8, variables d’espacement
Détacher les instances	Modifications du composant non répercutées	Ajouter la variante ou la propriété manquante
Couleurs saisies à la main partout	Impossible de changer de charte ou de thème	Variables de couleur sémantiques
Calques nommés « Rectangle 42 »	Smart Animate cassé, handoff confus	Nommer chaque calque utile
Trop de styles de texte	Hiérarchie illisible	5 à 7 niveaux typographiques maximum
Prototyper tous les écrans	Temps perdu	Prototyper uniquement les parcours à tester
Oublier le mobile	Maquette inutilisable pour le développement	Concevoir au moins ordinateur et mobile

Figma, Adobe XD, Illustrator, Canva : quel outil pour quel besoin ?

Besoin	Outil adapté	Pourquoi
Maquettes d’interface, prototypes, design system	Figma	Auto Layout, composants, collaboration
Illustrations, logos, icônes complexes	Illustrator ou Inkscape	Outils vectoriels de dessin plus avancés
Visuels réseaux sociaux, supports marketing rapides	Canva	Modèles prêts à l’emploi
Ateliers, parcours utilisateurs, brainstorming	FigJam	Tableau blanc collaboratif
Maintenir un ancien projet Adobe XD	Adobe XD	Outil qui n’évolue plus, à migrer

Figma n’est pas un logiciel d’illustration : pour dessiner un logo ou une mascotte, un outil vectoriel dédié est plus confortable. Notre guide pour apprendre Illustrator présente cette autre famille d’outils, et l’on importe ensuite les éléments en SVG dans Figma.

Côté développement, comprendre comment une maquette devient une page web vous rendra meilleur designer : les notions de boîtes, de marges et de flexbox sont très proches de l’Auto Layout. Les bases pour apprendre HTML puis apprendre CSS vous aideront à concevoir des maquettes réalistes et faciles à intégrer.

Comment apprendre Figma efficacement ?

Figma se prend en main vite, mais la maîtrise vient de la méthode. Voici le parcours que nous recommandons :

1. Premières heures : interface, frames, formes, texte, images, alignements. Reproduisez un écran d’une application que vous utilisez.
2. Première semaine : Auto Layout imbriqué et composants avec variantes. Construisez une bibliothèque de boutons, champs et cartes.
3. Deuxième semaine : variables, modes clair et sombre, styles de texte. Transformez votre bibliothèque en mini design system.
4. Troisième semaine : prototype complet d’un parcours (inscription, réservation, paiement) avec Smart Animate, overlays et zones de défilement.
5. Ensuite : handoff avec les développeurs, travail en équipe, présentation au client.

Pour suivre ce parcours avec un formateur, la formation Figma d’EspritAcadémique condense l’essentiel en 2 heures de vidéos pratiques, accessibles sans prérequis. Elle vous apprend notamment à :

• prendre en main l’interface et construire des frames selon de bonnes pratiques ;
• dessiner rapidement avec la plume et les opérations booléennes ;
• créer des boutons modernes avec états, variantes et variables ;
• structurer vos écrans avec une grille et une hiérarchie typographique lisible ;
• prototyper avec Smart Animate, gérer les zones de défilement et la navigation ;
• utiliser les plugins, partir d’un kit UI et présenter vos maquettes avec Figma Slides.

En résumé

Apprendre Figma, c’est d’abord adopter une méthode : un fichier organisé, des frames partout, l’Auto Layout pour chaque bloc, des composants avec variantes et des variables pour les couleurs et les espacements. Sur ces fondations, le prototype avec Smart Animate se construit rapidement et le transfert aux développeurs devient simple. Quelques semaines de pratique sur un vrai projet suffisent pour devenir autonome.