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. Gestion des couleurs
    5. Configuration requise
      1. Configuration matérielle et logicielle requise
      2. Adobe XD, Big Sur et Apple Silicon | macOS 11
    6. Notions de base concernant l’espace de travail
    7. Changement de langue dans l’application Adobe XD
    8. Accès aux kits de conception d’interface utilisateur
    9. Accessibilité dans Adobe XD
    10. Raccourcis clavier
    11. Conseils et astuces
  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 de ressources de design
    12. Exportation et téléchargement de fichiers à partir de spécifications techniques
    13. Partage de groupe pour les entreprises
    14. Sauvegarde et transfert de ressources XD
  6. Chartes graphiques
    1. Chartes graphiques et bibliothèques Creative Cloud
    2. Utilisation de ressources de document dans Adobe XD
    3. Utilisation des bibliothèques Creative Cloud dans Adobe XD
    4. Migration de ressources liées vers les bibliothèques Creative Cloud
    5. Utilisation des jetons de conception 
    6. Utilisation de ressources 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 de ressources externes
    2. Utilisation de ressources de design provenant de Photoshop
    3. Copier-coller de ressources 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.

Avant de commencer

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

Plans de travail personnalisés

Application XD

Utilisez l’outil Plan de travail  pour créer des plans de travail supplémentaires. 

Propriétés du plan de travail

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. 

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

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

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

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

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.

 Adobe

Recevez de l’aide plus rapidement et plus facilement

Nouvel utilisateur ?

Adobe MAX 2024

Adobe MAX
La conférence sur la créativité

Du 14 au 16 octobre à Miami Beach et en ligne

Adobe MAX

La conférence sur la créativité

Du 14 au 16 octobre à Miami Beach et en ligne

Adobe MAX 2024

Adobe MAX
La conférence sur la créativité

Du 14 au 16 octobre à Miami Beach et en ligne

Adobe MAX

La conférence sur la créativité

Du 14 au 16 octobre à Miami Beach et en ligne