Frames et Auto-layout
Contexte
Les éléments qui composent une maquette ou un design quel qu'il soit sont généralement dépendants des autres et/ou d'un ou plusieurs parents communs. Dans Figma on retrouve la notion de « Containers » qui sont des outils visant à fixer des règles sur les comportements que doivent adopter de ces éléments.
Il existe 4 types de containers : Group, Frame, Auto-layout et Section.
Cependant, nous détaillerons ici uniquement les 2 plus utilisés qui sont la frame et l'auto-layout.
Frames
Utiliser le raccourci Option + Command + G pour convertir un élément en frame.
La frame est représentée par cette icône : 
La frame est l'équivalent de la div en HTML, c'est un élément neutre.
Imaginons que nous disposons d'une frame qui contient une forme.
La frame est donc le parent, et la forme correspond, elle, à l'enfant.
Un redimensionnement de la forme n'aura aucune incidence sur la taille de la frame en elle-même, de la même manière qu'un redimensionnement de la frame n'aura aucun impact sur la taille de la forme.
Pour résumer, le comportement des parents n'influe pas sur le comportement des enfants et vice versa.
Auto-layout
Utiliser le raccourci Shift + A pour convertir un élément en auto-layout.
L'auto-layout est représentée par cette icône : 
Imaginons ici aussi que nous disposons d'un auto-layout qui contient une forme.
L'auto-layout se comporte comme la frame en ce qui concerne l'influence du parent sur l'enfant, mais pas concernant l'influence de l'enfant sur le parent car la modification de la taille de l'enfant va provoquer une modification de la taille du parent.
L'auto-layout est l'équivalent de Flexbox en CSS : il embarque tous les éléments que nous pouvons retrouver au sein de ce standard tels que Direction, Justify-Content, Align-Items et Wrap. On retrouve également l'utilisation du padding.
L'intérêt de ce container réside dans la grande flexibilité qu'il apporte aux éléments qu'il contient. Au lieu de redimensionner manuellement lors du passage en mode mobile, l'auto-layout nous permettra simplement d'inverser la direction des éléments, ajuster la manière dont ils sont alignés ou encore de modifier le gap qui les sépare.
