Guide d'utilisation Annuler

Utiliser des repères et des grilles dans XD

  1. Guide de l’utilisateur d’Adobe XD
  2. Introduction
    1. Nouveautés d’Adobe XD
    2. Questions fréquentes
    3. Design, création de prototypes et partage avec Adobe XD
    4. Configuration requise
      1. Configuration matérielle et logicielle requise
      2. Adobe XD, Big Sur et Apple Silicon | macOS 11
    5. Notions de base concernant l’espace de travail
    6. Changement de langue dans l’application Adobe XD
    7. Accès aux kits de conception d’interface utilisateur
    8. Accessibilité dans Adobe XD
    9. Raccourcis clavier
    10. Conseils et astuces
    11. Options d’abonnement à Adobe XD
    12. Modifications apportées à la formule de lancement d’Adobe XD
  3. Conception
    1. Plans de travail, repères et calques
      1. Prise en main des plans de travail
      2. Utilisation des guides et des grilles
      3. Création de plans de travail défilants
      4. Utilisation de calques
      5. Création de groupes de défilement
    2. Formes, objets et chemins
      1. Sélection, redimensionnement et rotation d’objets
      2. Déplacement, alignement, répartition et disposition d’objets
      3. Regroupement, verrouillage, duplication, copie et retournement d’objets
      4. Application d’un contour, d’un fond ou d’une ombre portée à un objet
      5. Création d’éléments répétés
      6. Création de designs en perspective avec des transformations 3D
      7. Modification d’objets à l’aide d’opérations booléennes
    3. Texte et polices
      1. Utilisation d’outils de dessin et de texte
      2. Polices dans Adobe XD
    4. Composants et états
      1. Utilisation de composants
      2. Utilisation de composants imbriqués
      3. Ajout de plusieurs états aux composants
    5. Masquage et effets
      1. Création d’un masque avec des formes
      2. Utilisation des effets de flou
      3. Création et modification de dégradés
      4. Application des effets de fusion
    6. Mise en page
      1. Redimensionnement réactif et contraintes
      2. Définition d’un remplissage fixe pour des composants et des groupes
      3. Création de conceptions dynamiques avec des piles
    7. Vidéos et animations Lottie
      1. Utilisation de vidéos
      2. Création de prototypes avec des vidéos
      3. Utilisation d’animations Lottie
  4. Prototypage
    1. Création de prototypes interactifs
    2. Animation des prototypes
    3. Propriétés d’objet prises en charge pour l’animation automatique
    4. Création de prototypes avec clavier et manette de jeu
    5. Création de prototypes à l’aide de la lecture et des commandes vocales
    6. Création de transitions temporisées
    7. Ajouter des incrustations
    8. Conception de prototypes de voix
    9. Création de liens d’ancrage
    10. Création d’hyperliens
    11. Aperçu de designs et de prototypes
  5. Partage, exportation et révision
    1. Partage des plans de travail sélectionnés
    2. Partage de conceptions et de prototypes
    3. Définition des autorisations d’accès pour les liens
    4. Utilisation de prototypes
    5. Révision de prototypes
    6. Utilisation des spécifications techniques
    7. Partage de spécifications techniques
    8. Inspection de spécifications techniques
    9. Navigation dans les spécifications techniques
    10. Révision des spécifications techniques et commentaires
    11. Exportation d’actifs de conception
    12. Exportation et téléchargement de fichiers à partir de spécifications techniques
    13. Partage de groupe pour les entreprises
  6. Chartes graphiques
    1. Chartes graphiques et bibliothèques Creative Cloud
    2. Utilisation d’actifs de document dans Adobe XD
    3. Utilisation des bibliothèques Creative Cloud dans Adobe XD
    4. Migration d’actifs liés vers les bibliothèques Creative Cloud
    5. Utilisation des jetons de conception 
    6. Utilisation d’actifs provenant de bibliothèques Creative Cloud
  7. Documents en ligne
    1. Documents en ligne dans Adobe XD
    2. Collaboration et cocréation de conceptions
    3. Cocréation de documents partagés
  8. Intégrations et plug-ins
    1. Utilisation d’actifs externes
    2. Utilisation d’actifs de création provenant de Photoshop
    3. Copier-coller d’actifs depuis Photoshop
    4. Importation ou ouverture de conceptions Photoshop
    5. Utilisation des fichiers Illustrator dans Adobe XD
    6. Ouverture et importation de conceptions Illustrator
    7. Copie de vecteurs d’Illustrator vers XD
    8. Plug-ins pour Adobe XD
    9. Création et gestion des plug-ins
    10. Intégration Jira pour XD
    11. Plug-in Slack pour XD
    12. Plug-in Zoom pour XD
    13. Publication de designs depuis XD vers Behance
  9. XD pour iOS et Android
    1. Aperçu sur appareils mobiles
    2. FAQ concernant Adobe XD pour mobile
  10. Résolution des problèmes
    1. Problèmes connus et résolus
      1. Problèmes connus
      2. Problèmes résolus
    2. Installation et mises à jour
      1. XD semble incompatible avec Windows
      2. Code d’erreur 191
      3. Code d’erreur 183
      4. Problèmes d’installation des modules externes XD
      5.  Invitation à désinstaller et réinstaller Adobe XD sur Windows 10
      6. Problèmes liés à la migration des préférences
    3. Lancement et blocage
      1.  XD se bloque au lancement sur Windows 10
      2.  XD se ferme lorsque vous vous déconnectez de Creative Cloud
      3. Problème lié à l’état d’un abonnement sur Windows
      4. Avertissement d’application bloquée lors du lancement de XD sur Windows
      5. Génération du fichier de vidage sur Windows
      6. Collecte et partage de journaux d’incidents
    4. Documents en ligne et bibliothèques Creative Cloud
      1. Problèmes liés aux documents en ligne XD
      2. Problèmes relatifs aux composants liés
      3. Problèmes relatifs aux bibliothèques et aux liens
    5. Prototype, publication et révision
      1. Impossible d’enregistrer les interactions de prototypes sur macOS Catalina
      2. Problèmes liés aux workflows de publication
      3. Les liens publiés n’apparaissent pas dans les navigateurs
      4. Les prototypes ne s’affichent pas correctement dans les navigateurs
      5. Le panneau de commentaires s’affiche soudainement sur les liens partagés
      6. Impossible de publier des bibliothèques
    6. Importation, exportation et utilisation d’autres applications
      1. Importation et exportation dans XD
      2. Fichiers Photoshop dans XD
      3. Fichiers Illustrator dans XD
      4. Exportation dans After Effects à partir de XD
      5. Fichiers Sketch dans XD
      6. ++Applications tierces non visibles lors de l’exportation

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.

Qu’est-ce que les repères ?
Repères dans XD

Qu’est ce que les grilles ?
Grilles de mise en page et grilles quadrillées dans XD

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.

Vous débutez dans Adobe XD ?

Télécharger la version d’essai gratuite

Découvrez les bases de l’application.

C’est à vous !

Fichier d’exemple

.xd ; 6 Mo

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 ?

« 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.

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.

Logo Adobe

Accéder à votre compte