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.

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

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

Sélectionnez la forme vectorielle dans Illustrator, copiez-la, puis collez-la dans XD. Vous pouvez également copier des images bitmap dans Adobe Illustrator, puis les coller dans XD en conservant le même niveau de fidélité.

Si les éléments vectoriels n’offrent pas un degré de fidélité suffisant à vos yeux, vous avez aussi la possibilité d’exporter un fichier SVG depuis Illustrator, puis de l’ouvrir 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 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 déplacez le calque de Sketch vers XD par glisser-déposer.

    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, textes, actifs et compositions imbriquées natifs. 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 :

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