Utilisation d’actifs externes

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 :

• Importation d’actifs depuis Photoshop
• Importation d’actifs depuis Illustrator
• Importation d’actifs depuis Sketch
• Importation d’actifs à partir de navigateurs web
• Importation d’autres fichiers
  
• Exportation vers After Effects

 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.

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

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

• 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

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.

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

 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 ?