De CSS Flexbox à Figma Auto Layout : Propriété par Propriété

Quand flexbox et auto layout parlent la même langue

L'auto layout de Figma n'est pas une idée de design distincte de CSS flexbox. C'est la propre implémentation par Figma du même modèle d'axe principal et d'axe secondaire : un conteneur distribue ses enfants dans une direction, répartit l'espace restant le long de cet axe et les aligne sur l'autre. Si vous connaissez déjà justify-content et align-items, la majeure partie du panneau de propriétés d'auto layout est un exercice de renommage, pas une nouvelle compétence à apprendre. Cette référence parcourt la correspondance propriété par propriété : direction et retour à la ligne, alignement sur les deux axes, gap et espacement, dimensionnement avec fill et hug, et les quelques endroits où auto layout reste délibérément en retrait par rapport à flexbox complet.

Direction et retour à la ligne : flex-direction vers le flow de Figma

CSS définit l'axe principal avec flex-direction: row ou flex-direction: column. Figma expose le même choix comme un réglage de flow sur le frame auto layout : Horizontal pour row, Vertical pour column. Il existe aussi une troisième option, Grid, qui place les enfants en colonnes et en lignes et n'a pas d'équivalent unique en flexbox. Elle emprunte davantage à CSS grid.

Le retour à la ligne est l'endroit où les deux divergent en portée. flex-wrap: wrap en CSS permet aux éléments de passer sur de nouvelles lignes flex, chaque ligne devenant son propre mini axe principal, avec align-content qui contrôle comment ces lignes se répartissent elles-mêmes sur l'axe secondaire. Le bouton Wrap de Figma, disponible sur un frame auto layout Horizontal, donne le résultat visuel, les éléments passent à une nouvelle rangée quand l'espace manque, sans exposer le modèle complet de répartition des lignes derrière. Pour la plupart des composants et grilles de cartes, c'est suffisant. Pour une mise en page qui s'appuie fortement sur flex-wrap avec align-content: space-between, mieux vaut vérifier le résultat à la main après un import.

Alignement sur les deux axes : justify-content et align-items

justify-content répartit l'espace restant sur l'axe principal : flex-start, center, flex-end, ou l'une des valeurs distribuées, space-between, space-around, space-evenly. Le contrôle d'alignement au niveau du frame dans Figma offre les mêmes choix de début, centre, fin, et les modes distribués vivent dans le réglage Gap plutôt que dans une propriété séparée. Plus de détails plus bas. Un détail se transpose exactement : justify-content n'a plus d'effet visible dès qu'un enfant a un flex-grow supérieur à 0, parce que cet enfant consomme tout l'espace restant avant que l'alignement n'entre en jeu. Réglez un enfant auto layout sur Fill container dans Figma et vous verrez la même chose : le réglage d'alignement du frame sur cet axe cesse d'avoir un effet visible, pour la même raison.

align-items fixe l'alignement de l'axe secondaire pour tous les enfants en tant que groupe : flex-start, center, flex-end, ou stretch. La grille d'alignement du panneau de propriétés de Figma correspond directement à cela. Là où les deux se séparent, c'est sur align-self, la propriété CSS qui remplace align-items pour un seul enfant. Auto layout n'a pas de remplacement d'axe secondaire par enfant en 2026. Besoin d'un élément épinglé en haut d'une rangée pendant que ses voisins se centrent ? C'est soit un positionnement manuel en dehors du flux auto layout, soit un frame imbriqué, pas un simple réglage de propriété.

Gap et espacement : gap, column-gap, row-gap

gap en CSS (avec column-gap et row-gap comme paire longue) fixe un espace fixe entre éléments flex adjacents. row-gap n'a d'effet visible qu'une fois flex-wrap: wrap activé et lorsque les éléments s'étendent sur plus d'une ligne ; une rangée flex à une seule ligne n'utilise que column-gap. La valeur Gap de Figma fonctionne de la même façon par rapport à son propre bouton Wrap : sur un frame sans retour à la ligne, il y a une seule valeur de gap le long de l'axe principal, et activer Wrap introduit une deuxième valeur pour l'axe secondaire.

Figma intègre aussi les valeurs distribuées de justify-content de CSS dans Gap via un mode Auto spacing : Between, Around et Evenly correspondent à space-between, space-around et space-evenly. Une mise à jour 2026 d'auto layout a rapproché les cas limites du comportement de flexbox, précisément ici. L'auto gap ne descend désormais jamais sous 0, ce qui correspond à la façon dont un vrai conteneur flex fait s'effondrer les éléments d'un space-between qui débordent vers le début de la rangée plutôt que de les laisser se chevaucher. Un enfant seul dans une pile auto-gap Between s'aligne maintenant sur le bord de début plutôt que de se centrer, à nouveau comme flexbox. La même mise à jour a corrigé le padding sur les enfants Fill container pour suivre le modèle border-box de CSS, si bien que le padding est toujours pleinement respecté au lieu d'être comprimé par un ajustement serré.

Dimensionnement : flex-grow, flex-shrink, flex-basis vers Fill container et Hug contents

flex-grow indique à un élément combien de l'espace restant sur l'axe principal il doit réclamer, proportionnellement à son facteur de croissance. La valeur par défaut de 0 en CSS signifie qu'il ne dépassera pas son flex-basis. L'option de redimensionnement Fill container de Figma est l'équivalent dans l'outil de design : un enfant réglé sur Fill container s'étire pour occuper l'espace restant dans son frame auto layout parent, tout en respectant le padding et le gap du frame, le même rôle que flex-grow joue dans un conteneur flex.

flex-shrink résout le problème inverse : retirer de l'espace pour que les éléments ne débordent pas d'un conteneur trop petit pour leur taille combinée. Figma n'expose pas de facteur de réduction proportionnel. À la place, un frame ou un objet réglé sur Fixed size conserve sa taille quel que soit l'espace disponible, et Hug contents ajuste un objet exactement à ses enfants. C'est l'équivalent de flex-basis: auto sur un élément avec flex-grow: 0, le dimensionnement par défaut basé sur le contenu dont part chaque élément flex avant l'application de la croissance ou de la réduction.

Une contrainte se transpose directement depuis la logique même de flexbox : un frame Figma ne peut pas être réglé sur stretch et hug sur le même axe en même temps, tout comme un élément flex ne peut pas grandir pour remplir l'espace et se réduire pour s'ajuster à son contenu sur ce même axe simultanément. Choisissez un comportement de dimensionnement par axe, en CSS ou dans Figma.

Ce qu'auto layout laisse délibérément de côté par rapport à flexbox

L'équipe de Figma elle-même a décrit auto layout comme un sous-ensemble réfléchi de flexbox, pas une réimplémentation complète. Il couvre la direction, le gap, le padding, l'alignement et le redimensionnement fill ou hug, les propriétés qui portent l'essentiel du poids dans la mise en page d'interface au quotidien. Ce qu'il laisse de côté, ce sont surtout les parties de flexbox qui existent pour gérer le retour à la ligne multiple et les remplacements par élément : pas d'align-self, et Wrap est un simple bouton au niveau du frame plutôt que le modèle complet de répartition des lignes flex derrière flex-wrap avec align-content.

Rien de tout cela ne rend auto layout inadapté à la tâche. Cela en fait un vocabulaire délibérément plus restreint, ciblé sur ce qu'un designer manipule réellement au quotidien. Les éléments manquants sont ceux qu'un développeur ne solliciterait que dans des cas limites.

Ce qu'il reste d'un import propriété par propriété

Direction, alignement, gap et redimensionnement fill ou hug couvrent la grande majorité d'une mise en page flexbox typique, et ils se transposent proprement vers auto layout au point que la traduction est surtout un changement de nom. Les endroits à vérifier à la main après tout import de CSS vers Figma sont ceux que cette référence signale directement : un remplacement align-self par enfant, et une mise en page flex-wrap qui dépend de la répartition de plusieurs lignes par align-content d'une manière précise. Tout le reste, direction, justify-content, align-items, gap, flex-grow et flex-shrink, a une place claire et directe dans le panneau auto layout.

UnHTML lit le CSS flexbox propre à une page et règle automatiquement les propriétés auto layout correspondantes lors de l'import, en ne recourant au positionnement absolu que là où une mise en page n'a réellement aucun équivalent auto layout, comme le cas align-self mentionné plus haut. Le rapport d'import liste chaque repli de ce type, si bien que rien n'est approximé en silence.