Guide d'utilisation Annuler

Exportation de ressources de design

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

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

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

Sélection de ressources et de plans de travail pour l’exportation

macOS

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 design.
  • 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 que ressources dans les spécifications techniques. Pour sélectionner des ressources à exporter, sélectionnez un calque sur la zone de travail et utilisez l’une des options suivantes : 

  • Faites un clic droit 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 de ressources vers différents formats de fichiers

Les ressources sont des fichiers de conception dont ont besoin les développeurs pour recréer vos designs à 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 ressources les plus courantes sont les images bitmap, les icônes et les motifs d’arrière-plan que vous pouvez exporter aux formats suivants : PNG, SVG, PDF et JPG

Avec XD 57 et versions ultérieures, vous pouvez exporter des ressources JPG, PNG et PDF avec des rendus de couleurs cohérents. Pour cela, changez le profil de couleur du document pour sRVB. Si vous essayez d’exporter une ressource à partir d’un document ayant un profil de couleurs non géré, vous recevez un message qui vous informe d’une éventuelle différence au niveau du rendu des couleurs dans la ressource exportée. Pour en savoir plus, reportez-vous à la section Gestion des couleurs.

Exporter en PNG

Choisissez une taille d’exportation commune ou spécifique à une plateforme, ou définissez une taille d’exportation personnalisée :

  • Taille d’exportation prédéfinie ou personnalisée - Choisissez l’une des tailles d’exportation prédéfinies : 0,5x, 1x, 1,5x, 2x, 3x, 4x. Vous pouvez également saisir des tailles d’exportation personnalisées de 0,1x à 10x.
  • Web : les ressources sont exportées avec des résolutions 1x et 2x.
  • iOS : les ressources sont exportées avec des résolutions 1x, 2x et 3x.
  • Android : les ressources de design sont optimisées et exportées 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 %)

Exporter en SVG

Lorsque vous exportez des objets ou des plans de travail au format SVG, vous pouvez définir les options suivantes :

Style visuel :

  • 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 ressources 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.

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

Exporter en PDF

Vous pouvez exporter des ressources au format PDF via l’une des méthodes suivantes :

  • Fichier PDF unique : vous pouvez sélectionner plusieurs plans de travail ou ressources et les exporter sous la forme d’un fichier PDF unique. 
  • Plusieurs fichiers PDF : vous pouvez sélectionner plusieurs plans de travail ou ressources et les exporter sous la forme de plusieurs PDF individuels. Un fichier PDF distinct est alors créé pour chaque ressource ou plan de travail sélectionné.

Exporter en JPG

Lorsque vous exportez des ressources au format JPG, vous pouvez définir les options suivantes :

Qualité : choisissez 20 %, 40 %, 60 %, 80 % ou 100 %.

Taille d’exportation :

  • Taille d’exportation prédéfinie ou personnalisée - Choisissez l’une des tailles d’exportation prédéfinies : 0,5x, 1x, 1,5x, 2x, 3x, 4x. Vous pouvez également saisir des tailles d’exportation personnalisées de 0,1x à 10x.
  • Web : les ressources sont exportées avec des résolutions 1x et 2x.

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

Exportation de ressources vers des applications tierces

Vous pouvez également importer vos designs à partir de XD dans d’autres applications, à savoir : Zeplin, Avocode, Sympli, Kite Compositor ou encore ProtoPie

Voici un exemple de flux de travaux de XD sur macOS avec Zeplin :

  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 de ressources vers Zeplin
    Exportation de ressources 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 travaillez avec Zeplin dans XD, consultez la section Impossible de voir les applications tierces prises en charge dans les options d’exportation pour tenter de trouver une solution.

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 de ressources ? Pour résoudre les problèmes liés à l’exportation, consultez la section Pourquoi ne puis-je pas importer ou exporter des fichiers dans Adobe XD ?

Vous avez une question ou une suggestion ?

Questions à la communauté

Souhaitez-vous que votre outil de design 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.

Recevez de l’aide plus rapidement et plus facilement

Nouvel utilisateur ?