Guide d'utilisation Annuler

Utilisation d’actifs externes

  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 importer des actifs dans Adobe XD à partir de Photoshop, Illustrator, Sketch et des navigateurs web, et exporter des actifs vers After Effects.

Dans XD, il est possible d’importer des actifs provenant d’applications Adobe, comme Photoshop et Illustrator, d’applications tierces telles que Sketch, mais aussi de navigateurs web. Améliorez ces actifs dans XD ou utilisez-les pour développer des prototypes interactifs. Vous pouvez également exporter des ressources de XD vers After Effects pour les améliorer davantage.

Vous pouvez utiliser des actifs externes de plusieurs manières en fonction de l’application :

 Si vous souhaitez convertir des fichiers Photoshop et Illustrator en fichiers XD, utilisez l’option Ouvrir. Si vous souhaitez ajouter le contenu de ces fichiers dans un fichier XD existant, utilisez l’option Importer.

Utilisation de Photoshop

Vous pouvez utiliser l’une des méthodes suivantes pour importer des actifs Photoshop dans XD :

  • Ouvrez un fichier .psd directement dans XD en sélectionnant Fichier > Ouvrir. Vous pouvez ensuite le modifier dans l’application comme n’importe quel autre fichier XD, relier des interactions et le partager comme prototype ou spécification technique.
  • Importez le fichier .psd dans XD en sélectionnant Fichier > Importer.
  • Copiez du contenu bitmap et vectoriel depuis Photoshop et collez-le dans XD. 
  • Faites glisser des actifs Photoshop depuis le panneau Bibliothèques vers la zone de travail XD. Pour en savoir plus, reportez-vous à la section Bibliothèques Creative Cloud dans Adobe XD.
  • Copiez un fichier .psd dans le presse-papiers du système d’exploitation, puis utilisez l’option Coller l’aspect pour coller l’image directement en tant que remplissage d’image. 

Pour plus d’informations, consultez la section Utilisation de fichiers de conception à partir de Photoshop.

Copier-coller de fichiers SVG depuis Photoshop

Pour copier et coller un fichier SVG depuis Photoshop, faites un clic droit sur la forme ou le calque vectoriel dans Photoshop, cliquez sur Copier SVG, puis collez-le dans XD.

Importation d’actifs depuis Illustrator

Vous pouvez ouvrir des fichiers Illustrator dans XD ou les importer.

Vous pouvez également copier des images vectorielles et bitmap depuis Adobe Illustrator et les coller dans XD en conservant la même fidélité et le même caractère modifiable lorsque vous ouvrez ou importez des fichiers Illustrator. Les fichiers Illustrator sont glissés vers le document ouvert et non ouverts en tant que documents séparés. Les objets dynamiques sont importés sous forme de calques développés au lieu de bitmaps, et les calques de réglage sont conservés. Cependant, vous ne pouvez pas copier et coller un plan de travail Illustrator dans XD.

Vous pouvez aussi copier un fichier vectoriel dans le presse-papiers du système d’exploitation, puis utiliser l’option Coller l’aspect pour coller l’image directement en tant que remplissage d’image. 

Vous pouvez également importer dans XD des actifs Adobe Illustrator stockés dans les bibliothèques Creative Cloud. Pour ce faire, faites-les glisser depuis le panneau Bibliothèques vers la zone de travail XD. Pour en savoir plus, reportez-vous à la section Bibliothèques Creative Cloud dans Adobe XD.

Copier-coller du contenu SVG depuis XD vers Illustrator

Vous pouvez maintenant copier le contenu vectoriel XD vers votre presse-papiers, puis le coller en tant que calques entièrement modifiables dans Adobe Illustrator.

Pour copier et coller un contenu de XD vers Illustrator :

1. Effectuez un clic droit sur la forme ou le calque vectoriel dans XD et sélectionnez Copie dans le menu contextuel.

2. Dans Adobe Illustrator, sélectionnez Édition> Coller pour coller le contenu vectoriel.

Ouverture de fichiers Illustrator dans XD

Importation d’actifs Illustrator dans XD
Importation d’actifs Illustrator dans XD

Vous pouvez ouvrir directement des fichiers Illustrator (.ai) dans XD, puis les convertir en fichiers XD. Une fois vos fichiers ouverts, vous pouvez les modifier dans XD, relier des interactions et les partager sous forme de prototypes ou de spécifications techniques.

Pour ouvrir un fichier Illustrator dans XD, procédez comme suit :

  • Dans XD, sélectionnez Fichier > Ouvrir. Accédez au dossier en question, sélectionnez un fichier .ai  et ouvrez-le dans XD. Vous pouvez également utiliser le raccourci clavier Cmd + O (Mac) ou Ctrl + O (Windows).
  • Pour ouvrir le fichier dans XD (Mac uniquement), faites glisser le fichier Ai sur l’icône XD.
  • Faites un clic droit sur le fichier Illustrator et sélectionnez Ouvrir avec > XD dans le sous-menu.

 Lorsque vous ouvrez un fichier Illustrator dans XD, certains actifs ne sont pas bien pris en charge et subissent une perte de fidélité. Pour obtenir la liste des éléments pris en charge ou non, reportez-vous à la section Fonctionnalités prises en charge et non prises en charge lors de l’ouverture des fichiers Illustrator dans XD.

Importation de fichiers Illustrator

Pour importer un fichier Illustrator dans XD, sélectionnez Fichier > Importer. Si les fichiers Illustrator importés comportent des plans de travail, ces plans de travail sont placés sous les plans de travail XD. Si l’espace sous les plans de travail XD est insuffisant, les plans de travail importés sont placés dans les espaces disponibles. Si le fichier importé ne contient pas de plan de travail, ses actifs sont placés au centre de la zone de dessin. Si le fichier importé ne contient pas de plan de travail, ses actifs sont placés au centre de la zone de dessin. 

Importation d’actifs depuis Sketch

Différentes options d’importation d’actifs Sketch dans XD
Différentes options d’importation d’actifs Sketch dans XD

  • Vous pouvez ouvrir un fichier .sketch directement dans XD. Vous pouvez ensuite le modifier dans l’application comme n’importe quel autre fichier XD, relier des interactions et le partager comme prototype ou spécification technique. Pour en savoir plus, reportez-vous à la section Ouverture de fichiers Sketch dans XD.
  • Vous pouvez également copier des actifs depuis Sketch et les coller dans XD. Pour en savoir plus, reportez-vous à la section Importation d’actifs sélectionnés depuis Sketch.
  • Vous pouvez également copier et coller un élément directement de Sketch vers XD, en conservant son caractère modifiable dans XD.
  • Vous pouvez aussi copier un fichier Sketch dans le presse-papiers du système d’exploitation, puis utiliser l’option Coller l’aspect pour coller l’image directement en tant que remplissage d’image. 
  • Vous pouvez convertir du contenu Sketch en systèmes de conception XD. Pour plus d’informations, consultez la section Conversion de bibliothèques Sketch.

Ouverture de fichiers Sketch dans XD

Vous pouvez ouvrir directement des fichiers Sketch (.sketch) dans XD, puis les convertir en fichiers XD. Une fois vos fichiers ouverts, vous pouvez les modifier dans XD, relier des interactions et les partager sous forme de prototypes ou de spécifications techniques.

 Vous pouvez uniquement ouvrir des fichiers Sketch créés à l’aide de Sketch version 43 ou plus récente. Si votre fichier est plus ancien, enregistrez-le avec la dernière version de Sketch, puis ouvrez le fichier dans XD.

Pour ouvrir un fichier Sketch dans XD, procédez de l’une des manières suivantes :

  • Cliquez sur Fichier > Ouvrir. Accédez au dossier concerné, sélectionnez un fichier .sketch et ouvrez-le dans XD.
  • Faites glisser le fichier Sketch sur l’icône XD pour ouvrir le fichier dans XD (Mac uniquement).
  • Faites un clic droit sur le fichier Sketch et sélectionnez Ouvrir avec > XD dans le menu contextuel.

Vous pouvez également utiliser le raccourci clavier Cmd+O (Mac) ou Ctrl+O (Windows).

 Lorsque vous ouvrez un fichier Sketch dans XD, certains actifs ne sont pas bien pris en charge et subissent une perte de fidélité. Pour obtenir la liste des éléments pris en charge ou non, reportez-vous à la section Éléments pris en charge pour les fichiers Sketch ouverts dans XD.

Importation d’actifs sélectionnés depuis Sketch

  1. Dans Sketch, sélectionnez un ou plusieurs calques ou groupes, puis cliquez sur Rendre exportable

  2. Choisissez le format SVG, puis faites glisser le calque de Sketch vers XD.

    Le contenu est inséré en tant qu’image vectorielle modifiable dans XD.

Conversion de bibliothèques Sketch en systèmes de conception XD

Vous pouvez maintenant déplacer votre contenu Sketch dans XD et continuer à travailler sur vos systèmes de conception. Non seulement vos symboles et éléments Sketch sont convertis en composants XD, mais vous pouvez également les utiliser comme actifs liés.

  1. Ouvrez le système de design dans XD.
  2. À partir du panneau Actifs, cliquez sur Lier les actifs. S’il existe déjà des actifs dans le panneau Actifs, cliquez sur l’icône plus (+).
  3. Dans la fenêtre Lier les actifs, sélectionnez Convertir la bibliothèque Sketch, puis sélectionnez un fichier Sketch dans le sélecteur de fichiers. XD convertit le document Sketch source et l’enregistre automatiquement comme un document en ligne et lie la couleur, les styles de caractères et les composants à votre document XD. 
  4. Si vous devez travailler avec plusieurs bibliothèques Sketch, cliquez sur l’icône Plus dans le panneau Actifs et réimportez une autre bibliothèque Sketch. 

Bibliothèques et composants Sketch

Suivez ces instructions pour travailler avec des composants dans XD :

  1. Faites glisser les composants convertis sur le plan de travail. 
  2. Pour modifier un composant source, cliquez sur une instance du composant, faites un clic droit et sélectionnez Modifier le composant principal dans le document source
  3. Pour modifier un actif, sélectionnez-le dans le panneau Actifs.
  4. Une fois les modifications appliquées, passez à votre document de travail.
  5. Cliquez sur Mettre à jour pour accepter les modifications. 

Pour plus d’informations, consultez la section Utilisation de composants dans XD.

En savoir plus

Regardez cette illustration animée pour en savoir plus sur la conversion de bibliothèques en systèmes de conception XD.

Temps de visionnage : 30 secondes.

1

Importation d’actifs à partir de navigateurs web

Vous pouvez faire glisser directement des images sur vos plans de travail depuis n’importe quel navigateur web récent. Il est aussi possible de faire glisser les images sur un objet d’un plan de travail : dans ce cas, l’image est automatiquement redimensionnée pour s’adapter à l’objet.

Vous pouvez aussi copier une image dans le presse-papiers du système d’exploitation, puis utiliser l’option Coller l’aspect pour coller l’image directement en tant que remplissage d’image. 

Importation d’autres fichiers

Pour importer des actifs tels que des fichiers PNG, JPG, TIFF, GIF, SVG, des vidéos prises en charge et des fichiers Lottie, effectuez l’une des actions suivantes :

  • Cliquez sur Fichier > Importer, puis parcourez l’arborescence et sélectionner le fichier.
  • À partir du Finder ou de l’Explorateur de fichiers Windows, faites glisser et déplacez le fichier dans XD. Vous pouvez également copier et coller un fichier image.

Exportation vers After Effects

Exportation d’actifs vers After Effects
Exportation d’actifs vers After Effects

 Depuis XD, vous ne pouvez exporter que vers After Effects 2018 et versions ultérieures. Si une version plus ancienne est installée, l’option Exportation vers After Effects est désactivée. Pour activer cette option, connectez-vous à l’application pour postes de travail Creative Cloud et mettez à jour After Effects vers la dernière version.

Si vous souhaitez utiliser After Effects pour transformer vos designs XD en animations ou micro-interactions personnalisées, procédez comme suit :

  • Dans XD, sélectionnez le calque ou le plan de travail à animer dans After Effects. 
  • Sélectionnez Fichier > Exporter > After Effects. Si After Effects n’est pas installé sur votre ordinateur, cette option est grisée. Vous pouvez également utiliser le raccourci clavier ⌥⌘F (Mac) ou Ctrl + Alt + F (Windows). After Effects se lance (s’il est fermé) ou passe au premier plan (s’il est exécuté en arrière-plan).
  • Les calques ou les plans de travail sélectionnés sont transférés dans votre projet After Effects en tant que formes natives, textes avec espacement des paragraphes, actifs, contours intérieurs et extérieurs et compositions imbriquées. Vous pouvez effectuer plusieurs transferts d’actifs vers le même projet After Effects et créer des animations par étapes ou à partir de plusieurs fichiers XD.

 Lorsque vous exportez un contenu XD vers After Effects, certains éléments ne sont pas bien pris en charge et subissent une perte de fidélité. Pour obtenir la liste des éléments pris en charge et non pris en charge, consultez la section Fonctionnalités prises en charge et non prises en charge lors de l’exportation de fichiers XD vers After Effects.

Limitations d’importation et d’exportation

Pour en savoir plus sur les limitations d’importation et d’exportation, consultez Pourquoi ne puis-je pas importer ou exporter des fichiers dans Adobe XD ?

Logo Adobe

Accéder à votre compte