Des breakpoints Figma aux media queries CSS

Réponse rapide : Figma n'a pas de notion intégrée de breakpoints comme le CSS. Les designers simulent le responsive avec des frames séparés par taille d'écran, ou avec le redimensionnement fluide de l'Auto Layout (fill/hug) qui ne nécessite aucune media query. L'approche utilisée dans le design détermine si le CSS généré a besoin de règles @media explicites ou non.

Figma n'a en réalité pas de breakpoints

Autant le dire clairement, car c'est une idée reçue fréquente : Figma n'a aucune fonctionnalité native du type « définir un breakpoint ici » comparable à une media query CSS. Ce que les designers font réellement à la place se répartit en deux schémas, qui se convertissent en CSS de façon très différente.

Schéma 1 : des frames séparés par taille d'écran

L'approche traditionnelle consiste en un frame distinct pour desktop, tablette et mobile — chacun conçu à la main à sa propre largeur. Cela se convertit directement en breakpoints CSS explicites : la mise en page de chaque frame devient les styles à l'intérieur d'un bloc @media (min-width: ...) correspondant, et le travail du développeur consiste à décider où placer les vraies valeurs de breakpoint (en s'alignant sur les largeurs des frames, ou sur des breakpoints standards comme 768px/1024px), puisque les largeurs des frames Figma sont des décisions de design arbitraires, pas une spécification CSS.

C'est la bonne approche à privilégier quand les mises en page sont structurellement différentes d'une taille à l'autre — pas seulement reformatées, mais réellement différentes (une sidebar qui devient une barre de navigation basse, une grille à 3 colonnes qui devient une colonne unique avec un contenu réorganisé).

Schéma 2 : le redimensionnement fluide de l'Auto Layout — souvent sans media query

L'autre schéma s'appuie sur le comportement de redimensionnement de l'Auto Layout — « fill container » et « hug contents » — réglé sur un seul frame plutôt que de redessiner toute la mise en page à chaque largeur. Une rangée de cartes réglée pour passer à la ligne et remplir l'espace disponible, une sidebar à largeur fixe à côté d'une zone de contenu principale en « fill », un texte qui se reformate naturellement dans un conteneur flexible — rien de tout cela n'a besoin de breakpoint. C'est le même comportement CSS que flex-wrap, des largeurs en pourcentage et min-width/max-width vous donnent sans la moindre règle @media.

Cela vaut la peine d'être souligné, car c'est l'enseignement le plus utile pour relire du CSS généré : tous les détails responsives ne doivent pas devenir une media query. Un design qui s'appuie sur le redimensionnement fluide de l'Auto Layout se convertit en CSS naturellement fluide sur une plage de largeurs — ajouter des breakpoints explicites par-dessus est généralement un travail superflu qui reproduit un comportement que la mise en page possède déjà.

Où la traduction manuelle se trompe généralement

• Ajouter des breakpoints là où le CSS fluide couvre déjà le besoin, ce qui produit plus de règles @media que le design n'en a réellement besoin et une feuille de style plus difficile à maintenir que ce que la mise en page justifie.
• Manquer un vrai breakpoint quand un design a effectivement un frame mobile structurellement différent, et essayer de forcer la mise en page desktop à se reformater en quelque chose qu'elle n'a jamais été conçue pour devenir.
• Choisir des valeurs de breakpoint en pixels arbitraires qui ne correspondent ni aux largeurs des frames du design ni à l'échelle de breakpoints déjà existante du projet, créant une valeur isolée qu'aucun autre CSS du projet n'utilise.

Comment MarkupGen gère cela

Le comportement responsive est généré à partir des contraintes de redimensionnement réelles du frame plutôt qu'ajouté comme une passe manuelle séparée — les réglages fill/hug de l'Auto Layout se traduisent automatiquement en CSS fluide, selon la même distinction que ci-dessus. Pour les designs où une mise en page mobile réellement différente existe (ou doit être générée à partir d'un seul frame desktop), MarkupGen peut produire une mise en page mobile ou desktop distincte générée par IA — voir Design responsive Figma : mises en page mobile et desktop expliquées pour comprendre comment cela fonctionne. Pour la correspondance Auto Layout vers Flexbox qui sous-tend tout cela, voir Auto Layout to CSS.

Essayez-le sur votre propre design

La façon la plus rapide de voir de quel schéma votre propre design a réellement besoin est de le faire passer dans l'outil et de vérifier la présence — ou l'absence — de règles @media dans le CSS généré. Essayez MarkupGen gratuitement sur votre propre fichier Figma, ou consultez la page du convertisseur Figma vers HTML pour voir ce qui est inclus.