Dernière mise à jour le
1 août 2023
- 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
Découvrez comment utiliser des plans de travail pour créer vos projets de conception dans XD.
Voici Jeanee, une graphiste choisie pour diriger un projet en UX design. Elle présente Adobe XD à son équipe, dont les membres ont des niveaux d’expertise variés en termes de conception et d’outils UX.
- Elle cherche des ressources qui pourraient l’aider à démarrer le projet rapidement.
- Elle a besoin de tutoriels pour commencer et de fichiers d’exemple pour apprendre à la volée.
Jeanee étudie les terminologies de base de la conception et travaille avec des plans de travail pour créer son premier prototype dans XD. Lisez ce qui suit pour savoir comment nous pouvons l’aider à commencer.
Avant de commencer
Familiarisez-vous avec les notions de base de XD :
Configuration des plans de travail en 4 étapes simples
Qu’est-ce qu’un plan de travail ? Les plans de travail désignent les écrans de votre application ou les pages de votre site web. Ils simplifient les processus de conception et créent des conceptions interactives pour plusieurs tailles d’écran dans un seul document. Utilisez des plans de travail pour créer votre projet XD.
Lisez ce qui suit pour savoir comment configurer vos plans de travail.
Créer un nouveau plan de travail
Adobe XD fournit des plans de travail pour les tailles d’écran les plus utilisées, telles que celles des différentes versions d’iPhone, d’iPad et de navigateurs web. Vous pouvez créer un plan de travail personnalisé si les choix ne répondent pas à vos exigences.
Écran d’accueil
Utilisez les tailles de plan de travail prédéfinies ou créez votre plan de travail personnalisé.
Application XD
Utilisez l’outil Plan de travail 
pour créer des plans de travail supplémentaires.
Sélectionnez un plan de travail prédéfini dans l’inspecteur Propriétés ou faites glisser le curseur sur la zone de travail pour créer un plan de travail personnalisé.
Utiliser un plan de travail existant à partir de Photoshop et Illustrator
Vous pouvez importer des plans de travail existants à partir de Photoshop ou Illustrator dans XD sans avoir à les recréer.
Utilisez Fichier > Importer à partir de XD pour ouvrir les plans de travail Photoshop ou Illustrator dans XD tout en gardant tous les plans de travail et calques intacts et modifiables
Consultez cet article qui décrit les 5 meilleures manières d’utiliser les ressources Photoshop dans XD.
Avec XD 57 et versions ultérieures, lorsque vous utilisez une ressource existante associée à un profil de couleur sRVB de Photoshop ou Illustrator vers un document XD, lui aussi doté d’un profil sRVB, vous obtenez des couleurs cohérentes. Si le document XD a un profil de couleur Non géré, l’application affiche un message vous invitant à basculer vers le profil de couleur sRVB.
Gérer les plans de travail
Vous avez changé d’avis sur la taille du plan de travail ? Redimensionnez-les. Vous pouvez également les renommer en fonction des besoins de votre conception. Vous souhaitez créer davantage de plans de travail et gérer leur emplacement ? Dupliquez et réorganisez-les.
Renommer
Double-cliquez sur le titre du plan de travail.
Redimensionner
Faites glisser la poignée circulaire qui s’affiche sur les bords d’un plan de travail.
Dupliquer
Sélectionnez le plan de travail et appuyez sur Ctrl/Cmd + D.
Aligner et répartir
Sélectionnez plusieurs plans de travail, puis cliquez sur Aligner et répartir dans l’inspecteur Propriétés. Faites glisser le plan de travail pour le réorganiser.
Appliquer les grilles de mise en page ou les grilles quadrillées
Vous souhaitez définir la structure sous-jacente du contenu de votre conception ajouté dans les plans de travail ? Appliquez des grilles de mise en page. Vous souhaitez savoir comment mesurer rapidement et aligner le contenu de votre conception lors de la disposition d’objets ou de texte sur vos plans de travail ? Utilisez des Grilles quadrillées.
Grilles de mise en page
Sélectionnez un ou plusieurs plans de travail, puis dans la section Grille de l’Inspecteur Propriétés, choisissez Mise en page.
Grilles rectangulaires
Sélectionnez un ou plusieurs plans de travail et, dans la section Grille de l’Inspecteur Propriétés, choisissez Quadrillée.
Conception des plans de travail
Maintenant que vous avez créé votre premier plan de travail, apprenez à ajouter des éléments visuels et textuels, à modifier l’arrière-plan et à créer des effets de défilement.
Ajout d’éléments visuels et textuels
Maintenant que votre plan de travail de base est en place, vous pouvez créer ou modifier la couleur d’arrière-plan, ajouter des graphismes et créer ou mettre en forme des styles de texte dans des ressources réutilisables. Vous souhaitez créer une grille modifiable d’éléments répétés ? Utilisez des grilles de répétition.
Ajout d’éléments visuels et textuels
Utilisez les outils de Dessin pour créer des éléments personnalisés ou sélectionnez Fichier > Importer pour importer des éléments existants, tels que des images et des icônes, à partir du dossier de votre appareil. Utilisez les outils Texte pour créer, formater et capturer des styles de texte dans des ressources réutilisables.
Pour modifier la couleur d’arrière-plan du plan de travail, dans l’Inspecteur Propriétés, sélectionnez Remplir et appliquez la couleur dans le sélecteur de couleurs.
Création d’éléments répétables
Utilisez les grilles de répétition pour créer des objets avec des éléments répétables, tels que des listes et des mises en page de cartes.
Création de plans de travail défilants
Vous souhaitez ajouter des effets de défilement vertical et horizontal à votre conception ? Utilisez des groupes de défilement pour prototyper une fenêtre de contenu.
Vous souhaitez atteindre une simulation réaliste de défilement sur les ordinateurs de bureau et les appareils mobiles ? Définissez la position fixe d’un élément sur le plan de travail afin d’autres éléments puissent défiler en dessous.
Défilement vertical
Pour étendre le plan de travail au-delà de la hauteur de la fenêtre d’affichage, utilisez le marqueur. Le marqueur indique la position jusqu’à laquelle vous devez faire défiler pour accéder au contenu.
Position fixe lors du défilement
Pour épingler les éléments de conception à une position fixe, sélectionnez Position fixe lors du défilement dans l’inspecteur Propriétés
La conception finale
Maintenant que vous en savez assez sur les plans de travail, vous pouvez vous amuser avec ce que vous avez appris jusqu’à présent et créer des plans de travail plus incroyables encore pour vos projets de conception.
Continuez et téléchargez la conception finale pour avoir un aperçu de votre projet de conception.
En savoir plus
Voici une vidéo d’exemple de 4 minutes pour commencer. Vous pouvez également télécharger les fichiers d’exemple pour les tester parallèlement aux vidéos.
Conseils et astuces
Maintenant que vous avez les bases des plans de travail dans XD, voici quelques conseils et astuces pratiques :
- Pour mesurer la distance entre un objet et les bords d’un plan de travail, cliquez sur l’objet et appuyez sur les touches Option (sous macOS) ou Alt (sous Windows).
- Pour désactiver l’option de défilement dans un plan de travail, sélectionnez le plan de travail et, dans l’inspecteur Propriétés, remplacez Défilement par Aucun.
Pour plus de conseils professionnels sur l’utilisation des plans de travail, suivez @Elainecchao, Chef de produit XD sur Twitter.
Et après ?
Nous vous avons expliqué comment créer, gérer et partager vos plans de travail. Passez à l’étape suivante et découvrez comment créer des repères de plan de travail personnalisés et positionner votre plan de travail à l’aide de grilles.
Vous avez une question ou une suggestion ?
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.
