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.
Dernière mise à jour le
- Guide de l’utilisateur d’Adobe XD
- Introduction
- Nouveautés d’Adobe XD
- Questions fréquentes
- Design, création de prototypes et partage avec Adobe XD
- Gestion des couleurs
- Configuration requise
- Notions de base concernant l’espace de travail
- Changement de langue dans l’application Adobe XD
- Accès aux kits de conception d’interface utilisateur
- Accessibilité dans Adobe XD
- Raccourcis clavier
- Conseils et astuces
- Conception
- Plans de travail, repères et calques
- Formes, objets et chemins
- Sélection, redimensionnement et rotation d’objets
- Déplacement, alignement, répartition et disposition d’objets
- Regroupement, verrouillage, duplication, copie et retournement d’objets
- Application d’un contour, d’un fond ou d’une ombre portée à un objet
- Création d’éléments répétés
- Création de designs en perspective avec des transformations 3D
- Modification d’objets à l’aide d’opérations booléennes
- Texte et polices
- Composants et états
- Masquage et effets
- Mise en page
- Vidéos et animations Lottie
- Prototypage
- Création de prototypes interactifs
- Animation des prototypes
- Propriétés d’objet prises en charge pour l’animation automatique
- Création de prototypes avec clavier et manette de jeu
- Création de prototypes à l’aide de la lecture et des commandes vocales
- Création de transitions temporisées
- Ajouter des incrustations
- Conception de prototypes de voix
- Création de liens d’ancrage
- Création d’hyperliens
- Aperçu de designs et de prototypes
- Partage, exportation et révision
- Partage des plans de travail sélectionnés
- Partage de conceptions et de prototypes
- Définition des autorisations d’accès pour les liens
- Utilisation de prototypes
- Révision de prototypes
- Utilisation des spécifications techniques
- Partage de spécifications techniques
- Inspection de spécifications techniques
- Navigation dans les spécifications techniques
- Révision des spécifications techniques et commentaires
- Exportation de ressources de design
- Exportation et téléchargement de fichiers à partir de spécifications techniques
- Partage de groupe pour les entreprises
- Sauvegarde et transfert de ressources XD
- Chartes graphiques
- Chartes graphiques et bibliothèques Creative Cloud
- Utilisation de ressources de document dans Adobe XD
- Utilisation des bibliothèques Creative Cloud dans Adobe XD
- Migration de ressources liées vers les bibliothèques Creative Cloud
- Utilisation des jetons de conception
- Utilisation de ressources provenant de bibliothèques Creative Cloud
- Documents en ligne
- Intégrations et plug-ins
- Utilisation de ressources externes
- Utilisation de ressources de design provenant de Photoshop
- Copier-coller de ressources depuis Photoshop
- Importation ou ouverture de conceptions Photoshop
- Utilisation des fichiers Illustrator dans Adobe XD
- Ouverture et importation de conceptions Illustrator
- Copie de vecteurs d’Illustrator vers XD
- Plug-ins pour Adobe XD
- Création et gestion des plug-ins
- Intégration Jira pour XD
- Plug-in Slack pour XD
- Plug-in Zoom pour XD
- Publication de designs depuis XD vers Behance
- XD pour iOS et Android
- Résolution des problèmes
- Problèmes connus et résolus
- Installation et mises à jour
- Lancement et blocage
- XD se bloque au lancement sur Windows 10
- XD se ferme lorsque vous vous déconnectez de Creative Cloud
- Problème lié à l’état d’un abonnement sur Windows
- Avertissement d’application bloquée lors du lancement de XD sur Windows
- Génération du fichier de vidage sur Windows
- Collecte et partage de journaux d’incidents
- Documents en ligne et bibliothèques Creative Cloud
- Prototype, publication et révision
- Impossible d’enregistrer les interactions de prototypes sur macOS Catalina
- Problèmes liés aux workflows de publication
- Les liens publiés n’apparaissent pas dans les navigateurs
- Les prototypes ne s’affichent pas correctement dans les navigateurs
- Le panneau de commentaires s’affiche soudainement sur les liens partagés
- Impossible de publier des bibliothèques
- Importation, exportation et utilisation d’autres applications
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.
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
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.
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
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.
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.
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
- 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
- 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.
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
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.
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.
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.
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
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 :
- 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
- 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
- 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 ?
Accéder à votre compte