Explorez les propriétés de disposition automatique
Cet article est disponible à la fois pour l’ancienne interface utilisateur Figma et la nouvelle interface utilisateur Figma. Utilisez le bouton en bas à gauche de la page pour sélectionner votre interface utilisateur actuelle. Faites connaissance avec UI3 : la nouvelle conception de Figma →
Avant de commencer
Qui peut utiliser cette fonctionnalité
Disponible sur tous les forfaits
Les utilisateurs disposant d’un accès can edit
(peut modifier) un fichier peuvent ajouter la disposition automatique aux cadres et aux objets.
Vous connaissez déjà les propriétés de disposition automatique ? Découvrez comment utiliser la disposition automatique →
La disposition automatique est une propriété que vous pouvez ajouter aux cadres et aux composants. Elle vous permet de créer des designs capables de grossir ou de rétrécir pour mieux se réajuster à la taille de leur contenu au fur et à mesure. Cela est très pratique lorsqu'il vous faut ajouter de nouveaux calques, ajouter davantage de texte ou maintenir l'alignement au fur et à mesure de l'évolution de vos designs.
Il existe de nombreuses façons d'utiliser la disposition automatique :
- Créez des boutons qui grossissent ou rétrécissent en fonction du texte.
- Créez des listes qui s’adaptent au fur et à mesure que des éléments sont ajoutés, supprimés ou masqués.
- Combiner les cadres de la disposition automatique pour créer des interfaces complètes.
La mise en page automatique est une fonctionnalité puissante avec de nombreuses pièces mobiles et utilisations. Dans cet article, nous allons détailler le fonctionnement des différents aspects de la mise en page automatique.
Les cadres de disposition automatique ont des propriétés différentes des cadres classiques. Lorsque vous appliquez la disposition automatique, vous observerez quelques modifications dans le panneau de droite.
Vous ne pourrez pas effectuer les opérations suivantes pour les cadres de disposition automatique :
- Ajouter des layout grids (grilles de mise en page) à ce cadre
- 🚫 Appliquer des constraints (contraintes) à tous les objets d’un cadre de mise en page automatique, sauf si l’option Ignore auto layout (Ignorer la mise en page automatique) est activée pour l’objet
- 🚫 Utiliser la sélection intelligente sur tous les objets situés dans le cadre
Flux de mise en page
Direction
Direction décrit la manière dont le cadre de la disposition automatique va s'ajuster.
- Vertical : Ajouter, supprimer et réorganiser des objets le long de l’axe des ordonnées. Par exemple : des objets dans une liste, ou des messages dans un fil d’actualité ou une chronologie.
- Horizontal : Ajouter, supprimer et réorganiser des objets le long de l'axe des abscisses. Par exemple : une rangée de boutons ou des icônes dans un menu de navigation mobile.
- Envelopper : Disposer des objets sur plusieurs lignes et colonnes dans un cadre. Les objets s’écoulent horizontalement et passent à la ligne suivante. Par exemple : des galeries de photos ou un ensemble de balises.
Ordre d’empilement des plans de travail
Lorsque plusieurs calques ont un espacement négatif et créent une pile, le dernier objet (le plus à droite ou le plus en bas) de la pile est placé au-dessus par défaut.
Vous pouvez modifier l’ordre visuel de la pile comme indiqué sur le canevas.
Avec le cadre de disposition automatique sélectionné, cliquez sur depuis le panneau de droite pour ouvrir les paramètres de disposition automatique. À côté de la pile de plans de travail, sélectionnez :
- Premier en haut : la première couche de la pile sera en haut
- Dernière en haut : la dernière couche de la pile sera en haut
Remarque : notez que lorsque l’ordre d’empilement change, l’ordre des calques dans le panneau des calques reste le même. L’empilement des canevas est uniquement un changement visuel qui se produit sur le canevas.
Ignorer la mise en page automatique
Remarque : Ignorer la mise en page automatique était auparavant connu sous le nom de position absolue. La fonctionnalité a un nouveau nom, mais elle fonctionne toujours de la même manière.
Un objet pour lequel Ignore auto layout (Ignorer la mise en page automatique) est activé est exclu d’un flux de mise en page automatique tout en le conservant dans le cadre de mise en page automatique. L’objet et ses frères et sœurs environnants s’ignorent, même lorsqu’ils se redimensionnent et se déplacent.
À l’instar de la position absolue en CSS, un objet qui ignore la mise en page automatique peut être placé précisément à l’endroit voulu par rapport à son conteneur parent.
Les objets pour lesquels l’option Ignore auto layout (Ignorer la mise en page automatique) est activée sont traités comme des objets dans un cadre normal. Cela signifie que vous pouvez appliquer des contraintes pour déterminer comment ils réagissent lorsque le cadre de mise en page automatique parent se redimensionne. Les autres paramètres de mise en page automatique, tels que les options de redimensionnement et de mise en page, ne sont pas disponibles pour ces objets.
Vous pouvez faire en sorte qu’un objet ignore le flux de disposition automatique en effectuant l’une des opérations suivantes :
- Sélectionnez l'enfant d'un cadre de disposition automatique et cliquez sur dans le panneau de droite.
- Faites glisser un objet dans un cadre de disposition automatique tout en appuyant sur ⌃ Control .
Espacement
Espacement entre les éléments
Utilisez l’espace entre les éléments pour définir la distance, ou la répartition, entre les objets dans un cadre de mise en page automatique.
L’écart entre les éléments comporte deux paramètres différents :
-
Auto : Régler l'écart entre les objets pour qu'il soit le plus grand possible. Tapez
Auto
dans le champ ou sélectionnez-le dans le menu déroulant. - Un espace spécifié : Indiquez la distance entre les objets. Entrez une valeur 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.
Pour basculer rapidement entre ces deux paramètres, cliquez sur la case d’alignement et appuyez sur X.
Si la direction du cadre de mise en page automatique est définie sur vertical ou horizontal, vous pourrez définir l’espace entre les éléments verticalement ou horizontalement, respectivement. Si la direction du cadre est définie sur « wrap » (envelopper), vous pourrez définir l’espace horizontal et vertical entre les éléments.
Astuce ! Maintenez la touche ⇧ Maj enfoncée tout en faisant glisser les poignées pour augmenter et diminuer les valeurs à l’aide de vos valeurs big nudge (reconnaissance).
Remplissage
Le remplissage contrôle l’espace vide ou blanc entre les limites d’un cadre de mise en page automatique et les objets enfants du cadre. Vous pouvez définir le rembourrage de manière uniforme, verticale et horizontale, ou définir des valeurs différentes pour le rembourrage supérieur, droit, bas et gauche.
Ajustez les marges intérieures à l’aide des commandes du plan de travail ou des champs d’espacement dans le panneau de droite.
Pour accéder aux commandes du plan de travail, sélectionnez un cadre de disposition automatique et passez la souris dessus. Des poignées roses apparaîtront, similaires à celles de la sélection automatique.
- Cliquez sur les poignées pour ouvrir les champs de saisie et entrer une valeur numérique.
- Vous pouvez également cliquer sur la poignée et la faire glisser pour modifier l’espacement.
Astuce : Consultez notre guide des raccourcis clavier ↓ pour connaître les raccourcis permettant de régler le rembourrage sur les côtés opposés, sur tous les côtés, et plus encore!
Les commandes des marges intérieures dans le panneau de droite sont divisées par défaut entres marges intérieures verticales (haute et basse) et horizontales (gauche et droite).
- Pour définir un remplissage individuel, cliquez sur pour utiliser les champs de remplissage en haut, à droite, en bas et à gauche.
- Pour définir des marges intérieures uniformes ou utiliser un raccourci CSS, maintenez la touche Commande ⌘ ou Contrôle enfoncée et cliquez dans n'importe quel champ de marges intérieures. Vous pouvez également saisir un raccourci CSS. Par exemple, en entrant
1,2,3,4
, vous définissez les valeurs haut, droite, bas et gauche sur 1, 2, 3 et 4 respectivement. La saisie de1,2
définit les valeurs haut/bas sur 1 et gauche/droite sur 2.
Astuce ! Appuyez sur la touche onglet pour te déplacer entre les champs de saisie.
Tracés de mise en page
Par défaut, les traits ne sont pas pris en compte dans le calcul de la taille des objets et n’affectent donc pas leur cadre parent ou leurs frères et sœurs environnants.
Ce n’est peut-être pas l’idéal lors du transfert aux développeurs, car cela ne représente pas avec précision la façon dont le CSS affiche les bordures.
Choisissez si les traits occuperont de l’espace dans un cadre de mise en page automatique en accédant aux paramètres de mise en page automatique et en utilisant la liste déroulante à côté du trait pour sélectionner inclus dans la mise en page ou exclus de la mise en page.
Alignement
Définir l’alignement sur les objets enfants
Choisissez comment aligner les éléments enfants dans un cadre de disposition automatique. La direction du cadre de disposition automatique et la répartition, ou l'espace entre les éléments, déterminent les options d'alignement disponibles.
Contrairement aux objets d'un cadre normal, vous ne pourrez pas contrôler l'alignement des objets individuellement. Pour cette raison, vous définissez l'alignement des objets contenus via leur cadre de disposition automatique.
Utilisez la zone d’alignement dans le panneau de droite pour sélectionner l’une des neuf options de mise en forme pour les objets appartenant à un cadre.
- Sélectionnez la case et utilisez les touches fléchées pour basculer entre les différents paramètres d’alignement.
- Sélectionnez la case et appuyez sur W/A/S/D pour définir l’alignement sur le bord du cadre.
Si l’écart entre les éléments est réglé sur Auto, vous disposez de trois options pour chaque direction :
- Disposition automatique verticale : à gauche, au centre, à droite
- Disposition automatique horizontale : en haut, au centre, en bas
Si l'espace entre les éléments est défini sur un nombre spécifique, vous disposez des mêmes neuf options pour chaque direction :
- En haut à gauche
- Au centre en haut
- En haut à droite
- À gauche
- Au centre
- À droite
- En bas à gauche
- En bas au centre
- En bas à droite
Remarque : Lorsqu'une ou plusieurs propriétés de redimensionnement sont définies pour enserrer le contenu, certaines sélections n'entraîneront pas de dispositions visuellement différentes sur le canevas. En effet, le fait d'enserrer le contenu supprime tout espace supplémentaire autour des éléments d'un cadre.
Alignement de la ligne de base du texte
La ligne de base est la ligne invisible dans laquelle se trouve du texte ou un calque. En typographie, les jambages descendront en dessous de cette ligne.
Dans certains cas, l’alignement des lignes de base des calques peut créer un meilleur équilibre, par exemple lors de l’alignement des lignes de base des calques de texte avec des tailles de police différentes, ou lors de l’alignement d’une icône avec un calque de texte.
Pour aligner les calques par leurs lignes de base, sélectionnez les calques que vous souhaitez aligner et cliquez sur depuis le panneau de droite pour ouvrir les paramètres de mise en page automatique. En regard de l’alignement de la ligne de base du texte, cliquez sur pour activer l’alignement de la ligne de base.
Astuce ! Cliquez sur la case d’alignement dans le panneau de droite et appuyez sur B pour activer ou désactiver l’alignement de la ligne de base du texte.
Redimensionnement
L'une des fonctions les plus puissantes de la disposition automatique consiste à pouvoir contrôler les dimensions des objets dans un cadre de la disposition automatique.
Définissez le comportement de redimensionnement des cadres de disposition automatique parents afin de l’adapter aux modifications apportées à leurs objets enfants. Les paramètres de redimensionnement peuvent être appliqués aux objets sur les axes des abscisses et des ordonnées individuellement à l'aide des menus déroulants du panneau de droite.
Lorsque vous passez la souris sur une option de redimensionnement dans la liste déroulante, des lignes apparaissent sur le plan de travail pour indiquer comment le cadre de délimitation du design sera redimensionné et modifié.
Remarque : Les calques de texte possèdent également leurs propres propriétés de redimensionnement. Dans un cadre de la disposition automatique, cela peut produire des résultats utiles.
Si vous souhaitez que vos cadres de mise en page automatique soient complètement fluides, nous vous déconseillons d’utiliser des zones de texte de taille fixe. Les calques de texte de taille fixe ne seront pas redimensionnés pour s’adapter à votre texte, ce qui peut entraîner un chevauchement entre les calques dans un cadre de mise en page automatique.
Largeur ou hauteur fixe
Lorsqu'un cadre de la disposition automatique est réglé sur Largeur ou hauteur Fixe, les valeurs des dimensions du cadre restent les mêmes, quel que soit son contenu. La taille des cadres ne répond pas aux modifications apportées aux objets qu'ils contiennent, comme une chaîne de texte qui change de longueur.
Dimensions minimales et maximales
Vous pouvez définir une largeur et une hauteur minimales ou maximales pour tout cadre de disposition automatique et ses enfants.
- Ouvrez le menu déroulant Width contenant Add min width et Add max width
- Ouvre le menu déroulant Height (Hauteur) pour trouver Add min height (Ajouter la hauteur minimale) et Add max height (Ajouter la hauteur maximale)
Sélectionnez une option dans le menu déroulant Width (Largeur) ou Height (Hauteur). Dans le nouveau champ qui apparaît, saisissez une valeur ou utilisez le menu déroulant pour appliquer une variable numérique.
Si un objet contient un paramètre min ou max, son icône de largeur ou de hauteur gagnera deux lignes, une de chaque côté. Vous pouvez survoler ces icônes pour prévisualiser les limites de dimension sur le canevas.
Lorsque vous désélectionnez et resélectionnez un objet, ses champs de dimensions min et max sont masqués dans le panneau de droite. Pour y accéder à nouveau, cliquez sur l’icône de la largeur ou de la hauteur.
Pour supprimer un paramètre min ou max, ouvrez le menu déroulant Width (Largeur) ou Height (Hauteur) et choisissez Remove min and max (Supprimer min et max).
Remarque : Les calques ne peuvent pas avoir à la fois une hauteur maximale et un nombre défini de lignes maximales. L’ajout d’une hauteur maximale réglera le nombre maximum de lignes sur Auto. La définition du nombre maximal de lignes sur un nombre supprimera le paramètre de hauteur maximale du calque. En savoir plus sur le nombre maximal de lignes →
Enserrer le contenu
Appliquez Enserrer le contenu à un cadre de la disposition automatique pour qu'il se redimensionne en fonction de son contenu. Le cadre conserve les dimensions les plus petites possibles pour entourer les objets à l'intérieur, tout en respectant la valeur de remplissage.
Astuce ! Double-cliquez sur le bord vertical ou horizontal du cadre de délimitation d’un objet de mise en page automatique pour le définir sur Hug contents (Épouser le contenu).
Remarque : Si des objets contenus dans un cadre de la disposition automatique sont définis sur Remplir le contenant, le cadre parent n'enserrera plus le contenu et deviendra Fixe par rapport à l'axe.
Remplir le contenant
Les objets d'un cadre de la disposition automatique qui sont définis sur Remplir le contenant s'étendent à la largeur et/ou à la hauteur de leur cadre parent.
Les objets enfants d’un cadre de mise en page automatique seront également définis sur Fill container (Remplir le conteneur) s’ils sont redimensionnés manuellement à la largeur totale du cadre parent.
Astuce ! Maintenez la touche ⌥ Option ou Alt enfoncée et double-cliquez sur le bord vertical ou horizontal du cadre de délimitation d’un objet de mise en page automatique pour le définir sur Fill container (Remplir le conteneur).
Une note sur les contraintes
Vous ne pouvez pas appliquer de contraintes aux objets enfants dans un cadre de mise en page automatique, sauf si l’objet ignore le flux de mise en page automatique. Au lieu de cela, vous pouvez utiliser la propriété de redimensionnement pour définir la manière dont les objets réagissent lorsque le cadre, ou les objets dans le cadre, sont redimensionnés.
Vous pouvez toujours appliquer des contraintes au cadre de mise en page automatique lui-même s’il est imbriqué dans un cadre standard. La section Constraints (Contraintes) et les options de redimensionnement apparaissent, vous permettant de définir à la fois les contraintes du cadre de mise en page automatique et le comportement de redimensionnement de tous les objets qu’il contient.
Par exemple : si vous avez créé un ensemble de balises à l’aide de la disposition automatique, vous souhaiterez peut-être qu’il s’adapte à différentes tailles d’écran. Vous pouvez utiliser les contraintes pour vous assurer que la barre de navigation réagit correctement lorsque son cadre parent est redimensionné, et le redimensionnement pour contrôler la façon dont les objets de la barre de navigation réagissent à ces changements.
En savoir plus sur les contraintes →
Guide des raccourcis clavier
Raccourcis de base
Action |
Mac |
Windows |
---|---|---|
Ajouter la disposition automatique |
⇧ Shift A |
⇧ Shift A |
Proposer une disposition automatique |
Ctrl ⇧ Maj A |
Ctrl Alt ⇧ Maj A |
Supprimer la disposition automatique |
⌥ Option ⇧ Maj A |
Alt ⇧ Maj A |
Modifier les marges intérieures sur tous les côtés (à partir du panneau de droite) |
⌘Commande + clic pour remplir le champ de saisie |
Ctrl + clic pour remplir le champ de saisie |
Dans la boîte d’alignement
Cliquez sur la case d'alignement dans le panneau de droite et appuyez sur les touches suivantes pour :
Action |
Mac et Windows |
---|---|
Définir l’alignement |
↓ / → / ← / ↑ |
Définir l’alignement sur l’arête |
W / A / S / D |
Basculer l’alignement de la ligne de base |
B |
Basculer l’écart entre |
X |
Dans le plan de travail :
Utilisez ces raccourcis clavier lorsque vous faites glisser les poignées sur le plan de travail pour :
Action |
Mac |
Windows |
---|---|---|
Définir le rembourrage sur les côtés opposés |
⌥ Option |
Alt |
Mettre un rembourrage sur tous les côtés |
⌥ Option⇧ Shift |
Alt⇧ Maj |
Régler le rembourrage ou l’espacement avec un grand coup de pouce |
⇧ Maj |
⇧ Décalage |
Utilisez ces raccourcis clavier et cliquez sur des zones spécifiques d’un cadre de mise en page automatique :
Action |
Mac |
Windows |
---|---|---|
Saisissez la valeur de remplissage sur les côtés opposés |
⌥ Option + Cliquer sur la zone de remplissage |
Alt + Cliquez sur la zone des marges intérieures |
Saisissez la valeur de remplissage sur tous les côtés |
⌥ Option⇧ Shift + Zone de remplissage des clics |
Alt⇧ Shift + Zone de remplissage des clics |
Définir l’ajustement au contenu |
Double-clique sur le bord vertical ou horizontal |
Double-clique sur le bord vertical ou horizontal |
Définir le remplissage du contenant |
⌥ Option + Double-cliquez sur le bord vertical ou horizontal |
Alt + Double-cliquez sur le bord vertical ou horizontal |
Avant de commencer
Qui peut utiliser cette fonctionnalité
Disponible sur tous les forfaits
Les utilisateurs disposant d'un accès pour éditer
un fichier peuvent ajouter la disposition automatique aux cadres et aux objets.
Vous connaissez déjà les propriétés de disposition automatique ? Découvrez comment utiliser la disposition automatique →
La disposition automatique est une propriété que vous pouvez ajouter aux cadres et aux composants. Elle vous permet de créer des designs capables de grossir ou de rétrécir pour mieux se réajuster à la taille de leur contenu au fur et à mesure. Cela est très pratique lorsqu'il vous faut ajouter de nouveaux calques, ajouter davantage de texte ou maintenir l'alignement au fur et à mesure de l'évolution de vos designs.
Il existe de nombreuses façons d'utiliser la disposition automatique :
- Créez des boutons qui grossissent ou rétrécissent en fonction du texte.
- Créez des listes qui s’adaptent au fur et à mesure que des éléments sont ajoutés, supprimés ou masqués.
- Combiner les cadres de la disposition automatique pour créer des interfaces complètes.
La mise en page automatique est une fonctionnalité puissante avec de nombreuses pièces mobiles et utilisations. Dans cet article, nous allons détailler le fonctionnement des différents aspects de la mise en page automatique.
Les cadres avec disposition automatique ont des propriétés différentes des cadres ordinaires. Lorsque vous appliquez la disposition automatique, vous verrez des modifications dans la barre latérale de droite.
Vous ne pourrez pas effectuer les opérations suivantes pour les cadres de disposition automatique :
- 🚫 Ajouter des grilles de mise en page à ce cadre
- 🚫 Appliquer des contraintes à tous les objets situés dans un cadre de mise en page automatique, sauf si la position absolue de l’objet est activée.
- 🚫 Utiliser la sélection intelligente pour tous les objets situés dans le cadre
Flux de mise en page
Direction
Direction décrit la manière dont le cadre de la disposition automatique va s'ajuster.
- Vertical : Ajouter, supprimer et réorganiser des objets le long de l’axe des ordonnées. Par exemple : des objets dans une liste, ou des messages dans un fil d’actualité ou une chronologie.
- Horizontal : Ajouter, supprimer et réorganiser des objets le long de l'axe des abscisses. Par exemple : une rangée de boutons ou des icônes dans un menu de navigation mobile.
- Envelopper : Disposer des objets sur plusieurs lignes et colonnes dans un cadre. Les objets s’écoulent horizontalement et passent à la ligne suivante. Par exemple : des galeries de photos ou un ensemble de balises.
Ordre d’empilement des plans de travail
Lorsque plusieurs calques ont un espacement négatif et créent une pile, le dernier objet (le plus à droite ou le plus en bas) de la pile est placé au-dessus par défaut.
Vous pouvez modifier l’ordre visuel de la pile comme indiqué sur le canevas.
Avec le cadre de mise en page automatique sélectionné, cliquez sur depuis la barre latérale droite pour ouvrir les paramètres de mise en page automatique avancés. À côté de l’empilage de canevas, sélectionnez :
- Premier en haut : la première couche de la pile sera en haut
- Dernière en haut : la dernière couche de la pile sera en haut
Remarque : notez que lorsque l’ordre d’empilement change, l’ordre des calques dans le panneau des calques reste le même. L’empilement des canevas est uniquement un changement visuel qui se produit sur le canevas.
Ignorer la mise en page automatique
Remarque : Ignorer la mise en page automatique était auparavant connu sous le nom de position absolue. La fonctionnalité a un nouveau nom, mais elle fonctionne toujours de la même manière.
Un objet pour lequel Ignore auto layout (Ignorer la mise en page automatique) est activé est exclu d’un flux de mise en page automatique tout en le conservant dans le cadre de mise en page automatique. L’objet et ses frères et sœurs environnants s’ignorent, même lorsqu’ils se redimensionnent et se déplacent.
À l’instar de la position absolue en CSS, un objet qui ignore la mise en page automatique peut être placé précisément à l’endroit voulu par rapport à son conteneur parent.
Les objets pour lesquels l’option Ignore auto layout (Ignorer la mise en page automatique) est activée sont traités comme des objets dans un cadre normal. Cela signifie que vous pouvez appliquer des contraintes pour déterminer comment ils réagissent lorsque le cadre de mise en page automatique parent se redimensionne. Les autres propriétés et paramètres de mise en page automatique ne sont pas disponibles pour les objets qui ignorent la mise en page automatique.
Vous pouvez faire en sorte qu’un objet ignore le flux de disposition automatique en effectuant l’une des opérations suivantes :
- Sélectionnez un enfant d'un cadre de disposition automatique et cliquez sur dans la barre latérale droite.
- Faites glisser un objet dans un cadre de disposition automatique tout en appuyant sur ⌃ Control .
Espacement
Espacement entre les éléments
Utilisez gap between items pour définir la distance, ou la répartition, entre les objets dans un cadre de mise en page automatique.
L’écart entre les éléments comporte deux paramètres différents :
-
Auto : Régler l'écart entre les objets pour qu'il soit le plus grand possible. Tapez
Auto
dans le champ ou sélectionnez-le dans le menu déroulant. - Un espace spécifié : Indiquez la distance entre les objets. Entrez une valeur 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.
Pour basculer rapidement entre ces deux paramètres, cliquez sur la case d’alignement et appuyez sur X.
Si la direction du cadre de mise en page automatique est définie sur vertical ou horizontal, vous pourrez définir l’espace entre les éléments verticalement ou horizontalement, respectivement. Si la direction du cadre est définie sur « wrap » (envelopper), vous pourrez définir l’espace horizontal et vertical entre les éléments.
Astuce ! Maintenez la touche ⇧ Maj enfoncée tout en faisant glisser les poignées pour augmenter et diminuer les valeurs à l’aide de vos valeurs big nudge (reconnaissance).
Remplissage
Le remplissage contrôle l’espace vide ou blanc entre les limites d’un cadre de mise en page automatique et les objets enfants du cadre. Vous pouvez définir le rembourrage de manière uniforme, verticale et horizontale, ou définir des valeurs différentes pour le rembourrage supérieur, droit, bas et gauche.
Ajustez les marges intérieures à l’aide des commandes du plan de travail ou des champs d’espacement dans la barre latérale droite.
Pour accéder aux commandes du plan de travail, sélectionnez un cadre de disposition automatique et passez la souris dessus. Des poignées roses apparaîtront, similaires à celles de la sélection automatique.
- Cliquez sur les poignées pour ouvrir les champs de saisie et entrer une valeur numérique.
- Vous pouvez également cliquer sur la poignée et la faire glisser pour modifier l’espacement.
Astuce : Consultez notre guide des raccourcis clavier ↓ pour connaître les raccourcis permettant de régler le rembourrage sur les côtés opposés, sur tous les côtés, et plus encore!
Les contrôles de remplissage dans la barre latérale droite sont séparés par défaut en remplissage vertical (haut et bas) et horizontal (gauche et droite).
- Pour définir les marges intérieures individuellement, cliquez sur pour utiliser les champs des marges intérieures hautes, droites, inférieures et gauches.
- Pour définir des marges intérieures uniformes ou utiliser un raccourci CSS, maintenez la touche Commande ⌘ ou Contrôle enfoncée et cliquez dans n'importe quel champ de marges intérieures. Vous pouvez également saisir un raccourci CSS. Par exemple, en entrant
1,2,3,4
, vous définissez les valeurs haut, droite, bas et gauche sur 1, 2, 3 et 4 respectivement. La saisie de1,2
définit les valeurs haut/bas sur 1 et gauche/droite sur 2.
Astuce ! Appuyez sur la touche onglet pour te déplacer entre les champs de saisie.
Tracés de mise en page
Par défaut, les traits ne sont pas pris en compte dans le calcul de la taille des objets et n’affectent donc pas leur cadre parent ou leurs frères et sœurs environnants.
Ce n’est peut-être pas l’idéal lors du transfert aux développeurs, car cela ne représente pas avec précision la façon dont le CSS affiche les bordures.
Vous pouvez définir si les tracés seront situés à l'intérieur ou à l'extérieur du cadre de disposition automatique en accédant aux paramètres de disposition automatique avancés et en utilisant la liste déroulante à côté du tracé pour sélectionner Included in layout ou Excluded from layout.
Alignement
Définir l’alignement sur les objets enfants
Choisissez comment aligner les éléments enfants dans un cadre de disposition automatique. La direction du cadre de disposition automatique et la répartition, ou l'espace entre les éléments, déterminent les options d'alignement disponibles.
Contrairement aux objets d'un cadre normal, vous ne pourrez pas contrôler l'alignement des objets individuellement. Pour cette raison, vous définissez l'alignement des objets contenus via leur cadre de disposition automatique.
Utilisez la zone d’alignement dans la barre latérale droite pour sélectionner l’une des neuf options de mise en forme pour les objets appartenant à un cadre.
- Sélectionnez la case et utilisez les touches fléchées pour basculer entre les différents paramètres d’alignement.
- Sélectionnez la case et appuyez sur W/A/S/D pour définir l’alignement sur le bord du cadre.
Si l’écart entre les éléments est réglé sur Auto, vous disposez de trois options pour chaque direction :
- disposition automatique verticale : à gauche, au centre, à droite
- disposition automatique horizontale : en haut, au centre, en bas
Si l'espace entre les éléments est défini sur un nombre spécifique, vous disposez des mêmes neuf options pour chaque direction :
- En haut à gauche
- Au centre en haut
- En haut à droite
- À gauche
- Au centre
- À droite
- En bas à gauche
- En bas au centre
- En bas à droite
Remarque : Lorsqu'une ou plusieurs propriétés de redimensionnement sont définies pour enserrer le contenu, certaines sélections n'entraîneront pas de dispositions visuellement différentes sur le canevas. En effet, le fait d'enserrer le contenu supprime tout espace supplémentaire autour des éléments d'un cadre.
Alignement de la ligne de base du texte
La ligne de base est la ligne invisible dans laquelle se trouve du texte ou un calque. En typographie, les jambages descendront en dessous de cette ligne.
Dans certains cas, l’alignement des lignes de base des calques peut créer un meilleur équilibre, par exemple lors de l’alignement des lignes de base des calques de texte avec des tailles de police différentes, ou lors de l’alignement d’une icône avec un calque de texte.
Pour aligner les calques sur leurs lignes de base, sélectionnez les calques que vous souhaitez aligner et cliquez sur depuis la barre latérale droite pour ouvrir les paramètres de disposition automatique avancés. En regard de l'alignement sur la ligne de base du texte, cliquez sur pour activer l'alignement sur la ligne de base.
Pourboire! Cliquez sur la zone d’alignement dans la barre latérale droite, puis appuyez sur B pour activer ou désactiver l’alignement de la ligne de base du texte.
Redimensionnement
L'une des fonctions les plus puissantes de la disposition automatique consiste à pouvoir contrôler les dimensions des objets dans un cadre de la disposition automatique.
Définissez le comportement de redimensionnement des cadres de disposition automatique parents afin de l’adapter aux modifications apportées à leurs objets enfants. Les paramètres de redimensionnement peuvent être appliqués aux objets sur les axes des abscisses et des ordonnées individuellement à l'aide des menus déroulants de la barre latérale droite.
Lorsque vous passez la souris sur une option de redimensionnement dans la liste déroulante, des lignes apparaissent sur le plan de travail pour indiquer comment le cadre de délimitation du design sera redimensionné et modifié.
Remarque : Les calques de texte possèdent également leurs propres propriétés de redimensionnement. Dans un cadre de la disposition automatique, cela peut produire des résultats utiles.
Si vous souhaitez que vos cadres de mise en page automatique soient complètement fluides, nous vous déconseillons d’utiliser des zones de texte de taille fixe. Les calques de texte de taille fixe ne seront pas redimensionnés pour s’adapter à votre texte, ce qui peut entraîner un chevauchement entre les calques dans un cadre de mise en page automatique.
Largeur ou hauteur fixe
Lorsqu'un cadre de la disposition automatique est réglé sur Largeur ou hauteur Fixe, les valeurs des dimensions du cadre restent les mêmes, quel que soit son contenu. La taille des cadres ne répond pas aux modifications apportées aux objets qu'ils contiennent, comme une chaîne de texte qui change de longueur.
Dimensions minimales et maximales
Vous pouvez définir une largeur et une hauteur minimales ou maximales pour tout cadre de mise en page automatique et ses enfants.
- Ouvre le menu déroulant Width (Largeur) pour trouver Ajouter la largeur minimale et Add max width (Ajouter la largeur maximale)
- Ouvrez le menu déroulant Height contenant Add min height et Add max height
Sélectionnez une option dans le menu déroulant Largeur ou Hauteur. Dans le nouveau champ qui apparaît, saisissez une valeur ou utilisez le menu déroulant pour appliquer une variable numérique.
Si un objet contient un paramètre min ou max, son icône de largeur ou de hauteur gagnera deux lignes, une de chaque côté. Vous pouvez survoler ces icônes pour prévisualiser les limites de dimension sur le canevas.
Lorsque vous désélectionnez et resélectionnez un objet, ses champs de dimensions min et max sont masqués dans la barre latérale droite. Pour y accéder à nouveau, cliquez sur l’icône de la largeur ou de la hauteur.
Pour supprimer un paramètre min ou max, ouvrez le menu déroulant Width (Largeur) ou Height (Hauteur) et choisissez Remove min and max (Supprimer min et max).
Remarque : Les calques ne peuvent pas avoir à la fois une hauteur maximale et un nombre défini de lignes maximales. L’ajout d’une hauteur maximale réglera le nombre maximum de lignes sur Auto. La définition du nombre maximal de lignes sur un nombre supprimera le paramètre de hauteur maximale du calque. En savoir plus sur le nombre maximal de lignes →
Enserrer le contenu
Appliquez Enserrer le contenu à un cadre de la disposition automatique pour qu'il se redimensionne en fonction de son contenu. Le cadre conserve les dimensions les plus petites possibles pour entourer les objets à l'intérieur, tout en respectant la valeur de remplissage.
Astuce ! Double-cliquez sur le bord vertical ou horizontal du cadre de délimitation d’un objet de mise en page automatique pour le définir sur Hug contents (Épouser le contenu).
Remarque : Si des objets contenus dans un cadre de la disposition automatique sont définis sur Remplir le contenant, le cadre parent n'enserrera plus le contenu et deviendra Fixe par rapport à l'axe.
Remplir le contenant
Les objets d'un cadre de la disposition automatique qui sont définis sur Remplir le contenant s'étendent à la largeur et/ou à la hauteur de leur cadre parent.
Les objets enfants d’un cadre de mise en page automatique seront également définis sur Fill container (Remplir le conteneur) s’ils sont redimensionnés manuellement à la largeur totale du cadre parent.
Astuce ! Maintenez la touche ⌥ Option ou Alt enfoncée et double-cliquez sur le bord vertical ou horizontal du cadre de délimitation d’un objet de mise en page automatique pour le définir sur Fill container (Remplir le conteneur).
Une note sur les contraintes
Vous ne pouvez pas appliquer de contraintes aux objets enfants dans un cadre de mise en page automatique, sauf si l’objet ignore le flux de mise en page automatique. Au lieu de cela, vous pouvez utiliser la propriété de redimensionnement pour définir la manière dont les objets réagissent lorsque le cadre, ou les objets dans le cadre, sont redimensionnés.
Vous pouvez toujours appliquer des contraintes au cadre de mise en page automatique lui-même s’il est imbriqué dans un cadre standard. La section Constraints (Contraintes) et les options de redimensionnement apparaissent, vous permettant de définir à la fois les contraintes du cadre de mise en page automatique et le comportement de redimensionnement de tous les objets qu’il contient.
Par exemple : si vous avez créé un ensemble de balises à l’aide de la disposition automatique, vous souhaiterez peut-être qu’il s’adapte à différentes tailles d’écran. Vous pouvez utiliser les contraintes pour vous assurer que la barre de navigation réagit correctement lorsque son cadre parent est redimensionné, et le redimensionnement pour contrôler la façon dont les objets de la barre de navigation réagissent à ces changements.
En savoir plus sur les contraintes →
Guide des raccourcis clavier
Raccourcis de base
Action |
Mac |
Windows |
---|---|---|
Ajouter la disposition automatique |
⇧ Shift A |
⇧ Shift A |
Proposer une disposition automatique |
Ctrl ⇧ Maj A |
Ctrl Alt ⇧ Maj A |
Supprimer la disposition automatique |
⌥ Option ⇧ Maj A |
Alt ⇧ Maj A |
Modifier le rembourrage de tous les côtés (depuis la barre latérale droite) |
⌘Commande + clic pour remplir le champ de saisie |
Ctrl + clic pour remplir le champ de saisie |
Dans la boîte d’alignement
Cliquez sur la case d'alignement dans la barre latérale droite et appuyez sur les touches suivantes pour :
Action |
Mac et Windows |
---|---|
Définir l’alignement |
↓ / → / ← / ↑ |
Définir l’alignement sur l’arête |
W / A / S / D |
Basculer l’alignement de la ligne de base |
B |
Basculer l’écart entre |
X |
Dans le plan de travail :
Utilisez ces raccourcis clavier lorsque vous faites glisser les poignées sur le plan de travail pour :
Action |
Mac |
Windows |
---|---|---|
Définir le rembourrage sur les côtés opposés |
⌥ Option |
Alt |
Mettre un rembourrage sur tous les côtés |
⌥ Option⇧ Shift |
Alt⇧ Maj |
Régler le rembourrage ou l’espacement avec un grand coup de pouce |
⇧ Maj |
⇧ Décalage |
Utilisez ces raccourcis clavier et cliquez sur des zones spécifiques d’un cadre de mise en page automatique :
Action |
Mac |
Windows |
---|---|---|
Saisissez la valeur de remplissage sur les côtés opposés |
⌥ Option + Cliquer sur la zone de remplissage |
Alt + Cliquez sur la zone des marges intérieures |
Saisissez la valeur de remplissage sur tous les côtés |
⌥ Option⇧ Shift + Zone de remplissage des clics |
Alt⇧ Shift + Zone de remplissage des clics |
Définir l’ajustement au contenu |
Double-clique sur le bord vertical ou horizontal |
Double-clique sur le bord vertical ou horizontal |
Définir le remplissage du contenant |
⌥ Option + Double-cliquez sur le bord vertical ou horizontal |
Alt + Double-cliquez sur le bord vertical ou horizontal |