Ce que l'auto-layout résout (et ce qu'il n'est pas)

Le lundi où les textes allemands sont arrivés

Situation vécue dans à peu près toutes les équipes produit : la maquette est validée en français, puis la traduction allemande tombe. « Ajouter au panier » devient « In den Warenkorb legen », trente pour cent plus long. Sur un fichier fait à la main, chaque bouton déborde, chaque carte a son prix qui chevauche le titre, et tu passes ta journée à décaler des calques à la souris sur vingt-quatre écrans. Sur un fichier construit en auto-layout, tu colles les textes traduits et tout se replace tout seul. Même maquette, même deadline, une journée d'écart.

L'auto-layout, c'est un moteur de disposition attaché à une frame. Il empile ses enfants dans une direction, gère l'espace entre eux, et se redimensionne quand le contenu change. Ce n'est pas un gadget de confort : c'est ce qui fait la différence entre un dessin d'interface et une maquette qui se comporte comme la vraie interface.

Le parallèle avec flexbox, à connaître par coeur

Les développeurs qui reçoivent tes maquettes pensent en CSS. L'auto-layout est calqué sur flexbox, et la correspondance est presque terme à terme :

Retiens ce tableau : quand un développeur te demande « c'est quoi le gap ici ? », il lit littéralement ton panneau Auto layout. Une maquette bien construite se traduit en CSS sans interprétation, et c'est un argument très concret pour vendre l'auto-layout à une équipe qui traîne des pieds.

Mettre une frame en auto-layout

Sélectionne deux ou trois calques, puis Shift + A. Figma crée une frame auto-layout autour d'eux, en devinant la direction d'après leur disposition. Tu peux aussi partir d'une frame existante et cliquer sur le + de la section Auto layout du panneau de droite. Pour retirer l'auto-layout d'une frame sans la détruire : Alt + Shift + A.

Trois réglages de base apparaissent :

• la direction : horizontale, verticale, ou wrap (les enfants passent à la ligne, disponible depuis 2023),
• l'espacement entre les éléments, le gap,
• le padding interne, réglable côté par côté.

Ce que l'auto-layout n'est pas

Ce n'est pas un système de positionnement libre. Dès qu'une frame est en auto-layout, ses enfants sont ordonnés dans un flux. Tu ne peux plus glisser un élément n'importe où sans changer son rang dans la pile. Ça déroute au début, surtout en venant de Sketch ou d'Illustrator, et c'est la raison pour laquelle certains designers abandonnent au bout d'une heure. Tiens deux jours : le déclic vient vite.

Ce n'est pas non plus magique pour le responsive multi-écran. L'auto-layout gère l'adaptation au contenu (un texte plus long pousse le reste), pas l'adaptation à la largeur d'écran toute seule. Le vrai responsive combine auto-layout, redimensionnement Fill, min/max et parfois des variables. On y vient en partie 4.

Dernier point de vocabulaire : un groupe (Ctrl + G) n'est pas une frame auto-layout. Un groupe est un simple paquet de calques, sans padding, sans flux, sans comportement. Les groupes qui traînent dans un fichier de système sont presque toujours des frames ratées. Je te conseille de les traquer : sélectionne, Shift + A, et le paquet devient pilotable.

Imbriquer, et penser en poupées russes

Une vraie page n'est pas une frame auto-layout, c'en est trente. La page est une pile verticale ; dedans, un header horizontal ; dedans, une frame de liens ; dedans, des boutons. Chaque niveau règle sa direction, son gap et son padding, et l'ensemble respire d'un bloc : supprime une section entière, tout remonte ; insère une bannière, tout descend.

Deux gestes pour naviguer dans ces poupées russes sans t'énerver. Un : la touche Entrée descend d'un niveau dans la sélection et Échap remonte, bien plus fiable que le double-clic qui rate son étage. Deux : quand tu glisses un calque dans une frame auto-layout, Figma affiche une barre d'insertion à l'endroit où il va tomber. Lâche seulement quand la barre est au bon rang, sinon tu passeras ta soirée à réordonner.

À toi

Prends un bouton fait à la main : un rectangle plus un texte centré. Objectif : qu'il survive à n'importe quel libellé sans que tu touches quoi que ce soit.

Correction : sélectionne les deux calques, Shift + A. Le rectangle devient inutile, supprime-le et mets sa couleur en fond de la frame. Règle le padding à 12 en haut et en bas, 20 à gauche et à droite, largeur et hauteur en Hug. Change le texte de « Valider » à « S'inscrire maintenant » : le bouton s'élargit seul, le texte reste calé. Tu viens de fabriquer un composant qui ne cassera jamais sur la longueur du libellé, y compris en allemand.

Règle d'équipe pour finir : dans un fichier qui livre du système, à peu près tout est en auto-layout, sauf les illustrations et les schémas libres. Si tu te surprends à aligner des éléments à la main plus de deux fois, c'est qu'il manque une frame auto-layout.