FigmaGRILLE RESPONSIVE FIGMA
Prérequis
- Breakpoints projet validés (ex. 390 / 768 / 1280 px)
- Tokens spacing publiés (gutter, section, container)
- Convention container max-width documentée
- Frames desktop, tablette et mobile planifiés
Sans grille et breakpoints documentés, chaque développeur invente marges et largeurs max — le rendu diverge entre pages et sprints. Les layout grids Figma, combinées aux tokens spacing, donnent au front des repères identiques à la maquette. Vous allez aligner frames responsive, notes Dev Mode et implémentation Tailwind ou CSS grid.
Définir grilles et breakpoints dans Figma
Créez un frame par breakpoint clé, nommé explicitement (`/home — mobile 390`, `/home — desktop 1280`). Activez layout grid aligné sur les tokens.
Utilisez auto-layout pour les sections internes : direction, gap et padding référencent `--spacing-*`. Distinguez blocs full-bleed vs contenu centré.
Documentez le comportement entre breakpoints : empilement vertical, passage 2 colonnes → 1, navigation hamburger.
Traduire la grille en CSS ou Tailwind
Mappez gutter et marges : gutter 24 → `gap-6` ou `var(--spacing-gutter)`. Container max-width → `max-w-7xl mx-auto px-4 md:px-8`.
Pour CSS grid : `grid-template-columns: repeat(12, 1fr)` avec `column-gap` tokenisé. Card en grille 3 colonnes : `col-span-4` desktop, `col-span-12` mobile.
Si vous adoptez les container queries en code, documentez les seuils en plus des breakpoints viewport.
Handoff Dev Mode et validation
Ajoutez des notes Dev Mode sur chaque template : max-width container, padding section vertical, comportement sticky header.
Lors de la revue handoff (15 min), le dev compare les mesures auto-layout aux tokens du repo. Les écarts sont corrigés dans Figma avant merge.
Complétez avec figma-design-tokens-css-variables pour les espacements et figma-handoff-dev-mode pour le process global.
Erreurs fréquentes
Trois frames détachées sans contraintes : le responsive devient trois maquettes indépendantes.
Gutter différent entre Figma (20) et code (16) « pour gagner de la place ».
Oublier les états tablette paysage ou les très grands écrans (> 1440 px).
Auto-layout désactivé sur les listes : le dev ne sait pas si le gap est fixe ou fluide.
Ce qu'il faut retenir
Breakpoints identiques Figma ↔ code.
Grille tokenisée ; pas de px orphelins.
Auto-layout = contrat flex/grid pour le front.
Notes Dev Mode + revue courte = moins de rework responsive.
FAQ
Non : fixez les clés (mobile, desktop) et documentez le comportement fluide entre les deux. Le dev utilise min/max-width standards.
Section auto-layout full width + sous-frame container centré. Notez explicitement quelle partie sort du container.
Optionnel. Si le code les utilise, fournissez au moins un cas limite (carte dans colonne étroite) pour valider le design.