Utilisez le flux de disposition automatique de la grille

Avant de commencer

Qui peut utiliser cette fonctionnalité

Disponible sur tous les forfaits

Toute personne disposant d'un accès de type peut éditer peut utiliser la disposition automatique

La grille est l'un des trois flux de disposition automatique que vous pouvez appliquer aux cadres. Il est composé de « cellules » organisées en lignes et colonnes où vous pouvez placer des calques et des ressources. Les objets peuvent s'étendre sur plusieurs cellules, et lorsqu'un cadre utilisant une grille est redimensionné, les objets de ces cellules s'adaptent en conséquence.

Le flux de disposition automatique de la grille est idéal pour créer des designs tels que des structures bento, des tableaux de bord et des mises en page éditoriales.

Glossaire

• Cellule : intersection entre une colonne de grille et une ligne de grille
• Calque de cellule ou objet de cellule : calque ou objet à l'intérieur d'une cellule. Ils sont considérés comme des calques enfants placés à l'intérieur d'une grille.
• Enfant : calque qui se trouve à l'intérieur d'un contenant
• Contenant : structure (par ex. une cellule) ou une calque (un cadre ou un composant) qui peut contenir d'autres couches
• Imbriqué : décrit un calque qui réside à l'intérieur d'un conteneur
• Parent : calque (c'est-à-dire des cadres, composants, groupes et sections) qui contient d'autres calques
• Extension : capacité d'un objet de cellule à occuper plusieurs cellules à la fois
• Niveau supérieur : calque qui se trouve directement sur le plan de travail et qui n'a pas de parent
• Piste : une ligne ou une colonne individuelle

Colonnes et lignes

Le flux de mise en page automatique de la grille introduit un contrôle de mise en page bidimensionnel (lignes et colonnes) dans vos designs. Une fois que vous avez activé la grille sur une frame, vous pouvez choisir le nombre de lignes et de colonnes souhaité en cliquant sur le sélecteur de grille dans la barre latérale de droite. Saisissez une valeur dans les champs Number of columns et Number of rows, ou utilisez le sélecteur interactif.

Redimensionner les colonnes et les lignes

La taille de chaque colonne et ligne est définie sur Auto, et elle est calculée en fonction de l'espace restant après avoir pris en compte les autres valeurs d'espacement et les tailles des colonnes ou des lignes.

Pour redimensionner une piste (colonne ou ligne) :

1. Sélectionnez le cadre.
2. Passez votre curseur en haut ou sur la gauche du cadre. Vous pouvez également survoler la piste souhaitée avec votre curseur ou sélectionner un élément de cette piste. Un point bleu apparaît.
3. Survolez le point bleu et cliquez sur l'étiquette indiquant la taille de la piste qui apparaît.
4. À partir de là, vous pouvez redimensionner la piste de la manière suivante :
   • Dimensionnement automatique : pour redimensionner automatiquement la piste en fonction de l'espace disponible, saisissez Auto ou A, puis appuyez sur Entrée/Retour
   • Taille spécifique : cliquez et faites glisser le bord de la piste pour redimensionner avec une valeur précise.

Espacement

Écart

Gap between définit la distance entre les colonnes et les lignes. Vous pouvez le faire en utilisant les champs Gap between rows et Gap between columns dans la barre latérale droite lorsque la mise en page automatique de la grille est sélectionnée. Saisissez une valeur numérique dans le champ, déplacez les valeurs à l'aide des touches fléchées ou faites varier la valeur dans le champ à l'aide du curseur.

Remplissage

Le remplissage contrôle l’espace vide ou blanc entre les limites d’un cadre de la disposition automatique et les cellules du cadre. Vous pouvez définir le remplissage de manière uniforme, verticale et horizontale, ou définir des valeurs différentes pour le remplissage supérieur, droit, bas et gauche.

• Par défaut : les contrôles de remplissage sont composés par défaut du remplissage vertical (haut et bas) et du remplissage horizontal (gauche et droite).
• Remplissage personnalisés : cliquez sur pour utiliser les champs de remplissage supérieur, droit, inférieur et gauche.
• Remplissage uniforme ou raccourci CSS : maintenez la touche ⌘ Command ou Ctrl enfoncée et cliquez dans n’importe quel champ de remplissage. Vous pouvez également saisir un raccourci CSS.
  • Exemple : saisir 1,2,3,4 définit le haut sur 1 px, la droite sur 2 px, le bas sur 3 px et la gauche sur 4 px
  • Exemple : saisir 1,2 définit haut/bas (1px) et gauche/droite (2px)

Redimensionnement

Les options de redimensionnement sont disponibles pour tout calque enfant d’un cadre de la disposition automatique en grille, y compris les cadres de la disposition automatique en grille imbriqués. Les options de redimensionnement ne sont pas disponibles pour les cadres de disposition automatique de niveau supérieur utilisant la grille. En savoir plus sur l’imbrication des cadres de la disposition automatique.

Les propriétés de redimensionnement suivantes sont disponibles :

• Largeur ou hauteur fixe : les dimensions de l'objet cellule ou du cadre de la disposition automatique de la grille imbriquée restent les mêmes, quelle que soit la taille de la cellule ou du cadre parent
• Remplir le contenant : l’objet cellule ou le cadre de grille imbriqué s’étend pour occuper la largeur ou la hauteur de la cellule ou du cadre parent.

Manipuler des objets dans les cellules de la grille

Ajouter et déplacer des objets dans une grille

• Créer des formes, des frames et des calques de texte: créez ces éléments directement dans une cellule
• Déplacer des objets dans une grille : faites glisser un ou plusieurs calques et déposez-les dans une cellule vide ou entre deux cellules
• Repositionner des objets enfants : faites glisser un ou plusieurs objets enfants et déposez-les dans une cellule vide ou entre deux cellules
• Dupliquer des objets existants : sélectionnez un ou plusieurs objets enfants et utilisez le raccourci clavier ⌘ Command D pour Mac, et Ctrl D pour Windows

Les objets seront disposés successivement de gauche à droite, puis de haut en bas. S'il n'y a pas suffisamment de cellules vides disponibles, Figma repositionnera les objets en trop dans les cellules disponibles ou créera de nouvelles lignes ou colonnes pour les accueillir.

Étendre des objets sur plusieurs cellules

Vous pouvez faire en sorte qu'un objet enfant s'étende sur plusieurs cellules d'une grille, ce qui lui permet de se redimensionner lorsque le parent est redimensionné.

Pour étendre un objet enfant, sélectionnez-le et redimensionnez-le sur le plan de travail. Lors du redimensionnement, si l’objet s’aligne sur l'arête d’une cellule, sa propriété de disposition automatique sera mise à jour pour remplir le contenant selon la nouvelle dimension (largeur ou hauteur).

Aligner les objets avec leurs cellules

Dans un cadre de disposition automatique de grille, un objet enfant peut être aligné avec sa cellule.

Sélectionnez un objet enfant et utilisez les boutons d'alignement dans la section Position de la barre latérale droite.

• Aligner à gauche
• Aligner centres horizontaux
• Aligner à droite
• Aligner en haut
• Aligner centres verticaux

Si vous avez plusieurs objets enfants sélectionnés, chacun s'alignera sur sa cellule respective.

Essayer

Pour vous exercer de manière pratique, procurez-vous une copie de notre fichier de la Communauté Grille.