Guide d'utilisation Annuler

Prise en main des plans de travail dans Adobe 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

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.

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

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éation d’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é.

Plans de travail personnalisés

Application XD

Utilisez l’outil Plan de travail  pour créer des plans de travail supplémentaires. Sélectionnez et appliquez les paramètres prédéfinis du plan de travail dans l’inspecteur Propriétés.

Propriétés du plan de travail

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. 

Utiliser un plan de travail existant à partir de Photoshop et Illustrator

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

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

Réorganiser

Double-cliquez sur le titre du plan de travail.

Redimensionner

Redimensionner

Faites glisser la poignée circulaire qui s’affiche sur les bords d’un plan de travail.

Dupliquer

Copier et coller des plans de travail

Sélectionnez le plan de travail et appuyez sur Ctrl/Cmd + D.

Aligner et répartir

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

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

Grilles de mise en page

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

Création de plans de travail défilants

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 actifs 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

Ajout d’éléments

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

Répéter les éléments

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

Ligne pointillée et contenu défilant

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

Ligne pointillée et contenu défilant

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.

Sous réserve de modification

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

Fichiers d’exemple

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 présenté la création, la gestion et le partage de vos plans de travail. Avancez 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 ?

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

[Feedback V2 Badge]