Système visuel de référence pour l’alignement et la composition.
Une Layout Grid est une grille structurelle superposée à un frame dans Figma, servant de guide invisible pour positionner, aligner et espacer les éléments d’interface selon une logique spatiale cohérente.
Elle matérialise une architecture de page fondée sur des principes de design systémique souvent inspirée de grilles classiques comme la grille à 12 colonnes, la grille modulaire ou la grille centrée.
Composants typiques d’une Layout Grid
- Colonnes : zones actives où le contenu s’insère (ex. 12 colonnes pour une flexibilité maximale).
- Gouttières (gutters) : espaces entre les colonnes, assurant une respiration visuelle.
- Marges extérieures (margins) : espaces entre les bords du conteneur et la première/dernière colonne.
- Lignes de base (baseline grid – optionnel) : alignement vertical du texte (moins utilisé dans Figma que dans les logiciels de PAO).
Rôle dans le design responsive
La grille permet de :
- Adapter le contenu à différents breakpoints (mobile, tablette, desktop) en ajustant le nombre de colonnes, les gouttières ou les marges.
- Maintenir la cohérence visuelle à travers les écrans grâce à un système de proportions réutilisable.
- Faciliter la collaboration entre designers et développeurs, la grille servant de langage commun pour la structure HTML/CSS (ex. correspondance avec CSS Grid ou frameworks comme Bootstrap).
Enjeux d’accessibilité & lisibilité
- Une grille bien conçue favorise un flux de lecture prévisible (gauche → droite, haut → bas), essentiel pour les utilisateurs de lecteurs d’écran ou ceux en navigation clavier.
- Elle évite les alignements aléatoires qui peuvent désorienter les personnes en situation de handicap cognitif ou visuel.
- Les gouttières garantissent un espacement suffisant entre les zones interactives, respectant les critères WCAG (ex. 44×44 px minimum pour les cibles tactiles).
Bonnes pratiques dans Figma
- Appliquer la grille au niveau du frame racine (page ou section).
- Utiliser des guides intelligents en complément pour affiner l’alignement.
- Documenter les valeurs (colonnes, gouttières, marges) dans une page “Design Tokens” ou via des plugins comme Similay ou Tokens Studio.
- Ne pas confondre Layout Grid (structure globale) et Auto Layout (comportement local des composants).