Découvrez comment exporter des éléments prêts à l’emploi aux formats PNG, SVG, JPG et PDF depuis Adobe XD.

Vous pouvez exporter des éléments tels que des images bitmap, des icônes et des textes, plans de travail et motifs d’arrière-plan depuis XD aux formats PNG, SVG, JPG et PDF. Ces ressources exportées sont optimisées pour le déploiement sur iOS, Android ou les applications Web.

export_design_hero

Si vous utilisez XD sur Mac, vous pouvez également importer vos conceptions dans des intégrations d’applications tierces telles que ZeplinAvocodeSympliKite Compositor et Protopie.

Exportation d’éléments et de plans de travail

Pour exporter des éléments ou des plans de travail, sélectionnez l’une de ces options :

Mac

Sélectionnez un objet ou un plan de travail, accédez à Fichier > Exporter ou appuyez sur Cmd + E.    

selection_updated

Windows

Sélectionnez un objet ou un plan de travail, puis accédez à Fichier > Exporter.  

selection_win_updated
  • Lot : vous pouvez exporter des ressources par lots en les marquant avec l’option Marquer pour exportation dans l’Inspecteur des propriétés. Pour exporter plusieurs objets sous forme de ressource unique, vous devez au préalable les associer.
  • Sélectionné : vous pouvez sélectionner et exporter des ressources spécifiques.
  • Tous les plans de travail : vous pouvez sélectionner tous les plans de travail à exporter dans un projet de conception.
  • After Effects : vous pouvez sélectionner la ressource à exporter vers After Effects.

Exportation d’éléments vers différents formats de fichiers

Les éléments sont des fichiers de conception dont ont besoin les développeurs pour recréer vos conceptions à l’aide des langages HTML/CSS/JS dans un site Web ou de langages natifs comme Swift ou Java dans les applications iOS et Android.

En général, les éléments les plus courants sont les images bitmap, les icônes et les motifs d’arrière-plan que vous pouvez exporter aux formats suivants :

png_image

Fichier PDF unique : vous pouvez sélectionner plusieurs plans de travail ou éléments et les exporter sous la forme d’un fichier PDF unique. 

Fichiers PDF individuels : vous pouvez sélectionner plusieurs plans de travail ou éléments et les exporter sous la forme de plusieurs PDF individuels. Un fichier PDF distinct est alors créé pour chaque élément ou plan de travail sélectionné.

jpg_image

Lorsque vous exportez des éléments au format JPG, vous pouvez définir le niveau de qualité du fichier JPG. Sélectionnez une option de pourcentage dans la liste déroulante Qualité, puis dans le menu Exporter pour, choisissez Design ou Web.

Les JPG ne sont pas convertis en PDF ; les images raster sont importées en tant qu’images et semblent donc se transformer en PDF.

svg_image

Lorsque vous exportez des objets ou des plans de travail au format SVG, vous pouvez définir le style visuel sur Attributs de présentation ou CSS interne

  • Attributs de présentation : utilise des attributs XML distincts pour chaque propriété de style spécifique sur chaque balise SVG. Ce format est requis afin d’utiliser des actifs SVG avec Android Studio.
  • CSS interne : utilise une seule balise de style avec des classes CSS et partage les paramètres de style entre les différents objets ayant le même style, ce qui réduit la taille des fichiers.

Vous pouvez les enregistrer en tant qu’images intégrées ou liées.

  • Incorporer : l’image bitmap est encodée dans le fichier SVG.
  • Lier : l’image bitmap est stockée séparément avec une référence au fichier SVG.

png_image

Lorsque vous sélectionnez PNG, vous pouvez choisir d’exporter les éléments sur les plateformes suivantes :

  • Design constitue l’option par défaut. L’élément est exporté au format PNG à une résolution de 1x.
  • Web : les éléments sont exportés avec les résolutions 1x et 2x.
  • iOS : les éléments sont exportés avec les résolutions 1x, 2x et 3x.
    Les formats de plan de travail par défaut pour les différents appareils iOS partent du principe que vous créez en 1x. Par conséquent, si vous avez conservé les valeurs par défaut, laissez votre exportation en 1x. Néanmoins, vous pouvez également choisir de créer en 2x doublant la largeur et la hauteur du plan de travail.
Export-Assets-updated-iOS
  • Android : les éléments de design 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 %)
export-assets-updated-android1

Exportation d’éléments vers des applications tierces

Vous pouvez importer vos compositions dans d’autres applications qui s’intègrent à XD, à savoir : Zeplin, Avocode, Sympli, Kite Compositor et Protopie

  1. Sélectionnez un plan de travail ou un calque dans votre fichier XD, puis cliquez sur Fichier > Exporter > Zeplin.

    Si vous avez plusieurs applications intégrées à XD, le raccourci clavier (⌥⌘E) lance la dernière intégration que vous avez utilisée.

    Exportation d’éléments vers Zeplin
    Exportation d’éléments vers Zeplin
  2. Cliquez sur Importer. Pour remplacer les écrans existants portant le même nom dans Zeplin, sélectionnez Replace screens with the same name (Remplacer les écrans portant le même nom). Zeplin ajoute l’élément en tant que nouvelle version du même écran, sans perdre vos notes.

En savoir plus

Regardez ce tutoriel pour en savoir plus sur l’exportation d’éléments depuis XD.

Temps de visionnage : 2 minutes.

Options pour une exportation au format PNG pour Android
Options pour une exportation au format PNG pour Android

Vous avez une question ou une idée ?

community

Si vous rencontrez des problèmes lorsque vous utilisez Zeplin dans XD, consultez cet article pour trouver une solution.

Vous rencontrez des problèmes avec l’exportation de fichiers ? Lisez cet article pour résoudre les problèmes d’exportation.

Souhaitez-vous que nous ajoutions davantage de fonctionnalités aux flux de travaux d’exportation existants ? Commentez ou ajoutez votre demande dans XD UserVoice.

Si vous avez une question à poser ou une idée à partager, rejoignez la communauté Adobe XD. Nous aimerions connaître vos commentaires et découvrir vos créations.


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