Auto Layout

Jusqu'ici nous avons utilisé les frames comme des containeurs pour nos designs (Iphone, Desktop).

Les frames peuvent servir de groupe intelligent. En plus de lier nos éléments entre eux, il va nous permettre de gérer l'alignement de nos éléments.

Mettons en place un exemple. Faisons 3 carrés dispersés dans une frame de taille desktop.

Frame selection

Pour grouper les carrés dans une frame, on le sélectionne > clique droit > frame selection.

Activer l'auto-layout

En sélectionnant notre frame qui englobe nos carrés, on peut maintenant dans la section layout de notre panneau des propriétés cliquer sur cet icone pour activer l'auto layout.

La section se renommera Auto layout et l'icone ressemblera à ceci

Choisir le type d'alignement

Il existe 4 types d'alignements:

• Libre (valeur par défaut)
• Alignement vertical
• Alignement horizontal (avec retour à la ligne)
• Grille (beta 2025)

Fixed, Hug & Fill

Un concept très important à maitriser est la gestion des tailles (largeur et hauteur) dans une frame en auto layout.

Taille de la frame

Quand une frame est en auto layout, soit elle peut avoir une taille fixe imposée, soit une taille automatique Hug qui va faire en sorte de s'adapter à l'élément enfant le plus grand sur l'axe actuel (width > horizontal, height > vertical).

Une flèche rouge nous indique comment la frame va se redimensionner en survolant l'option Hug contents.

Taille des éléments enfants

Les éléments enfants d'une frame en auto layout peuvent passer d'une taille fixe définie à une taille lié à celle de la frame via l'option Fill container. Cela forcera la largeur ou la hauteur de prendre la totalité de la place disponible.

Gérer les espacements

Une des utilités clés d'une frame en auto layout est la gestion des espacements, qu'il suffit d'indiquer pour que tout les éléments soient espacés d'un certains nombres des pixels.

Gérer l'alignement dans une frame

Dans la section auto layout, nous avons la possibilité d'aligner verticalement et horizontalement les éléments contenu dans notre frame.

Quand utiliser l'auto layout ?

Toute les frames ne doivent pas être en auto layout, comme celle qui englobe votre design (iphone 13 & 14 ou desktop par exemple). L'auto layout doit être utiliser sur des groupes d'éléments qui doivent avoir un espacement logique et/ou partager un alignement commun.

Mettre en pratique le principe d'auto layout avec l'exercice du cours précédent.

Design de bouton

Maintenant que nous savons utiliser l'auto layout, voyons une façon plus dynamique de faire un bouton.

Le layout

Commençons avec un élément textuel que nous allons grouper dans une frame de taile desktop > desktop 1440x1024. (clique droit > frame selection).

Nomenclature

Il est possible de renommer les éléments dans notre panneau des calques, cela vous facilitera la tâche pour naviguer dans vos éléments ou quand vous travailler en équipe.

Auto layout

Ajoutons l'auto layout, de type horizontal.

Style(s)

Prochaine étape: définir un style, soit un fond coloré (fill) soit des bordures extérieurs (stroke).

Le padding

Activer l'auto layout sur notre frame button va nous permettre de définir le padding vertical et horizontal dans notre frame. Le padding est un espace intérieur, pratique pour créer des espaces neutres.

Résultat

Une fois le padding défini, votre design de bouton est terminé. L'avantage de procéder comme ceci rend votre bouton dynamique: si vous changer votre texte, la taille s'adaptera automatiquement.

Mettre en pratique cette nouvelle technique sur l'exercice précédent, ajouter un bouton contact et ajuster les styles.