GratuitIntermédiaire2 h 33
Intégrer une maquette Figma
Vous apprendrez à transformer une maquette Figma en page web fidèle, propre et responsive. Lecture des mesures, de la typographie et des couleurs, découpage en composants, mise en page Flexbox et Grid, gestion des états et contrôle de fidélité : le travail quotidien d'un développeur ou d'une développeuse frontend en agence.
Ce que vous saurez faire
- Lire une maquette Figma (cadres, grilles, auto layout, mode développement) et en extraire les informations utiles
- Traduire mesures, espacements, typographie et couleurs en CSS avec des variables
- Découper une maquette en composants réutilisables et nommer ses classes de façon cohérente
- Reproduire un auto layout avec Flexbox ou Grid
- Compléter ce que la maquette ne montre pas : tailles intermédiaires, états, contenus réels
- Contrôler la fidélité de l'intégration et la documenter pour le designer
Prérequis conseillés
Plan du cours
Partie 1 · Lire et mesurer une maquette58 min
- Lire une maquette comme un développeur12 min
- Mesures, espacements et unités13 min
- Typographie : polices, tailles et interlignes12 min
- Couleurs, tokens et contrastes11 min
- Quiz : lire et mesurer une maquette10 min
Partie 2 · Construire l'interface en composants48 min
- Découper en composants13 min
- Reproduire la mise en page avec Flexbox et Grid13 min
- Images, icônes et SVG12 min
- Quiz : construire l'interface en composants10 min
Partie 3 · Responsive, états et contrôle de fidélité47 min
- Responsive quand la maquette ne dit pas tout13 min
- États, interactions et contenus réels12 min
- Contrôler la fidélité de l'intégration12 min
- Quiz : responsive, états et fidélité10 min