Section 11.1.7 : Figma — Design d'interface avec l'IA
🎯 Objectif pédagogique
Découvrir Figma pour concevoir des interfaces utilisateur avant de les coder. Vous serez capable de créer des maquettes (wireframes et mockups) et d'utiliser les outils IA de Figma pour accélérer le processus de design.
Pourquoi designer avant de coder ?
Marc a fait l'erreur classique du débutant : il a codé directement. Au bout de 3 heures, il avait un formulaire laid, mal organisé, avec des boutons trop petits sur mobile. Il a tout jeté et recommencé. Leçon apprise : un développeur qui ne maquette pas perd du temps.
Le design-first, c'est :
- →5 minutes de wireframe = 2 heures d'hésitation en CSS économisées
- →Validation visuelle avant d'écrire une ligne de code
- →Communication claire si vous travaillez en équipe
Figma : l'outil universel
Figma est l'outil de design utilisé par 80% des équipes tech (2025). Gratuit (plan Starter), en ligne (rien à installer), collaboratif (comme Google Docs pour le design).
Démarrer avec Figma
- →Inscrivez-vous sur figma.com
- →Créez un nouveau fichier "Design"
- →L'interface :
- →Canvas : l'espace de travail infini
- →Layers (gauche) : hiérarchie des éléments
- →Properties (droite) : couleurs, tailles, polices
- →Toolbar (haut) : formes, texte, frame
Les concepts clés
| Concept | Quoi | Raccourci |
|---|---|---|
| Frame | Conteneur (= div en HTML) | F |
| Rectangle | Forme de base | R |
| Texte | Bloc de texte | T |
| Auto Layout | Flexbox visuel | Shift+A |
| Components | Éléments réutilisables | Ctrl+Alt+K |
Auto Layout ≈ Flexbox
L'Auto Layout de Figma fonctionne comme Flexbox en CSS :
- →Direction : horizontal ou vertical
- →Gap : espace entre les éléments
- →Padding : espace interne
- →Alignement : centre, gauche, droite
Marc : "Quand j'ai compris que l'Auto Layout de Figma EST le Flexbox du CSS, tout a cliqué. Je dessinais en fait du CSS sans le savoir."
Figma AI — Accélérer le design
Figma a intégré l'IA en 2024-2025 :
- →Figma AI : Génère des designs entiers à partir d'un prompt
- →Make Designs : Décrit votre interface en texte, Figma la génère
- →Auto Layout suggestion : Figma propose automatiquement des layouts
Workflow Figma + Copilot
Workflow ultra-efficace : (1) Maquette rapide dans Figma, (2) Screenshot → GitHub Copilot dans VS Code, (3) Copilot génère le HTML/CSS correspondant. Marc a ainsi créé une landing page en 45 minutes au lieu de 4 heures.
Du wireframe au mockup
| Étape | Fidelité | Objectif | Temps |
|---|---|---|---|
| Wireframe | Basse (N&B, pas de détails) | Structure et navigation | 5-10 min |
| Mockup | Haute (couleurs, images, typographie) | Design final | 30-60 min |
| Prototype | Interactive (cliquable) | Test utilisateur | 60-120 min |
Pour un développeur solo, le wireframe suffit dans 90% des cas.
🏋️ Exercice pratique (20 minutes)
Objectif : Créer un wireframe de page d'accueil dans Figma.
- →Ouvrez Figma → Nouveau fichier
- →Créez un Frame "Desktop" (1440x900)
- →Construisez la structure :
- →Header : logo (rectangle) + 3 liens de navigation (texte)
- →Hero section : titre + sous-titre + bouton CTA
- →3 colonnes de features avec icônes
- →Footer : copyright + liens
- →Utilisez uniquement du gris (#333, #666, #999, #EEE) — pas de couleur
- →Activez Auto Layout sur le header et les colonnes
- →Bonus : essayez Figma AI → "Generate a simple landing page wireframe"
Marc : "En finance, on ne code jamais un modèle quantitatif sans spécifications. Un wireframe, c'est exactement ça : la spec visuelle de votre page."
Pourquoi créer un wireframe avant de coder ?
L'Auto Layout de Figma correspond à quel concept CSS ?