Exportation d’éléments de design

Découvrez comment exporter des actifs 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.

Si vous utilisez XD sur Mac, vous pouvez également importer vos conceptions dans des intégrations d’applications tierces telles que Zeplin, Avocode, Sympli, Kite Compositor ou encore Protopie.

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

Mac

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

Windows

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

  • Lot : vous pouvez exporter des ressources par lots en les marquant avec l’option Marquer pour exportation dans l’Inspecteur 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.

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 avec le bouton droit de la souris sur un calque de la zone de travail et sélectionnez Marquer pour exportation dans le menu déroulant. 
  • Ouvrez le panneau Calques et cliquez sur l’icône d’exportation située à côté du nom du calque. 

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 :

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

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.

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.

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.

  • 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 %)

Exportation d’éléments vers des applications tierces

Vous pouvez également importer vos conceptions à partir de XD dans d’autres applications, à savoir : Zeplin, Avocode, Sympli, Kite Compositor ou encore 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.

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

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

Résolution des problèmes

Rencontrez-vous des problèmes lors de l’exportation d’actifs ? Lisez cet article pour résoudre les problèmes liés à l’exportation.

Vous avez une question ou une suggestion ?

Questions à la communauté

Voulez-vous que votre outil de conception préféré dispose de workflows d’exportation supplémentaires ? Votez pour une fonctionnalité ou ajoutez une demande dans XD UserVoice.

Si vous avez une question à poser ou une idée à partager, rejoignez la communauté Adobe XD. Nous serions ravis de vous compter parmi nous et de découvrir vos créations.

Logo Adobe

Accéder à votre compte