Boutons et Auto Layout dans Figma : Optimisation des Éléments Interactifs

Étape 1 : Ajouter une disposition automatique

Sélectionner plusieurs éléments (par exemple, une icône et du texte), faire un clic droit et choisir Ajouter une disposition automatique, ou utiliser le raccourci Maj + A. Vous pouvez également cliquer sur l’icône Disposition automatique dans le panneau Design sous Disposition.

Étape 2 : Reconnaître le cadre de disposition automatique

L’icône du cadre dans le panneau Calques change pour indiquer qu’il s’agit d’un cadre de disposition automatique. Cela signifie que le cadre s’ajuste désormais dynamiquement à ses objets enfants.

Étape 3 : Ajuster les paramètres du cadre

La disposition automatique ajoute des cadres dynamiques qui s’ajustent en fonction de leurs objets enfants. Vous pouvez ajuster le fond du cadre, le rayon des coins et les dimensions, horizontalement ou verticalement. Utiliser les options de redimensionnement comme ajuster au contenu pour que le cadre se réduise à la taille de son texte.

Étape 4 : Personnaliser la direction et l’espacement de la disposition

Changer la direction de la disposition (horizontale, verticale ou enroulée). Ajuster l’écart horizontal entre les éléments ou ajouter du remplissage pour créer un espace autour des éléments.

Étape 5 : Garantir la réactivité du bouton

Les boutons créés avec la disposition automatique s’agrandissent ou se réduisent automatiquement à mesure que le texte est saisi, garantissant ainsi la réactivité. Ceci est idéal pour les conceptions nécessitant de l’adaptabilité.

Étape 6 : Empiler et grouper les éléments

Empiler les éléments les uns sur les autres, puis appliquer la disposition automatique pour les regrouper. Cela permet de créer des conceptions organisées et réactives.

Étape 7 : Modifier les paramètres avancés

Ajuster les paramètres de disposition automatique pour contrôler le comportement des contours et de l’empilement dans le cadre de disposition automatique. Modifier le comportement d’empilement pour permettre aux objets de se superposer selon les besoins.

La disposition automatique simplifie la création de boutons et d’autres conceptions réactives, leur permettant de s’adapter facilement aux modifications du contenu et de la mise en page.