Guide d'utilisation Annuler

Utiliser des repères et des grilles dans XD

Vous recherchez des informations sur l’alignement des actifs de création à l’aide de repères et de grilles ? Vous êtes au bon endroit !

Bonjour, c’est Jeanee ! Une conceptrice graphique qui mène un projet de conception UX dans XD composé de plusieurs plans de travail et objets.

 
  • Elle recherche des ressources pour mettre en page et positionner rapidement des objets à l’aide de repères.

 

  • Elle a besoin d’aide pour aligner et définir la structure d’objet dans le projet de conception à l’aide de grilles.

Cela vous plairait ? Si vous rencontrez de telles difficultés, lisez ce qui suit pour découvrir comment créer et utiliser des repères ainsi que des grilles dans vos plans de travail.

Avant de commencer

Création et gestion des repères

Une fois vos plans de travail disposés sur la zone de travail de conception, une zone est ajoutée en haut à gauche de vos plans de travail pour y faire glisser les repères. Vous pouvez rapidement les aligner sur les centres horizontaux et verticaux de la zone de travail, les copier et les coller sur plusieurs plans de travail, les supprimer, mais aussi activer ou désactiver leur visibilité.

Lisez ce qui suit pour savoir comment créer et gérer des repères.

Ajouter des repères

Copier et coller des repères

Supprimer des repères

Effacer, masquer et verrouiller des repères

Créer des repères

Souhaitez-vous aligner et positionner des objets dans vos plans de travail de haut en bas ? Utilisez des repères verticaux. Pour aligner et positionner des objets de gauche à droite, utilisez des repères horizontaux. 

Repères verticaux

Ajout de repères dans vos plans de travail

Pour créer un repère vertical, placez le curseur sur le bord gauche du plan de travail jusqu’à ce que l’icône  apparaisse. Cliquez sur l’icône et maintenez le bouton enfoncé, puis faites-la glisser à l’emplacement souhaité.

Repères horizontaux

Ajout de repères dans vos plans de travail

Afin de créer un repère horizontal, survolez le bord supérieur du plan de travail jusqu’à ce que l’icône  apparaisse. Effectuez un glisser-déposer à la position souhaitée.

Copier et coller les repères

Maintenant que vous avez créé des repères, vous pouvez utiliser l’option Copier/Coller les repères pour les dupliquer rapidement.

Copier des repères

Copie de repères dans un plan de travail

Pour copier des repères à partir d’un plan de travail, sélectionnez ce dernier, puis cliquez sur Vue > Repères > Copier les repères.

Coller des repères

Collage de repères dans un plan de travail

Pour coller les repères copiés, cliquez sur Vue ou faites un clic droit sur le plan de travail > Repères > Coller les repères.

Supprimer des repères

Vous pouvez choisir de supprimer un ou plusieurs repères à la fois.

Pour supprimer les repères : cliquez dessus et faites-le glisser hors du plan de travail.

Pour supprimer plusieurs repères sur un plan de travail, sélectionnez le plan de travail, faites un clic droit sur le plan de travail, puis cliquez sur l’option Vue. Sélectionnez Repères > Effacer les repères.

Effacer les repères ajoutés à un plan de travail

Masquer et verrouiller les repères

Vous souhaitez masquer temporairement les repères et les activer quand cela est nécessaire ? Utilisez l’option Masquer tous les repères.

Vous pouvez également choisir de verrouiller les repères sur tous les plans de travail afin de les empêcher d’être déplacés ou ajustés accidentellement.

Pour masquer et verrouiller des repères sous macOS et Windows :

Masquer les repères

Masquer les repères

  • Cliquez sur Vue > Masquer tous les repères dans la barre de menu supérieure. Vous pouvez également utiliser les touches Commande + ; pour masquer les repères sous macOS.
  • Faites un clic droit sur le plan de travail et sélectionnez Repères > Masquer tous les repères. Vous pouvez également utiliser les touches Ctrl + ; pour masquer les repères sous Windows.

Verrouiller les repères

Verrouiller tous les repères sur les plans de travail

  • Cliquez sur Vue > Verrouiller tous les repères dans la barre de menu supérieure. Vous pouvez également utiliser les touches Commande + Maj pour verrouiller les repères sous macOS.
  • Faites un clic droit sur le plan de travail et sélectionnez Repères > Verrouiller tous les Repères. Vous pouvez également utiliser les touches Ctrl + Maj + ; pour verrouiller les repères sous Windows.

Accrocher-aligner des objets à l’aide de repères commentés

Maintenant que vous avez acquis les notions de base de création et de gestion de repères, vous pouvez utiliser des repères commentés pour accrocher temporairement les repères lorsque vous créez ou manipulez des objets ou des plans de travail. 

Repères commentés

Les repères commentés sont activés par défaut. Lorsque vous déplacez un objet ou un plan de travail, les repères commentés vous permettent d’aligner, de modifier et de transformer des objets ou des plans de travail par rapport aux autres objets, plans de travail, ou les deux, en les alignant.

Positionnement des objets à l’aide de grilles

Maintenant que vous connaissez les notions de base des repères dans XD, continuez sur votre lancée et apprenez à définir la structure de design et à aligner des objets dans votre plan de travail à l’aide des grilles de mise en page ou des grilles quadrillées. 

Pour ajouter des grilles quadrillées ou de mise en page, sélectionnez un ou plusieurs plans de travail. Accédez à la section Grille de l’inspecteur Propriétés et choisissez Mise en page ou Carré.

Grilles de mise en page

Positionnement des objets dans les grilles de mise en page

Les grilles de mise en page sont des grilles en colonne utiles pour l’alignement des objets de conception ou la conception pour différentes tailles d’écran. Vous pouvez facilement et rapidement les ajuster en fonction de vos besoins.

Grilles rectangulaires

Positionner les grilles quadrillées

Les grilles quadrillées comportent des lignes horizontales et verticales pour un dimensionnement et un alignement précis des objets lors de la conception d’applications ou d’icônes mobiles.

Définir les préférences relatives à la grille

Une fois les grilles quadrillées et les grilles de mise en page ajoutées aux plans de travail, vous pouvez personnaliser les options d’affichage de vos grilles en ajustant les préférences dans la section Grille de l’inspecteur Propriétés. Lisez ce qui suit pour savoir comment modifier la taille de la grille, le nombre de colonnes, les propriétés de gouttière et les marges de vos grilles.

Préférences de grille quadrillée

Selon les besoins de votre conception, vous pouvez modifier la taille de la grille pour les grilles quadrillées.

Modifier la taille de la grille quadrillée

La taille de la grille correspond à la distance qui séparent les quadrillages dans la grille quadrillage. Pour modifier la valeur de la taille de la grille, entrez le nombre requis dans le champ Taille des carrés de l’inspecteur Propriétés.

Préférences de grille de mise en page

Lorsqu’une grille de mise en page est appliquée à un plan de travail, vous pouvez définir le nombre de colonnes, la largeur des colonnes, les propriétés de gouttière ainsi que la taille des marges dans la section Grille de l’inspecteur Propriétés.

Modification du nombre de colonnes

Modification du nombre de colonnes dans la grille de mise en page

Entrez la valeur dans le champ Colonnes. Pour les designs sur le Web, les grilles à 12 ou 16 colonnes sont couramment utilisées. 

Modification des propriétés de la largeur des colonnes et de la gouttière

Modification des propriétés de gouttière dans la grille de mise en page

Pour modifier la largeur des colonnes, entrez la valeur dans le champ Largeur des colonnes. Pour définir votre propre largeur de gouttière, modifiez le champ Largeur de gouttière par défaut. 

Maintenant que vous avez modifié le nombre de colonnes, la largeur de gouttière et la largeur de colonne, apprenez à ajuster les marges du plan de travail. Les marges sont la distance qui sépare la grille de mise en page du bord du plan de travail. Lisez ce qui suit pour savoir comment ajuster les marges de chaque côté.

Modification de la marge de gauche ou de droite liée

Modification de la marge de gauche ou de droite liée

Pour ajuster la marge liée à gauche et à droite, cliquez sur l’icône  et modifiez la valeur.

Modification de la marge de chaque côté

Modification de la marge de chaque côté

Pour ajuster les marges gauche, droite, supérieure et inférieure individuellement, cliquez sur l’icône , puis entrez les valeurs.

Exploitez au mieux les grilles

Maintenant que vous savez définir les préférences de vos grilles, lisez ce qui suit pour apprendre à ajouter des couleurs de grille et à contrôler leur visibilité.

Ajouter des couleurs

Afficher ou masquer les grilles

Ajouter des couleurs

Souhaitez-vous modifier l’apparence des grilles ? Utilisez le sélecteur de couleurs de l’inspecteur Propriétés pour ajouter et modifier la couleur de la grille.

Ajout de couleurs aux grilles de mise en page et aux grilles quadrillées

A. Champ de couleur B. Curseur de couleur C. Pipette 

Cliquez sur la case en regard de Taille des carrés pour les grilles quadrillées et de Colonnes pour les grilles de mise en page. 

Dans le sélecteur de couleurs, vous pouvez effectuer les opérations suivantes :

  • Ajuster la couleur à l’aide du curseur et du champ de couleurs.
  • Utiliser l’outil Pipette pour sélectionner une couleur à partir d’un plan de travail.
  • Utiliser le curseur de couleurs ou saisir une valeur en pourcentage pour définir l’opacité du fond. Si vous définissez la valeur sur 0, la grille de mise en page passe en mode avec contours.

Masquer et afficher les grilles

Vous pouvez contrôler la visibilité des grilles quadrillées ou de mise en page à l’aide de l’option Masquer les grilles de mise en page/quadrillées ou Afficher les grilles de mise en page/quadrillées.

Masquer la grille de mise en page

Affichage ou masques des grilles de mise en page

  • Choisissez Vue > Masquer la grille de mise en forme. Vous pouvez également utiliser les touches Commande + Maj + ’ pour masquer les grilles de mise en page sous macOS.
  • Dans l’inspecteur Propriétés, sélectionnez un type de grille dans la liste déroulante Grille, puis sélectionnez la case à cocher en regard de la liste déroulante. Vous pouvez également utiliser les touches Ctrl + Maj + " pour masquer les grilles de mise en page sous Windows.

Afficher la grille quadrillée

Afficher ou masquer les grilles quadrillées

  • Choisissez la commande Affichage > Afficher la grille quadrillée. Vous pouvez également utiliser Commande + ’ pour afficher les grilles quadrillées sous macOS.
  • Dans l’inspecteur Propriétés, sélectionnez un type de grille dans la liste déroulante Grille, puis sélectionnez la case à cocher en regard de la liste déroulante. Vous pouvez également utiliser Ctrl + " pour afficher les grilles quadrillées sous Windows.

Vidéo : Comment ajouter des repères et des grilles de mise en page ?

Conseils et astuces

  • Pour aligner un objet sur une grille de mise en page ou une grille quadrillée, faites-le glisser dessus jusqu’à ce que l’un de ses bords entre dans la zone de magnétisme de la grille.
  • Les repères s’alignent sur les objets sélectionnés ou les objets de niveau supérieur dessinés sur le canevas. Pour désactiver temporairement ce magnétisme, appuyez sur  (sous Mac) ou Ctrl (sous Windows). 
  • Pour positionner le repère par tranche de 10 px sur le canevas, appuyez sur Maj.
  • Pour rétablir l’apparence par défaut de la grille quadrillée ou de mise en page, cliquez sur l’option Utiliser les paramètres par défaut dans la section Grille de l’inspecteur Propriétés.

Et après ?

Nous avons commencé à positionner et à aligner des objets dans des plans de travail à l’aide de repères et de grilles. Passons à l’étape suivante et apprenez à utiliser des grilles de répétition pour créer des objets avec des éléments répétables.

Vous avez une question ou une suggestion ?

Questions à la communauté

Si vous avez une question à poser ou une idée à partager, rejoignez la communauté Adobe XD. Nous serions ravis de vous compter parmi nous et de découvrir vos créations.

Recevez de l’aide plus rapidement et plus facilement

Nouvel utilisateur ?