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

Vous pouvez partager des éléments prêts à l’emploi avec les développeurs afin de les utiliser dans des sites web ou des applications mobiles. Les éléments de design peuvent être exportés à partir de XD aux formats PNG, SVG, JPG et PDF, optimisés pour un déploiement sur iOS, Android ou Internet.

Vous pouvez exporter des éléments, textes ou plans de travail spécifiques, ou tous les plans de travail du projet. Si vous utilisez XD sous Mac, vous pouvez également exporter des actifs vers d’autres applications. Pour en savoir plus, reportez-vous à la section Intégration de logiciels tiers.

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

  1. Pour exporter des éléments de design sur Mac, sélectionnez Fichier > Exporter. Sous Windows, cliquez sur le menu hamburger, puis sélectionnez Exporter

    Si vous avez sélectionné des plans de travail dans le panneau Calques, faites un clic droit et sélectionnez Exporter.

    Les options d’exportation suivantes sont disponibles :

    • Traitement par lots : pour exporter tous les éléments identifiés à l’aide de l’option Marquer pour exportation.
    • Sélectionné : pour exporter uniquement les éléments sélectionnés.
    • Tous les plans de travail : exportez tous les plans de travail de votre design.

    Pour savoir comment inclure des actifs dans les spécifications techniques, voir Exportation d’actifs à partir de spécifications techniques

    Options pour l’exportation d’éléments et de plans de travail

    Remarque :

    Pour exporter plusieurs objets comme élément unique, vous devez au préalable les associer.

  2. Sélectionnez la plate-forme cible (Internet, iOS ou Android) ainsi que le format de fichier (PNG, SVG, JPG ou PDF).

    Pour plus de détails sur les options d’exportation, consultez les sections suivantes :

  3. Indiquez le répertoire dans lequel vous souhaitez enregistrer les fichiers générés.

  4. Le cas échéant, spécifiez la résolution avec laquelle les éléments ont été créés. Si vous ne savez pas, conservez la valeur par défaut, à savoir 1x.

  5. Cliquez sur Exporter.

Exportation d’éléments de design au format PNG

  1. Pour exporter des éléments de design au format PNG sur Mac, sélectionnez Fichier > Exporter. Sous Windows, cliquez sur le menu hamburger, puis sélectionnez Exporter

  2. Cliquez sur la liste déroulante à côté de l’option de format et sélectionnez PNG. XD exporte toutes les résolutions associées à l’objet concerné.

  3. Sélectionnez la plate-forme pour laquelle vous souhaitez exporter (Design, Web, iOS ou Android) et cliquez sur Exporter.

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

Design

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 en résolutions 1x et 2x.

iOS

Il existe trois formats d’exportation pour iOS. Les éléments sont exportés en 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.

Aidez-vous de l’infographie suivante pour comprendre comment se déroule l’exportation pour iOS des éléments de design créés en 1x et en 2x.

Exportation d’éléments au format PNG pour iOS
Exportation d’éléments au format PNG pour 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 %)

Aidez-vous de l’infographie suivante pour comprendre comment se déroule l’exportation pour Android des éléments de design créés avec différentes résolutions.

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

Exportation d’éléments de design au format SVG

  1. Pour exporter des éléments de design au format PNG sur Mac, sélectionnez Fichier > Exporter. Sous Windows, cliquez sur le menu hamburger, puis sélectionnez Exporter

  2. Cliquez sur la liste déroulante à côté de l’option de format et sélectionnez SVG.

  3. Définissez les options de style et enregistrez-les sous forme d’images incorporées ou liées.

    • Styles : choisissez comment les informations de style visuel sont stockées dans le balisage SVG en tant qu’Attributs de présentation ou CSS interne. Le style par défaut pour les fichiers SVG est défini sur Attributs de présentation, car cela permet de bénéficier d’une meilleure compatibilité avec les outils de développement les plus courants, tels que Android Studio.
      • 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 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.

    Enregistrer les images : vous pouvez enregistrer des images en tant qu’images incorporées ou liées.

    • Incorporer : l’image bitmap est encodée dans le fichier SVG.
    • Lien : l’image bitmap est stockée séparément avec une référence au fichier SVG. 
    Exportation d’éléments de design au format SVG
    Exportation d’éléments de design au format SVG
  4. Si vous souhaitez optimiser vos actifs, sélectionnez Optimiser la taille du fichier (réduire) sur Mac, ou Optimisé (réduit) sous Taille du fichier sur Windows.

Exportation d’éléments de design au format JPG

  1. Pour exporter des éléments de design au format PNG sur Mac, sélectionnez Fichier > Exporter. Sous Windows, cliquez sur le menu hamburger, puis sélectionnez Exporter.

  2. Cliquez sur la liste déroulante à côté de l’option de format et sélectionnez JPG.

    Exportation d’éléments de design au format JPG
    Exportation d’éléments de design au format JPG
  3. Lorsque vous exportez des actifs (tels que des photos) au format JPG, vous pouvez définir le niveau de qualité du fichier JPG. Sélectionnez l’une des options de pourcentage dans la liste déroulante Qualité, puis dans le menu Exporter pour, choisissez Design ou Web.

Exportation d’éléments de design au format PDF

  1. Pour exporter des éléments de design au format PNG sur Mac, sélectionnez Fichier > Exporter. Sous Windows, cliquez sur le menu hamburger, puis sélectionnez Exporter.

  2. Cliquez sur la liste déroulante à côté de l’option de format et sélectionnez PDF. Vous pouvez choisir une exportation sous la forme d’un fichier PDF unique ou de plusieurs PDF individuels.

    Exportation d’éléments de design au format PDF
    Exportation d’éléments de design au format PDF
  3. 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. Ils sont alors placés sur des pages distinctes, regroupées dans un seul et même PDF.

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

  4. Cliquez ensuite sur Exporter.

Utilisation de l’intégration d’outils tiers

Vous pouvez importer vos compositions dans d’autres applications qui s’intègrent à XD, à savoir : Zeplin, Avocode, Sympli (MAC uniquement), Kite Compositor ou encore ProtoPie. 

La section ci-dessous explique la procédure dans son ensemble en prenant l’exemple de XD exécuté sous Mac avec Zeplin.

Cette procédure fonctionne exactement de la même manière dans XD sous Windows.

Remarque :

Cette procédure varie légèrement en fonction de l’application utilisée. Pour en savoir plus, consultez la documentation de votre application :

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

    Exportation d’éléments vers Zeplin
    Exportation d’éléments vers Zeplin

    Remarque :

    Si vous avez plusieurs applications intégrées à XD, le raccourci clavier Exporter vers (⌥⌘E) renvoie automatiquement vers la dernière application utilisée.

  2. Dans la boîte de dialogue qui s’ouvre, cliquez sur Import (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.

    Écran Import (Importer) dans Zeplin
    Écran Import (Importer) dans Zeplin

    Les plans de travail sont importés dans Zeplin.

    Plans de travail dans Zeplin
    Plans de travail dans Zeplin

Extraction d’actifs pour des spécifications techniques

Vous pouvez marquer des calques en tant qu’éléments à exporter et les envoyer aux développeurs sous forme de lien de spécifications techniques. Les développeurs peuvent télécharger tous les éléments vectoriels aux formats SVG, PNG, PDF et les éléments bitmap aux formats PNG et PDF.

Pour en savoir plus, reportez-vous à la section Extraction d’actifs pour des spécifications techniques.

Si vous ne pouvez pas voir d’applications tierces dans l’option Fichier > Exporter, reportez-vous à la section Impossible de voir les applications tierces prises en charge dans les options d’exportation.

Si vous ne pouvez pas exporter votre fichier, reportez-vous à la section Pourquoi ne puis-je pas importer ou exporter des fichiers dans Adobe XD ?.

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