1. La puissance de l’Auto-Layout Figma

L’Auto-Layout est l’équivalent direct du Flexbox CSS dans Figma. Il permet à vos cadres de s’adapter automatiquement lorsque le texte intérieur change ou lorsque la taille de l’écran varie :

• Direction de disposition : horizontale ou verticale.
• Espacement interne (Padding) indépendant : haut, bas, gauche, droite.
• Espacement entre enfants (Gap) et retour à la ligne automatique (Wrap).
• Comportement de redimensionnement : Hug contents (s’adapte au contenu) ou Fill container (remplit l’espace disponible).

2. Composants et Instances (Le principe du Master Component)

Un Composant (symbole à 4 losanges) est un élément maître réutilisable. Lorsque vous modifiez le composant parent, toutes ses copies dérivées (Instances) se mettent à jour instantanément à travers l’ensemble de votre fichier de maquettes.

3. Variantes de composants et propriétés d’état

Regroupez les différentes déclinaisons d’un même élément sous un unique composant doté de Variantes (ex. Type = Primaire / Secondaire, État = Normal / Hover / Inactif, Icône = Visible / Masquée).

Synthèse pédagogique : Construire vos maquettes avec l’Auto-Layout vous oblige à penser comme un développeur web frontend, garantissant une intégration sans friction ultérieure.