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.
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 !
Lorsque vous travaillez sur vos conceptions, vous pouvez utiliser des repères pour aligner des objets ou gérer l’espacement entre les éléments d’un plan de travail. Les grilles servent de framework pour organiser vos éléments de conception (images, glyphes, paragraphes) et assurer la symétrie de la mise en page.
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.
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.
Vous débutez dans Adobe XD ?
Découvrez les bases de l’application.
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.
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
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
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.
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
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
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.
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.
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
Verrouiller les repères
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.
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.
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
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
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.
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.
Selon les besoins de votre conception, vous pouvez modifier la taille de la grille pour les grilles quadrillées.
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.
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
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
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
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é
Pour ajuster les marges gauche, droite, supérieure et inférieure individuellement, cliquez sur l’icône , puis entrez les valeurs.
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é.
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.
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 :
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
Afficher la grille quadrillée
« Lorsque vous travaillez sur des projets de conception, mettez en place des repères pour mieux vous aider lors de la pose d’objets ou pour vous assurer que les éléments sont bien espacés », explique Howard Pinsky, expert spécialiste XD.
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.
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.
Accéder à votre compte