Tutoriel : Créer une maquette web avec Figma (gratuit)

Pourquoi Figma est l’outil idéal pour créer vos maquettes web

Figma est devenu l’outil de référence pour le design web, et pour cause : il est entièrement gratuit pour les projets individuels, fonctionne dans le navigateur (pas d’installation lourde), et permet la collaboration en temps réel. Pour les designers et développeurs en Afrique de l’Ouest, c’est un avantage majeur — pas besoin d’un Mac puissant ni d’une licence Adobe coûteuse.

Le plan gratuit de Figma inclut 3 fichiers Figma, des projets personnels illimités, et l’accès à toutes les fonctionnalités de design. C’est largement suffisant pour créer des maquettes professionnelles.

Étape 1 : Configurer votre fichier et votre frame

Ouvrez figma.com, créez un compte, puis cliquez sur « New design file ». Voici comment démarrer correctement :

Créer le frame principal

Appuyez sur F (raccourci Frame) et choisissez un preset dans le panneau de droite :

• Desktop : 1440 × 900 px (standard pour les maquettes web)
• Laptop : 1280 × 800 px
• Tablette : 768 × 1024 px
• Mobile : 375 × 812 px (iPhone) ou 360 × 800 px (Android, très courant au Sénégal)

Astuce : Commencez toujours par la version mobile si votre audience est principalement sur smartphone. Au Sénégal, plus de 80% du trafic web vient du mobile.

Organiser vos pages

Dans le panneau de gauche, créez des pages séparées :

• 🎨 Design System — vos couleurs, typographies et composants
• 📱 Mobile — maquettes mobile
• 💻 Desktop — maquettes desktop
• 🧪 Prototype — écrans connectés pour la démo

Étape 2 : Créer votre Design System de base

Avant de dessiner quoi que ce soit, définissez vos fondations. C’est ce qui fera la différence entre une maquette amateur et professionnelle.

Définir la palette de couleurs

Créez des rectangles avec vos couleurs et enregistrez-les comme Color Styles (clic droit sur la pastille couleur → « Create style ») :

• Primary : votre couleur principale (ex: #2563EB pour un bleu professionnel)
• Primary-hover : version plus foncée (-10% luminosité)
• Secondary : couleur d’accent
• Neutral-900 : texte principal (#111827)
• Neutral-600 : texte secondaire (#4B5563)
• Neutral-100 : fond clair (#F3F4F6)
• Success : #059669 (vert pour confirmations)
• Error : #DC2626 (rouge pour erreurs)

Définir la typographie

Choisissez une police Google Fonts (gratuite et disponible pour le développement). Créez des Text Styles :

• Heading 1 : Inter Bold, 48px, line-height 56px
• Heading 2 : Inter Semibold, 36px, line-height 44px
• Heading 3 : Inter Semibold, 24px, line-height 32px
• Body : Inter Regular, 16px, line-height 24px
• Body Small : Inter Regular, 14px, line-height 20px
• Caption : Inter Medium, 12px, line-height 16px

Conseil : Inter est une excellente police par défaut — lisible, professionnelle, et gratuite. Pour un site en wolof ou avec des caractères spéciaux africains, vérifiez que la police supporte les diacritiques.

Étape 3 : Construire la structure de votre page

Le header / navigation

Créez un rectangle de 1440 × 72 px en haut de votre frame. Voici la structure classique :

1. Créez un Auto Layout (Shift+A) horizontal avec padding 24px
2. À gauche : votre logo (placez un rectangle 120×40 comme placeholder)
3. Au centre : les liens de navigation en Auto Layout horizontal, gap 32px
4. À droite : un bouton CTA
5. Réglez la distribution sur « Space between » pour que les éléments se répartissent

La section Hero

La section hero est la première chose que vos visiteurs voient. Structure recommandée :

1. Frame de 1440 × 600 px
2. Auto Layout vertical, centré
3. Titre principal : 48px Bold, max 600px de largeur
4. Sous-titre : 18px Regular, couleur Neutral-600, max 500px
5. Groupe de boutons en Auto Layout horizontal : bouton principal + bouton secondaire
6. Image ou illustration à droite (utilisez un placeholder gris avec une icône image)

Créer un bouton réutilisable (composant)

C’est ici que Figma devient puissant :

1. Dessinez un rectangle avec corner radius 8px
2. Ajoutez un texte « Commencer » à l’intérieur
3. Sélectionnez les deux → Shift+A pour créer un Auto Layout
4. Padding : 12px vertical, 24px horizontal
5. Background : votre couleur Primary
6. Texte : blanc, 16px, Semibold
7. Sélectionnez le tout → Ctrl+Alt+K pour créer un composant
8. Renommez-le « Button/Primary »

Créez des variantes : dupliquez le composant principal, changez les styles pour Secondary (outline), Ghost (transparent), et Disabled (grisé). Utilisez le panneau « Variants » pour les regrouper.

Étape 4 : Maîtriser l’Auto Layout

L’Auto Layout est LA fonctionnalité à maîtriser dans Figma. Elle rend vos maquettes responsive et structurées comme du vrai code CSS Flexbox.

Les propriétés essentielles

• Direction : Horizontal (→) ou Vertical (↓) — comme flex-direction en CSS
• Gap : L’espace entre les éléments enfants — comme gap en CSS
• Padding : L’espace intérieur — identique au padding CSS
• Alignment : Comment les enfants s’alignent — comme align-items / justify-content
• Resizing : « Hug contents » (s’adapté au contenu) ou « Fill container » (remplit l’espace)

Exemple pratique : une carte produit

1. Créez un frame 300 × 400 px
2. Ajoutez une image placeholder en haut (300 × 200 px)
3. En dessous, un groupe texte : nom du produit (Semibold 18px), description (Regular 14px, Neutral-600), prix (Bold 24px, Primary color)
4. Un bouton « Ajouter au panier » en bas
5. Sélectionnez tout → Shift+A (Auto Layout vertical)
6. Gap : 16px, Padding : 0 en haut (l’image touche les bords), 16px sur les côtés et en bas
7. Réglez l’image en « Fill container » horizontalement
8. Ajoutez un border radius de 12px et une ombre (Effect → Drop shadow : 0, 4, 12, rgba(0,0,0,0.1))

Transformez cette carte en composant (Ctrl+Alt+K) pour la réutiliser dans une grille de produits.

Étape 5 : Créer une grille de contenu

Pour afficher plusieurs cartes côte à côte :

1. Créez un Auto Layout horizontal
2. Placez 3 instances de votre carte produit
3. Gap : 24px
4. Wrap : activez « Wrap » dans les propriétés Auto Layout pour que les cartes passent à la ligne
5. Largeur du container : « Fill » pour qu’il prenne toute la largeur
6. Largeur de chaque carte : « Fill » puis min-width 280px

C’est exactement comme un CSS Grid avec grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)).

Étape 6 : Le footer

Structure type d’un footer professionnel :

1. Auto Layout horizontal avec 4 colonnes
2. Colonne 1 : Logo + description courte + réseaux sociaux
3. Colonne 2 : Navigation (liens principaux)
4. Colonne 3 : Services / Ressources
5. Colonne 4 : Contact (adresse Dakar, téléphone +221, email)
6. En bas : une barre avec copyright et liens légaux

Background : Neutral-900 (#111827), texte : blanc et Neutral-400 pour les liens.

Étape 7 : Prototyper les interactions

Transformez votre maquette statique en prototype cliquable :

1. Passez en mode Prototype (onglet en haut à droite)
2. Sélectionnez un élément (ex: bouton du menu)
3. Glissez la flèche bleue vers la page de destination
4. Configurez l’interaction :
   • Trigger : On click
   • Action : Navigate to
   • Animation : Smart Animate (Figma anime automatiquement les différences)
   • Duration : 300ms
   • Easing : Ease out

Interactions avancées

• Hover sur bouton : Trigger « While hovering » → Change to (variante hover du composant)
• Menu mobile : On click → Open overlay (panneau latéral avec slide in from left)
• Scroll : Fixez le header avec « Fix position when scrolling » dans les constraints
• Carrousel : Utilisez des variantes de composant avec Smart Animate entre chaque slide

Étape 8 : Préparer le handoff développeur

La maquette terminée, facilitez le travail du développeur :

Nommage des calques

Renommez systématiquement vos calques avec une convention claire :

• header/nav, header/logo, header/cta-button
• hero/title, hero/subtitle, hero/image
• section/features, card/feature-1

Exporter les assets

• Sélectionnez une icône ou image → panneau Export (en bas à droite)
• Ajoutez les formats : SVG pour les icônes, PNG @2x pour les images
• Cliquez « Export » pour télécharger

Le mode Dev (gratuit)

Partagez votre fichier avec le développeur (bouton Share). En mode Dev, il peut :

• Inspecter les propriétés CSS de chaque élément
• Copier les couleurs, tailles, espacements
• Voir les mesures entre les éléments (sélectionner un élément + Alt + survol)
• Exporter les assets directement

Les raccourcis Figma indispensables

Ressources gratuites pour enrichir vos maquettes

• Figma Community : Des milliers de templates, UI kits et wireframes gratuits. Cherchez « dashboard », « e-commerce », « landing page »
• Unsplash (plugin Figma) : Photos libres de droits directement dans Figma
• Iconify (plugin) : Accès à +100 000 icônes (Material, Heroicons, Phosphor…)
• Content Réel (plugin) : Remplit vos maquettes avec des noms, avatars et textes réalistes
• Stark (plugin) : Vérifie les contrastes d’accessibilité directement dans Figma

Erreurs courantes à éviter

• Ignorer l’Auto Layout : Placer les éléments « à la main » avec des positions absolues rend la maquette fragile et non-responsive
• Ne pas créer de composants : Si vous copiez-collez un bouton 20 fois, vous devrez modifier chaque copie individuellement
• Oublier le mobile : Au Sénégal, la majorité de vos utilisateurs naviguent sur mobile. Concevez mobile-first
• Trop de couleurs : Limitez-vous à 2-3 couleurs maximum. Utilisez des nuances de gris pour le reste
• Textes illisibles : Minimum 16px pour le corps de texte, et un ratio de contraste d’au moins 4.5:1
• Ignorer les marges : Utilisez une grille de 12 colonnes (Layout Grid dans le frame) pour aligner vos éléments

Exercice pratique : maquettez une landing page en 1 heure

Mettez en pratique avec cet exercice concret :

1. 0-10 min : Créez votre fichier, frame Desktop 1440px, et définissez 3 couleurs + 2 styles de texte
2. 10-25 min : Construisez le header (logo + 4 liens + bouton CTA) et le hero (titre + sous-titre + bouton + image placeholder)
3. 25-40 min : Section « 3 avantages » — créez une carte composant avec icône + titre + texte, dupliquez-la 3 fois en Auto Layout horizontal
4. 40-50 min : Section témoignages — photo ronde + citation + nom, 2-3 témoignages côte à côte
5. 50-60 min : CTA final + footer, puis connectez le prototype (boutons → scroll to section)

Partagez votre résultat avec le lien Figma pour obtenir des retours. La communauté Figma est très activé et bienveillante — n’hésitez pas à publier vos premiers travaux.