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. Depuis XD, vous pouvez exporter des éléments de design 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.

Exporter des éléments ou des plans de travail

  1. Pour exporter tous les plans de travail : 

    Vérifiez qu’aucun plan de travail ni élément n’est sélectionné. Vous pouvez cliquer sur la table de montage (zone grise autour des plans de travail) pour désélectionner des objets ou des plans de travail.

    Pour exporter des éléments ou des plans de travail spécifiques :

    Vous pouvez sélectionner l’élément ou le plan de travail que vous souhaitez exporter. Pour sélectionner un plan de travail, cliquez sur son titre (Cmd/Ctrl + clic). Vous pouvez également ouvrir le panneau Calques et sélectionner les plans de travail que vous souhaitez exporter. 

    Vous avez aussi la possibilité de marquer des éléments ou des plans de travail pour les exporter plus tard, puis procéder à une exportation par lot vers l’un des formats pris en charge par XD. Afin de marquer des éléments pour exportation, ouvrez le panneau Calques et cliquez sur l’icône Sélectionner pour l’exportation par lots . Vous pouvez également faire un clic droit sur un élément dans le panneau Calques et cliquer sur Sélectionner pour l’exportation par lots.

    Remarque :

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

  2. Sous Mac, cliquez sur 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 : pour exporter tous les plans de travail de votre projet, choisissez Tous les plans de travail.
    Options pour l’exportation d’éléments et de plans de travail
  3. 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 :

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

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

  6. Cliquez sur Exporter.

Exporter au format PNG

Lorsque vous effectuez une exportation au format PNG, XD exporte toutes les résolutions associées à l’objet concerné. Pour obtenir une taille d’exportation correcte, sélectionnez le format de conception initial.

Par exemple, si vous avez conçu l’objet en 1x, un rectangle de 10 x 10 est exporté en 10 x 10 px, 20 x 20 px et 30 x 30 px. Si la résolution d’origine était de 2x, un rectangle de 10 x 10 est exporté en 5 x 5 px et 15 x 15 px. 

Lorsque vous exportez des éléments au format PNG, vous devez également choisir la plate-forme cible : Design, Web, iOS ou 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 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

Exporter au format SVG

Lorsque vous exportez des éléments au format SVG, vous pouvez choisir une exportation avec images intégrées ou liées.

Options pour une exportation au format SVG
Options pour une exportation au format SVG

Intégrer

Dans le cas d’une exportation en tant qu’image intégrée, l’image bitmap est codée dans le fichier SVG.

Lien

Dans le cas d’une exportation en tant qu’image liée, l’image bitmap est stockée séparément et référencée dans le fichier SVG. 

Optimisé (réduit)

Pour optimiser vos éléments, sélectionnez l’option Optimisé (Réduit).

Exporter au format JPG

Lorsque vous exportez des actifs (tels que des photos) au format JPG, vous pouvez définir le niveau de qualité du fichier JPG exporté en fonction de vos besoins. Sélectionnez l’une des options de pourcentage dans la liste déroulante Qualité, accédez au dossier de destination, puis cliquez sur Exporter.

Options pour une exportation au format JPG
Options pour une exportation au format JPG

Exporter au format PDF

Lorsque vous exportez des éléments au format PDF, vous pouvez choisir une exportation sous la forme d’un fichier PDF unique ou de plusieurs PDF individuels.

Options pour une exportation au format PDF
Options pour une exportation au format PDF

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.

Plusieurs fichiers PDF

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

Intégration de logiciels 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. 

Cette section 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 gagner du temps en permettant aux développeurs d’extraire et de télécharger des actifs à partir des spécifications techniques. Utilisez cette fonctionnalité pour marquer des calques en tant qu’éléments à exporter et les envoyer 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.

Vous ne voyez pas les options d’exportation dans XD ?

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.

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