Pourquoi Figma est devenu l’outil incontournable pour les maquettes web
Pendant longtemps, concevoir une maquette web « propre » signifiait jongler entre Photoshop, Illustrator, parfois Sketch, avec en bonus les fichiers qui se perdent dans des dossiers obscurs type version-final-v3-def-def.psd. Figma a complètement changé la donne : un outil unique, pensé pour le web, collaboratif, léger, et incroyablement flexible.
Si vous débutez avec Figma ou que vous l’utilisez déjà sans vraiment exploiter tout son potentiel, l’objectif de cet article est simple : vous guider, étape par étape, dans la création d’une maquette web moderne, structurée, et prête à être intégrée.
Au programme : on part d’une page blanche, on structure la grille, on construit un design système minimal, on maquette une page, puis on prépare le terrain pour les développeurs. Tout ça sans perdre de vue ce qui fait un bon design : clarté, cohérence, et une pointe de personnalité.
Préparer son projet Figma comme un designer (et pas comme un touriste)
Avant même de poser un rectangle, il faut préparer l’espace de travail. C’est un peu comme dessiner les fondations d’une maison avant de choisir la couleur du canapé.
Créer un nouveau fichier et organiser les pages
Dans Figma, ouvrez un nouveau fichier. Par défaut, tout est sur une seule page, mais pour un vrai projet web, je vous conseille de séparer :
- Page « UI Kit » : couleurs, typos, boutons, composants, styles d’ombre, etc.
- Page « Maquettes » : vos écrans desktop, tablette, mobile.
- Page « Prototypes » (optionnelle) : pour vos versions cliquables, si vous préférez les isoler.
- Page « Documentation » : notes pour les devs, règles d’espacement, captures, annotations.
Rien qu’avec cette simple organisation, vous évitez déjà la pagaille qui s’installe au bout de 3 versions. C’est un réflexe de développeur méthodique… transposé dans le design.
Définir le type de projet
Avant d’ouvrir le panneau de couleurs, posez-vous deux questions :
- Quel est le type de site ? (vitrine, blog, SaaS, e-commerce…)
- Qui est l’utilisateur principal ? (professionnel pressé, étudiant curieux, client B2B, etc.)
Ces réponses vont orienter vos choix de layout, de hiérarchie et de ton graphique. Un SaaS B2B demandera une grille très structurée, beaucoup de clarté et peu de distraction. Un portfolio créatif vous permettra plus de liberté typographique et de mise en page.
Configurer votre grille et vos dimensions d’écran
Les maquettes modernes ne se font plus « au feeling » : elles s’appuient sur un système de grille, qui garantit cohérence et adaptabilité. Figma simplifie beaucoup cette partie.
Choisir la résolution de départ
Pour le web, la base reste :
- Desktop : 1440 px de largeur (classique et confortable).
- Tablette : 768 px.
- Mobile : entre 360 et 414 px (la plupart des Android + iPhone).
Dans Figma, utilisez l’outil Frame (touche F), puis sélectionnez un preset dans le panneau de droite (Desktop, iPad, iPhone, etc.). Vous pouvez aussi saisir manuellement votre largeur.
Mettre en place une grille de colonnes
Sur votre frame desktop, cliquez sur Layout Grid dans le panneau de droite, puis :
- Changez le type de grid de Grid à Columns.
- Choisissez par exemple 12 colonnes (un standard très souple pour le web).
- Définissez un gutter (espacement entre colonnes) autour de 20–32 px.
- Ajoutez des margins à gauche et à droite (par exemple 80–120 px).
Cette grille va vous servir de squelette pour aligner textes, images, cartes, boutons. Un design moderne, c’est souvent juste un design bien aligné.
Créer une palette de couleurs et des styles typographiques cohérents
Avant de dessiner vos blocs, il faut décider de l’identité visuelle de base. Pas besoin d’avoir un branding complet : quelques décisions claires suffisent pour commencer à maquetter proprement.
Définir 3 à 5 couleurs clés
Sur votre page « UI Kit », créez quelques formes (rectangles) et choisissez :
- Couleur principale (Primary) : pour les boutons et les éléments d’action.
- Couleur secondaire (Secondary) : pour les accents, survols, éléments de navigation.
- Couleurs neutres : une échelle de gris (Background, Surface, Texte, Bordures).
- Une éventuelle couleur d’alerte (Success, Warning, Error) si besoin.
Sélectionnez chaque rectangle, puis dans le panneau de droite, en bas de la section Fill, cliquez sur les 4 points et créez un Color Style. Nommez-les de façon claire : Primary / 500, Neutral / 900, etc. Cela vous permettra de modifier toute votre maquette en un clic plus tard.
Choisir et configurer vos typographies
Une interface web moderne n’a pas besoin de 6 polices. En général :
- 1 police pour les titres.
- 1 police pour le texte courant (parfois la même, dans une graisse différente).
Dans Figma, créez des styles de texte : H1, H2, H3, Body, Small, etc. Par exemple :
- H1 : 48 px, bold, 120% de line-height.
- H2 : 32 px, semibold.
- H3 : 24 px.
- Body : 16 px, regular, 150–160% de line-height.
- Caption : 12–14 px pour les petites annotations.
Comme pour les couleurs, enregistrez ces styles dans Figma pour garder une cohérence absolue. Chaque changement futur de typo se fera à un seul endroit.
Construire un mini design system dans Figma
Les maquettes modernes reposent sur des composants réutilisables. Figma excelle dans ce domaine avec ses Components et Variants. L’idée est simple : vous créez une fois, vous utilisez partout.
Créer des boutons réutilisables
Commencez par dessiner un bouton principal :
- Un rectangle avec un léger arrondi (4–8 px).
- Couleur de fond : votre Primary.
- Texte centré : « Call to action » (ou un libellé réel).
- Une ombre subtile si vous aimez le relief (mais subtile…).
Sélectionnez le tout, puis faites clic droit > Create Component. Vous venez de créer un bouton « maître ».
Ensuite, dans le panneau de droite, utilisez les Variants pour :
- Ajouter un état Hover (légèrement plus foncé ou avec une bordure).
- Ajouter un état Disabled (opacité réduite, texte grisé).
- Créer une version Outline (fond transparent, bordure colorée).
Vous obtenez ainsi un set de boutons que vous pouvez déposer partout dans vos maquettes. Si le client décide de changer le style du bouton la veille de la mise en ligne (oui, ça arrive), vous modifiez le composant, et tout le reste suit.
Préparer des blocs de base : cartes, sections, navigation
Toujours sur la page « UI Kit », créez quelques composants clés :
- Carte de contenu : image, titre, texte, bouton ou lien.
- Header / Nav bar : logo, menu, CTA.
- Hero section (optionnel) : titre + sous-titre + bouton + image ou illustration.
- Footer : colonnes de liens, mention, réseaux sociaux.
Nul besoin d’anticiper tous les cas possibles : un petit design system bien pensé vaut mieux qu’une usine à gaz inutilisable.
Structurer votre première page web : du wireframe à la maquette haute fidélité
Passons à la partie visible de l’iceberg : la page elle-même. Une bonne approche consiste à séparer deux étapes : wireframe (structure, sans détails graphiques) puis maquette haute fidélité (design final).
Étape 1 : créer un wireframe fonctionnel
Sur votre page « Maquettes », ajoutez un frame desktop (par exemple 1440 px) et gardez votre grille affichée.
Utilisez des formes simples (rectangles, lignes, cadres gris) pour représenter :
- Le header : logo, navigation, bouton d’action.
- La section hero : gros titre, texte, visuel à droite ou à gauche.
- Une section de mise en avant : 3–4 colonnes présentant vos bénéfices clés.
- Une section témoignages ou « preuves sociales ».
- Une section de contenu : texte + image, alternés.
- Un footer structuré : liens, contact, mentions légales.
Le but n’est pas encore d’être beau, mais clair. Imaginez que vous expliquez le futur site à quelqu’un avec des blocs Lego.
Étape 2 : appliquer votre design system
Une fois satisfait de la structure, remplacez progressivement les blocs gris par :
- Vos styles de texte (H1, H2, Body, etc.).
- Vos composants (boutons, cartes, nav bar, footer).
- Vos couleurs (primary, secondary, neutral).
La maquette commence à prendre forme : elle est maintenant lisible, cohérente, et reflète déjà le design final. C’est aussi à ce moment que vous ajustez les espacements verticaux (padding entre sections, marges internes) pour rendre la page respirante.
Utiliser l’Auto Layout pour des maquettes vraiment modernes
L’une des forces de Figma, souvent sous-exploitée, c’est l’Auto Layout. En termes simples, Auto Layout permet de créer des blocs qui se redimensionnent et s’adaptent automatiquement à leur contenu. C’est la clé pour des maquettes robustes, proches du comportement réel du web.
Auto Layout sur les boutons et les cartes
Prenez votre bouton principal :
- Sélectionnez-le et faites Shift + A pour activer Auto Layout.
- Réglez le padding horizontal (par exemple 16–24 px) et le padding vertical (8–12 px).
- Choisissez un spacing entre icône et texte si besoin.
Résultat : si vous modifiez le texte du bouton, sa largeur s’adapte automatiquement. Plus de boutons mal proportionnés à la main.
Auto Layout sur des sections entières
Vous pouvez également utiliser Auto Layout sur :
- Des listes de cartes (espacement uniforme entre chaque carte).
- Des colonnes de footer.
- Des formulaires (label + champ + bouton).
Cela vous rapproche énormément du comportement flexbox ou grid en CSS. Pour un designer qui veut parler le même langage que les développeurs, c’est un atout précieux.
Penser responsive dès la maquette
Un design moderne ne peut pas s’arrêter au desktop. Figma permet de décliner vos écrans pour différentes tailles avec une relative facilité, à condition d’avoir préparé le terrain correctement.
Adapter la grille pour tablette et mobile
Créez un frame tablette et un frame mobile. Appliquez-leur une layout grid adaptée :
- Tablette : 8 colonnes, marges réduites.
- Mobile : 4 colonnes, marges encore plus réduites.
Ensuite, copiez/collez votre maquette desktop à l’intérieur de ces frames, puis réorganisez :
- Les éléments en colonnes deviennent des blocs empilés.
- Certains visuels secondaires peuvent être supprimés ou déplacés.
- La taille des titres est légèrement réduite.
L’idée n’est pas de faire une copie exacte, mais une version optimisée pour la lecture sur écran réduit.
Utiliser les contraintes pour simuler le comportement responsive
Figma permet de définir des constraints (contraintes) sur chaque élément : Left, Right, Center, Top, Bottom, Scale, etc. En jouant avec la taille du frame, vous pouvez observer comment votre design se comporte.
Par exemple :
- Un bouton aligné à droite du header peut garder sa position en choisissant Right comme contrainte.
- Un bloc central peut rester centré même si le frame s’élargit.
Ce n’est pas un vrai responsive comme dans le navigateur, mais c’est un excellent moyen d’anticiper les problèmes d’alignement.
Préparer la maquette pour le développement
Une belle maquette qui n’est pas exploitable par un développeur reste… une image. Figma a été pensé pour faire le pont entre design et code.
Nommer proprement ses calques et composants
Sur un projet réel, bannissez les Rectangle 123 et Frame 56. Adoptez une nomenclature claire :
- btn/primary/large
- card/feature
- section/hero
- nav/main
Regroupez vos sections dans des frames nommés (section-pricing, section-testimonials, etc.). Le développeur comprendra immédiatement la structure logique du site.
Utiliser la vue « Inspect »
Partagez le lien Figma avec votre développeur (ou votre vous-même futur, si vous faites tout) et utilisez l’onglet Inspect :
- Il affiche les dimensions, marges, paddings.
- Il donne les valeurs de couleurs en HEX, RGB, HSL.
- Il suggère même du CSS pour les éléments.
Si vous avez bien utilisé les styles (couleurs, typos, effets), le passage au code devient beaucoup plus fluide.
Documenter les règles essentielles
Sur votre page « Documentation », ajoutez quelques rappels pour le développeur :
- Les espacements verticaux entre sections (par exemple 80–120 px).
- Les rayons de bordure standards (4 px, 8 px, etc.).
- Les états survol / focus des boutons et liens.
- Les comportements mobiles particuliers (menu burger, collapse, etc.).
Cette petite couche de documentation évite les interprétations hasardeuses une fois dans le code.
Quelques bonnes pratiques pour des maquettes vraiment modernes
Au-delà de la technique pure, certains principes traversent tous les « beaux » designs web modernes.
- Hiérarchie typographique claire : un H1 puissant, des H2 structurants, des textes lisibles. Évitez de multiplier les tailles sans logique.
- Espaces généreux : laissez respirer. Si vous hésitez entre deux marges, choisissez souvent la plus grande.
- Nombre limité de styles : quelques couleurs, quelques variantes de bouton, pas 10 effets différents.
- Alignements soignés : utilisez la grille, les guides, les Auto Layout. L’œil repère instantanément les approximations.
- Accessibilité en tête : contrastes suffisants, tailles de texte raisonnables, hiérarchie logique des titres.
En combinant ces principes avec les fonctionnalités puissantes de Figma, vous obtenez des maquettes qui ne sont pas seulement belles, mais robustes, cohérentes, et prêtes à affronter la réalité du web moderne.
Et surtout, vous gagnez un temps précieux à chaque nouveau projet : au lieu de réinventer la roue, vous améliorez progressivement votre propre système, votre propre manière de penser et construire le digital.
