Direction, redimensionnement Hug/Fill/Fixed, ordre

Ce qu'on fabrique dans la démo

On part d'une carte produit : image en haut, puis un bloc texte avec titre et prix, puis un bouton. Objectif : que la carte tienne quel que soit le contenu, du titre de trois mots au titre de trois lignes.

Les trois modes de redimensionnement

Chaque frame auto-layout, et chacun de ses enfants, a un réglage de largeur et un réglage de hauteur. Trois valeurs possibles, c'est le coeur du sujet :

• Fixed : la dimension est verrouillée à une valeur en pixels. L'élément ne bouge pas, même si le contenu déborde.
• Hug : la frame se resserre exactement autour de ses enfants. C'est le bon réglage pour un bouton, il fait la taille de son texte plus le padding.
• Fill : l'élément prend toute la place disponible dans son parent. Un titre en Fill occupe toute la largeur de la carte et passe à la ligne au lieu de déborder.

Dans le panneau de droite, ce sont les deux menus déroulants à côté des champs W et H. Dans la démo on passe par les menus pour bien voir les libellés, mais note le double-clic malin : double-cliquer sur le bord d'une frame la met en Hug sur cet axe.

Le piège numéro un

Le titre déborde de la carte ? Neuf fois sur dix, il est en Fixed ou en Hug horizontal alors qu'il devrait être en Fill. En Hug, un texte grandit vers la droite sans jamais passer à la ligne. Passe-le en Fill container : il se limite à la largeur de la carte et wrappe proprement.

Autre piège : la carte entière en Fixed en hauteur. Ajoute une ligne de description et le contenu passe sous le bouton, coupé. Mets la hauteur de la carte en Hug pour qu'elle grandisse avec son contenu.

Troisième cas, plus sournois : un Hug qui semble ne pas marcher. Si une frame en Hug ne se resserre pas, c'est presque toujours qu'un de ses enfants est en Fill. Hug et Fill se définissent l'un par rapport à l'autre : un parent ne peut pas coller à un enfant qui, lui, attend de remplir le parent. Figma résout ce conflit en traitant l'enfant comme du contenu à taille minimale, et le résultat surprend. Quand un redimensionnement te semble illogique, remonte la chaîne parent par parent et vérifie qui est en quoi.

Direction et ordre

La direction se change en un clic, horizontale ou verticale, dans le panneau Auto layout. Pour l'ordre : dans une frame verticale, l'élément le plus haut dans le panneau des calques est le plus haut à l'écran. Tu réordonnes soit dans l'arbre des calques, soit en glissant l'élément dans le canvas, Figma insère une barre pour montrer où il va tomber. Au clavier : Ctrl + [ et Ctrl + ] déplacent l'élément dans la pile.

Le récap de la démo

1. Frame carte : largeur Fixed à 280, hauteur Hug.
2. Image : largeur Fill, hauteur Fixed à 160.
3. Titre et prix : largeur Fill, hauteur Hug.
4. Bouton : largeur Fill pour qu'il s'étire sur toute la carte.

Résultat : on rallonge le titre, on change le prix, on traduit le bouton, la carte s'adapte sans qu'on touche une seule position. C'est ce squelette exact que tu retrouveras dans la carte du design system en partie 2.