Importez des actifs provenant d’autres applications telles que Photoshop, Illustrator, After Effects ou Sketch, faites glisser des images depuis un navigateur web ou collez les images depuis le presse-papiers dans Adobe XD.

Dans Adobe XD, il est possible d’importer des éléments provenant d’autres applications Adobe, comme Photoshop ou Illustrator, mais aussi d’applications tierces telles que Sketch. Vous pouvez continuer à améliorer ces éléments dans XD ou les utiliser pour développer des prototypes interactifs.

Vous pouvez importer des actifs de différentes manières, en fonction de l’application utilisée.

Remarque :

Si vous souhaitez convertir des fichiers Photoshop et Illustrator en fichiers XD, utilisez la fonction Ouvrir. Si vous souhaitez ajouter le contenu de ces fichiers dans un fichier XD existant, utilisez la fonction d’importation.

Importation d’actifs depuis Photoshop

Vous pouvez importer des actifs Photoshop dans XD de plusieurs façons.

Différentes options d’importation d’actifs Photoshop dans XD
Différentes options d’importation d’actifs Photoshop dans XD
  • Vous pouvez ouvrir un fichier .psd 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 Photoshop dans XD.
  • Vous pouvez importer un fichier .psd dans XD.
  • Vous pouvez copier du contenu bitmap et vectoriel depuis Photoshop et le coller dans XD. 
  • Vous pouvez faire glisser des actifs Photoshop depuis le panneau Bibliothèques CC vers la zone de dessin de XD. Pour en savoir plus, reportez-vous à la section Bibliothèques Creative Cloud dans Adobe XD.
  • Vous pouvez aussi copier un fichier .psd 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. 

Ouverture de fichiers Photoshop dans XD

Vous pouvez ouvrir directement des fichiers Photoshop (.psd) 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 Photoshop dans XD, procédez de l’une des manières suivantes :

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

Vous pouvez également utiliser le raccourci clavier Cmd + O (Mac) ou Ctrl + O (Windows). Si vous avez récemment ouvert un fichier PSD, vous pouvez aussi l’ouvrir à partir de la liste des Fichiers récents sur l’écran de démarrage.

Remarque :

Photoshop et XD proposent de nombreuses fonctionnalités différentes. XD intègre des éléments et des effets de Photoshop qui peuvent être associés aux fonctionnalités de XD. Le reste des éléments sont pixellisés, ou ne sont pas encore transférables vers le fichier XD. Pour savoir quels éléments sont pris en charge dans cette version, reportez-vous à la section Éléments pris en charge pour les fichiers Photoshop ouverts dans XD.

Importation des fichiers Photoshop dans XD

Pour importer un fichier Photoshop dans XD, sous XD, sélectionnez Fichier > Importer. Si les fichiers Photoshop 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. 

Lorsqu’un fichier Photoshop est importé dans XD :

  • Les objets intelligents importés depuis Photoshop ont une haute fidélité et sont modifiables.
  • Les calques de réglage d’une image Photoshop ne sont pas ignorés.
  • Les fichiers 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.
  • Tous les liens vers des actifs de bibliothèque Creative Cloud depuis Photoshop sont conservés.

Copier-coller de contenu bitmap depuis Photoshop

Pour importer du contenu bitmap depuis Photoshop, procédez de la manière suivante :

Vous pouvez copier du contenu bitmap depuis Photoshop en le sélectionnant à l’aide de l’outil Rectangle de sélection. Ensuite, sélectionnez l’une des options suivantes :

  • Edition > Copier pour sélectionner le contenu au niveau du calque actif.
  • Edition > Copier avec fusion pour sélectionner le contenu au niveau de tous les calques inclus dans la sélection.

Collez le contenu copié dans XD.

  1. Sélectionnez tous les éléments (Cmd+A ou Ctrl+A) d’un calque de texte ou bitmap (ou convertissez d’abord un calque ou groupe de vecteurs en objet dynamique).

  2. Copiez le contenu.

  3. Collez le contenu dans XD.

    Le calque est collé sous forme de bitmap.

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 CC vers la zone de dessin de XD. Pour en savoir plus, reportez-vous à la section Bibliothèques Creative Cloud dans Adobe XD.

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.

Remarque :

Lorsque vous ouvrez un fichier Illustrator dans XD, 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 ou non, reportez-vous à la section Éléments pris en charge pour les fichiers Illustrator ouverts 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. 

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.

Remarque :

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

Remarque :

Lorsque vous ouvrez un fichier Sketch dans XD, 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 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.

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. 

Exporter vers After Effects

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

Remarque :

L’exportation vers After Effects est prise en charge uniquement avec les versions After Effects CC 2018 et 2019. Si vous avez une version plus ancienne installée, l’option Exporter vers After Effects est désactivée dans XD. Pour activer cette option, connectez-vous à votre application 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.

Remarque :

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

Importation d’autres fichiers

Pour importer des éléments enregistrés au format PNG, JPG, TIFF, GIF ou SVG, effectuez l’une des opérations suivantes :

  • Dans XD, sous Mac, cliquez sur Fichier > Importer, puis parcourez l’arborescence pour sélectionner le fichier. Sous Windows, cliquez sur le menu hamburger, puis sélectionnez Importer.
  • À partir du Finder ou de l’Explorateur de fichiers Windows, déplacez l’image vers XD en la faisant glisser ou via un copier-coller.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne