Guide d'utilisation Annuler

Exportation et téléchargement de fichiers à partir de spécifications techniques

Découvrez comment exporter et télécharger des actifs à partir de spécifications techniques.

Exportation d’actifs à partir de spécifications techniques

Si vous sélectionnez des calques pour exportation et incluez des actifs lors de la publication de spécifications techniques, vous pouvez les télécharger à partir du lien de spécification technique publié. Les actifs vectoriels sont disponibles aux formats SVG, PNG, PDF et JPG, tandis que les actifs bitmap sont exportables aux formats PNG, PDF et JPG.

Sélection de calques pour exportation

Les calques sélectionnés pour exportation sont inclus en tant qu’actifs dans les spécifications techniques. Pour sélectionner des actifs à exporter, sélectionnez un calque sur la zone de travail et utilisez l’une des options suivantes : 

  • Cliquez sur un calque du plan de travail et cochez la case Marquer pour exportation dans le menu contextuel. 
  • Cliquez avec le bouton droit sur un calque de la zone de travail et sélectionnez Marquer pour exportation dans le menu contextuel. 
  • Utilisez le raccourci clavier  (macOS) ou  (Windows).
  • Ouvrez le panneau Calques et cliquez sur l’icône d’exportation  en regard du nom du calque. 

Pour exporter plusieurs actifs, sélectionnez plusieurs calques dans un plan de travail, puis cliquez sur Marquer pour exportation.

Option Marquer pour exportation

Publication de spécifications techniques avec des actifs

Lorsque vous incluez des actifs lors de la publication de spécifications techniques et partagez le lien publié avec les développeurs, vous leur fournissez un emplacement centralisé pour télécharger ces actifs.

  1. Sélectionnez des calques pour exportation dans XD.

    Sélection de calques pour exportation
    Marquer pour exportation

  2. Cliquez sur Partager pour passer en mode Partage. Sélectionnez Développement.

    partager-conceptions

  3. En mode Design, sélectionnez les fichiers que vous souhaitez exporter. Dans l’Inspecteur Propriétés, cochez la case Marquer pour exportation. Les actifs à exporter apparaissent en mode Partage.

  4. En mode Partage, cochez la case Actifs téléchargeables pour marquer vos actifs pour l’exportation, et cliquez sur Créer un lien.

    Adaptez en fonction de la plate-forme pour laquelle vous créez ce design : chaque plate-forme dispose d’un ensemble de paramètres de résolution distinct :

    • Web : les actifs sont exportés à des résolutions de 1x et 2x.
    • iOS : les éléments sont exportés en résolutions 1x, 2x et 3x.
    • Android : les actifs sont optimisés et exportés pour les densités d’écran Android suivantes :
      • ldpi - Faible densité (75 %)
      • mdpi - Densité moyenne (100 %)
      • hdpi - Haute densité (150 %)
      • xhdpi - Extra haute densité (200 %)
      • xxhdpi - Extra extra haute densité (300 %)
      • xxxhdpi - Extra extra extra haute densité (400 %)
  5. Pour ouvrir la spécification technique publiée dans le navigateur, cliquez sur l’icône Ouvrir dans le navigateur et sélectionnez un plan de travail pour afficher les actifs. Le navigateur affiche les actifs sélectionnés avec d’autres détails du plan de travail. 

    Lorsque vous passez le curseur de la souris sur les actifs, la sélection contextuelle met en surbrillance l’actif sélectionné en bleu.

Téléchargement d’actifs des spécifications techniques

Si vous êtes développeur, vous pouvez télécharger des actifs à partir des spécifications techniques publiées qui vous ont été communiquées. Vous pouvez télécharger en une seule fois tous les actifs téléchargeables d’un plan de travail dans la vue de détails d’écran. Vous pouvez également télécharger des actifs individuellement dans la vue de détails de calque.

Vue Détails de l’écran

Lorsque vous cliquez en dehors d’un plan de travail, vous arrivez dans la vue Détails de l’écran. 

Dans la vue Détails de l’écran, vous voyez tous les actifs téléchargeables classés par images, vidéos, animations et fichiers audio dans la section Actifs de l’Inspecteur Propriétés.

Vue Détails de l’écran
Vue « Détails de l’écran » d’un plan de travail avec des actifs sélectionnés pour le téléchargement

Pour télécharger des actifs, procédez comme suit dans la section Actifs :

1. Cliquez pour sélectionner les actifs que vous souhaitez télécharger ensemble :

  • Pour effectuer une sélection multiple, utilisez la touche Maj.
  • Pour sélectionner tous les actifs d’une catégorie, cliquez sur l’un d’entre eux, puis appuyez sur Cmd + A ou Ctrl + A.

La section Actifs sélectionnés apparaît et indique le nombre d’actifs sélectionnés, classés par images, vidéos et fichiers audio.

2. Cliquez sur Télécharger.

Les actifs sont téléchargés sous forme de fichiers .zip dans le dossier Téléchargements de votre ordinateur. Lorsque vous téléchargez des illustrations, vous pouvez changer le format des images vectorielles en SVG, PDF, PNG ou JPG, et le format des images bitmap en PNG, PDF ou JPG.

Informations à prendre en compte

  • Si vous survolez un actif vidéo ou audio dans la section Actifs, vous voyez son extension de fichier.
  • Sur un plan de travail, s’il existe plusieurs copies d’une vidéo, vous ne verrez qu’une seule instance de cette vidéo dans la section Actifs. Lorsque vous survolez une vidéo dans la section Actifs, toutes les instances de cette vidéo sont mises en évidence sur le plan de travail.
  • Sur un plan de travail, si plusieurs vidéos ont la même image de couverture, vous voyez chaque instance de cette image de couverture dans la section Actifs.
  • Lorsque vous téléchargez des actifs issus de différentes catégories ensemble, le dossier .zip téléchargé contient un sous-dossier pour chaque catégorie.
  • Vous ne pouvez télécharger des fichiers vidéo que dans le même format que celui que les designers ont importé dans leur document de design XD. Pour en savoir plus sur les formats vidéo pris en charge, consultez la section Utilisation de vidéos.
  • Pour chaque composant, seul le dernier état inspecté ou l’état actif est disponible au téléchargement dans la section Actifs de la vue de détails d’écran. Si vous souhaitez télécharger les actifs correspondant à tous les états, sélectionnez le calque du composant sur le plan de travail et passez à la vue de détails de calque.

Vue des détails de calque

Lorsque vous sélectionnez un calque sur un plan de travail, vous arrivez dans la vue de détails de calque. Dans celle-ci, vous ne pouvez télécharger que les actifs du calque sélectionné.

Vue des détails de calque
Le calque sélectionné contient une vidéo, son image d’affiche et un fichier audio lié, tous téléchargeables

Pour télécharger un actif du calque sélectionné, cliquez sur Télécharger en regard de l’actif en question dans la section Actifs de l’Inspecteur Propriétés.

Téléchargement d’une vidéo.

Lorsque vous sélectionnez un calque vidéo sur un plan de travail, différentes possibilités s’offrent à vous :

  • Vous pouvez télécharger la vidéo et l’image de l’affiche.
  • Si la vidéo est reliée à une lecture audio, vous pouvez également télécharger le fichier audio correspondant.

Téléchargement Lottie

Lorsque vous sélectionnez un calque Lottie sur un plan de travail, différentes possibilités s’offrent à vous :

  • Vous pouvez télécharger l’animation Lottie sous forme de fichier JSON.
  • Si l’animation Lottie est reliée à une lecture audio, vous pouvez télécharger le fichier audio correspondant.

Téléchargement des composants

Pour télécharger les actifs associés à un composant, sélectionnez ce dernier sur la zone de travail. Ensuite, dans l’Inspecteur Propriétés, passez sur chaque état pour télécharger l’actif correspondant.

Dans l’application XD, si le designer marque plusieurs instances d’un composant pour exportation, seule la dernière instance du panneau Calques est exportée.

Expérience de téléchargement pour XD 44 et les versions ultérieures

Pour les liens publiés à partir de XD 44 et versions ultérieures :

Lorsque vous cliquez sur Télécharger, une fenêtre indiquant la progression de l’opération s’affiche. Une fois le téléchargement terminé, vous pouvez reprendre l’inspection des plans de travail ou la navigation d’un plan de travail à un autre.

Boîte de dialogue affichant la progression du téléchargement
Boîte de dialogue affichant la progression du téléchargement dans les liens publiés à partir de XD 44 et des versions ultérieures.

Si vous obtenez une erreur lors du téléchargement des actifs, demandez au designer de republier le lien et de le partager à nouveau.

Erreur lors du téléchargement d’actifs
Erreur lors du téléchargement d’actifs

Recevez de l’aide plus rapidement et plus facilement

Nouvel utilisateur ?