Comment utiliser la mise en page automatique dans Figma

Auto Layout est un outil essentiel pour chaque concepteur et utilisateur de Figma. Cette fonctionnalité vous permet d'apporter des modifications telles que le redimensionnement ou le repositionnement des cadres et des objets. Auto Layout vous permettra d'ajuster la hauteur et le poids d'un élément, par exemple, avec un réglage automatique, réduisant ainsi votre travail de moitié.

Étant donné que la taille de l'écran change en fonction de l'appareil ou du navigateur que l'utilisateur utilisera pour accéder au site Web, la mise en page automatique permet aux éléments à l'intérieur des cadres de s'adapter à ces changements. Cela rend la disposition et la structure plus précises et en synergie. Lisez la suite pour savoir comment utiliser la mise en page automatique dans Figma et ses fonctionnalités.

Utilisation de la mise en page automatique

Pour utiliser la mise en page automatique et toutes ses fonctionnalités, vous devez d'abord l'ajouter à un cadre sur lequel vous travaillez, qui peut être un nouveau cadre ou un cadre contenant du contenu, des objets et des composants. Après avoir sélectionné le cadre ou les objets, voici comment y ajouter une mise en page automatique :

• Appuyez sur « Alt + A » votre clavier (fonctionne sur Mac et Windows).
• Faites un clic droit sur les objets ou composants et cliquez sur Mise en page automatique (vous devez ajouter cette fonctionnalité à chaque composant car c'est impossible en masse).
• Appuyez sur l'icône plus à côté de l'option « Mise en page automatique » dans le menu de Figma.

En plus d'ajouter la mise en page automatique à votre cadre, vous pouvez effectuer diverses tâches, depuis l'empilement de cadres jusqu'à la duplication, l'organisation et la suppression d'objets.

Ajout et suppression d'objets

Ajouter des objets à votre cadre est assez simple. Il vous suffit de saisir l'objet que vous souhaitez ajouter et de suivre l'indicateur. Et si vous souhaitez en supprimer un, faites-le glisser et appuyez sur Supprimer. Si vous choisissez d'ajouter un objet plus grand que le cadre parent, vous devrez éviter les paramètres par défaut de Figma pour pouvoir le faire. Vous pouvez le faire en maintenant enfoncé le bouton « Ctrl » pour Windows et « Commande » pour Mac.

Duplication d'objets

Si vous souhaitez ajouter deux objets identiques ou plus au cadre, vous pouvez les dupliquer, ce qui constitue une fonctionnalité de calque automatique utile. Voici comment procéder :

1. Appuyez sur l'objet que vous souhaitez dupliquer.
   
2. Maintenez simultanément les boutons « Ctrl » et « D » si vous avez Windows.
   
3. Pour Mac, dupliquez en maintenant enfoncés les boutons « Commande » et « D ».
   

Organiser les objets

Si vous n'aimez pas l'apparence de votre cadre et l'organisation des objets et composants à l'intérieur, vous pouvez les réorganiser. Si vous avez fusionné deux calques, vous devez contourner les paramètres par défaut de Figma en appuyant sur « Ctrl » pour Windows et « Commande » pour Mac pour accéder à l'option de sélection approfondie et déplacer le composant du calque initial. Cependant, s'il s'agit d'une seule image, vous pouvez sélectionner un objet et le déplacer ailleurs, comme pour ajouter des objets, ou utiliser la touche fléchée.

Niveaux de mise en page automatique

Une autre fonctionnalité de la mise en page automatique consiste à combiner plusieurs images en une seule pour créer une interface plus compliquée dans laquelle vous pouvez superposer différents niveaux de mise en page automatique, tels que des boutons et des rangées de boutons, une publication et une chronologie. Chaque niveau vous permet d'ajouter un objet supplémentaire à votre cadre. Les niveaux des boutons et des rangées de boutons sont horizontaux, tandis qu'une publication est une couche verticale dans laquelle vous pouvez saisir des descriptions, des images, etc.

Lorsque vous empilez deux cadres, ils fusionnent et acquièrent les propriétés d'un cadre parent. Cela permet à l'utilisateur d'implémenter des objets réglables. Vous pouvez en saisir un et le mettre sur un autre pour joindre deux images. Pour ce faire, vous devez :

1. Choisissez un cadre et tout ce que vous souhaitez y ajouter.
   
2. Appuyez sur « Maj + A » pour ajouter un cadre de mise en page automatique.
   

Fonctions de mise en page automatique

L'option Mise en page automatique de Figma possède de nombreuses propriétés ou fonctions précieuses, allant de la direction et de l'ordre d'empilement à l'espacement, au redimensionnement et à l'alignement. Cette section parlera de chacune de ces fonctions plus en détail.

Direction

Comme son nom l’indique, la direction fait référence à l’ordre des objets dans un cadre. Lors de l'utilisation de la mise en page automatique, les objets peuvent être placés :

• Verticalement – ​​Les objets sont placés sur l’axe y. Cette option convient aux listes, menus, fils d'actualité, etc.
• Horizontalement – ​​Objets et composants sur l'axe X (boutons, icônes, etc.).
• Position d'enroulement – ​​Les objets sont définis dans plusieurs colonnes et lignes.

Ordre de superposition

Vous pouvez choisir l’ordre d’empilage qui correspond le mieux à votre cadre. Il s'agit d'un changement visuel uniquement puisque l'ordre d'empilement reste le même (si c'est 1,2,3, il reste 1,2,3 mais avec des ajustements visuels). Lorsque des objets sont empilés les uns sur les autres, vous pouvez choisir lequel sera au-dessus. Ainsi, par exemple, si vous avez trois éléments marqués 1, 2 et 3, vous pouvez choisir 1 ou 3. Voici comment procéder :

1. Choisissez le cadre Mise en page automatique.
   
2. Accédez à l’option Mise en page automatique à droite de votre écran.
   
3. Appuyez sur les trois points horizontaux pour ouvrir les options avancées.
   
4. Recherchez l’option « Empilage de toile ».
   
5. Choisissez « Premier en haut » ou « Dernier en haut ».
   

Position absolue

Une autre propriété « Layer Flow » est une position absolue, outre l’ordre et la direction d’empilement. Cette fonctionnalité vous permet de placer un objet où vous le souhaitez, en ignorant les limites du cadre. Voici comment l'activer :

1. Prenez un objet et placez-le à l'intérieur du cadre.
   
2. Dans le menu de droite, à côté des valeurs de « X » et « Y », appuyez sur l'icône ressemblant à un carré sans bords avec un plus à l'intérieur.
   
3. Déplacez l'objet le long des lignes du cadre.
   

Réglage de l'écart

Il existe quelques fonctionnalités que vous pouvez ajuster en matière d'espacement, telles que l'espace. Vous avez deux manières de modifier l'écart : automatiquement et en saisissant un écart spécifique. Si vous souhaitez que votre écart soit aussi grand que possible, vous devez sélectionner le paramètre automatique dans le menu Mise en page automatique. Mais si vous souhaitez saisir vos valeurs, saisissez-les dans les cases assignées.

De plus, le réglage de l'écart peut être défini dans toutes les directions. Si vos icônes sont uniquement horizontales et verticales, vous pouvez sélectionner un espace horizontal entre elles. Cependant, s’ils sont en position d’enroulement, vous pouvez ajuster les paramètres d’écart vertical et horizontal.

Paramètre d'alignement

Après avoir configuré les fonctionnalités de direction, de remplissage et d'espacement, vous pouvez ajuster l'alignement de l'objet enfant dans votre cadre, car cette fonctionnalité dépend des paramètres d'espacement. Vous ne pouvez pas modifier l'alignement de chaque objet, mais choisissez un motif proposé dans le menu de Mise en page automatique. Vous pouvez cliquer sur la grille 3×3 dans le menu et sélectionner l'alignement souhaité. Cela peut être fait avec les touches fléchées ou les boutons WSAD de votre clavier.

De plus, vous pouvez choisir ici le paramètre automatique pour basculer les alignements horizontaux et verticaux sous forme de ligne. Avec des valeurs spécifiques, vous pouvez avoir les neuf options (en haut à gauche, en bas à gauche, à gauche, à droite à gauche, en bas à droite, etc.).

Vous pouvez également ajuster l'alignement du texte en activant cette option dans le menu et en maintenant le bouton « B ».

Redimensionnement

Les options de redimensionnement de la mise en page automatique ont de nombreuses propriétés supplémentaires telles que le contenu des câlins, l'option de remplissage du conteneur, l'ajustement de la largeur et de la hauteur, les dimensions, etc. Vous pouvez sélectionner l'option automatique si vous souhaitez que vos valeurs soient fixes, mais cela limite les possibilités. Pour le redimensionnement, il est recommandé de définir vos valeurs.

Vous pouvez sélectionner une valeur fixe ou la définir sur les dimensions maximales ou minimales possibles pour la largeur et la hauteur. Le contenu Hug vous permet d'ajuster la taille d'un cadre en fonction de l'objet enfant, tandis que l'option de remplissage du conteneur redimensionne un objet en fonction du cadre parent.

Création de cadres uniques avec mise en page automatique

La mise en page automatique, en tant que l'une des fonctionnalités essentielles de Figma, peut ajuster votre cadre, vos objets et vos compartiments à l'intérieur selon vos préférences. Ses propriétés et fonctionnalités sont multiples, permettant de créer un produit propre et soigné. Auto Layout est un outil fondamental que vous devez maîtriser avant de travailler dans Figma.

Quelle fonction de mise en page automatique utilisez-vous le plus ? Faites-nous savoir dans la section commentaires ci-dessous.