Configurer les grilles de mise en page dans Figma

Une grille de mise en page Figma est une superposition par frame sur laquelle les éléments s’aimantent, et la configuration qui reproduit une grille web responsive est la suivante : des grilles de type colonnes avec des colonnes en mode étirement (stretch) et des gouttières et marges fixes, une frame par point de rupture — une frame bureau de 1440px à 12 colonnes / 24 de gouttière / 66 de marge, une frame tablette de 768px à 8 / 24 / 29, une frame mobile de 375px à 4 / 16 / 16 — chacune enregistrée comme un style de grille, de sorte que toute nouvelle frame reçoit la grille de son palier en un clic.

Les chiffres comptent autant que la mécanique : une grille de mise en page est le versant design de la même grille de mise en page que le code implémente, et les deux ne restent un seul système que si elles partagent leurs valeurs. Cet article couvre les réglages, la configuration à trois paliers avec de vrais chiffres, comment le modèle étirement correspond aux colonnes fluides du web, et l’astuce d’audit pour les écrans déjà livrés.

Que signifient les réglages de grille de mise en page de Figma ?

Les grilles de mise en page vivent par frame — sélectionnez une frame, ajoutez une grille — et se déclinent en trois types : une grille carrée uniforme, des rangées et des colonnes. Pour la mise en page, les colonnes sont le type pertinent, et quatre réglages les définissent (la référence officielle de Figma est la documentation des grilles de mise en page) :

• Nombre (Count) — combien de colonnes la frame comporte.
• Type — étirement (stretch), fixe (une largeur de colonne définie, les gouttières n’absorbent rien) ou centré (un bloc fixe de colonnes centré dans la frame).
• Gouttière (Gutter) — l’espace entre les colonnes.
• Marge (Margin) — l’espace entre le bord de la frame et les colonnes extérieures (type étirement uniquement).

L’étirement est le réglage qui correspond aux grilles web modernes : les marges sont fixées, les gouttières sont fixes, et les colonnes se partagent la largeur restante — la même division du travail que les pistes 1fr en CSS, où les membres fixes sont prélevés en premier et où les fractions se partagent le reste. Les types fixe et centré correspondent à l’ancien modèle de canevas fixe ; ils conviennent encore aux plans de travail proches du print, mais pour le responsive, l’étirement est la valeur par défaut honnête.

Comment configurer les trois grilles de points de rupture ?

Une frame par point de rupture, une grille de colonnes par frame, puis chacune enregistrée comme un style. Avec les valeurs de palier courantes :

La marche à suivre : créez les trois frames à ces largeurs, ajoutez une grille de colonnes à chacune, réglez nombre/type/gouttière/marge d’après le tableau, puis enregistrez chaque grille comme un style — Grid/Desktop, Grid/Tablet, Grid/Mobile. Les styles sont la couche de réutilisation : dès lors, plus personne ne ressaisit quatre valeurs par frame ; un nouvel écran reçoit la grille de son palier en un clic, et une modification d’un style se propage à toutes les frames qui l’utilisent.

Comme les colonnes s’étirent, le style porte les décisions et la largeur de la frame en détermine le résultat. Le style bureau sur sa frame de 1440px calcule des colonnes de (1440 − 2 × 66 − 11 × 24) ÷ 12 = 87px ; le même style appliqué à une frame de 1280px donne des colonnes d’≈73,7px. Même grille, largeurs différentes — ce qui est exactement le comportement de la version web entre les points de rupture.

Comment les chiffres du design restent-ils synchronisés avec le code ?

L’échec classique, c’est la divergence silencieuse : le designer estime à l’œil un agencement à peu près à trois colonnes, le développeur implémente des douzièmes exacts, et chaque passation renégocie quels chiffres sont réels. Cette dérive n’est pas de la négligence — ce sont deux sources de vérité faisant ce que deux sources font toujours. La solution, c’est une seule source.

L’export Figma de Scale Composer livre la grille sous forme d’une collection de variables avec un mode par point de rupture : changez de mode et grid/columns, grid/gutter, grid/margin et grid/min-width basculent des valeurs bureau à tablette à mobile, avec la largeur maximale du conteneur à leurs côtés. Les valeurs de palier arrivent dans le fichier sous forme de données plutôt que de réglages saisis à la main — les mêmes chiffres que l’export CSS redéclare par media query.

Ouvrez l’export Figma de la grille dans Scale Composer — la collection Grid avec ses trois modes, un par point de rupture, à côté de la vue grille qui l’a générée.

Une précision honnête sur la portée : Figma applique les grilles de mise en page par frame. Les variables amènent les chiffres du palier dans le fichier où chacun peut les lire et les référencer, mais poser une grille sur une frame — et garder les valeurs des styles de grille alignées sur la collection — reste une action du designer, pas une liaison automatique.

Comment travailler avec une grille une fois posée sur la frame ?

Trois comportements font l’essentiel du travail quotidien. Aimantation : avec la grille visible, les éléments déplacés et redimensionnés s’aimantent aux arêtes des colonnes, ce qui fait de « s’étendre sur quatre colonnes » un geste plutôt qu’un calcul. Visibilité : on active et désactive les grilles avec un raccourci clavier (le raccourci de la famille Ctrl/Cmd-G, selon la plateforme), de sorte que la superposition est un outil que l’on invoque, pas un papier peint qu’on apprend à ignorer. Contraintes : les éléments contraints à gauche-et-à-droite, ou réglés pour se mettre à l’échelle, suivent les colonnes étirées quand la frame est redimensionnée — épinglez une barre latérale à ses colonnes, et une frame plus large l’élargit comme le ferait le navigateur.

Comment auditer un écran livré par rapport à la grille ?

Déposez une capture d’écran de production dans une frame, ajustez la largeur de la frame à celle de la capture, et appliquez par-dessus le style de grille du palier. Chaque dérive devient visible d’un coup d’œil : des éléments à cheval sur les gouttières, des marges qui ont grossi à la traduction, une barre latérale qui s’affiche sur cinq colonnes de large alors que le fichier en indique quatre. L’astuce coûte une minute et transforme « le rendu semble bancal » en une liste de désalignements précis et pointables — la même logique de source unique que les variables, exécutée à l’envers en guise de contrôle.

Lancez le contrôle de parité sur une frame

Configurez les trois styles du tableau ci-dessus, puis vérifiez que la boucle se referme : appliquez le style bureau à une frame de 1200px — la largeur du conteneur — et les colonnes se calculent à (1200 − 132 − 264) ÷ 12 = 67px, la même largeur de colonne que le navigateur produit à l’intérieur d’un conteneur plafonné. Sur la frame de travail de 1440px, le même style donne des colonnes de 87px : cette grille plus large est ce qu’une page non plafonnée calcule à une fenêtre d’affichage de 1440px, de sorte que laquelle des deux le navigateur affiche réellement est décidée par un seul réglage côté code, la largeur maximale du conteneur. Des chiffres que vous pouvez vérifier valent mieux que des chiffres auxquels vous faites confiance — exportez la collection Grid et confrontez-la à vos propres frames.