Utilisation de ressources Illustrator dans Adobe XD

Dernière mise à jour le 6 juin 2023

Découvrez comment importer des illustrations vectorielles, telles que des icônes ou des logos, depuis Illustrator vers Adobe XD.

Adobe XD offre une compatibilité avec Illustrator qui vous permet d’importer des illustrations vectorielles de haute fidélité comme des logos, des icônes ou tout autre élément susceptible d’être utilisé dans des conceptions XD. L’illustration importée reste modifiable dans XD, ce qui vous permet de réduire le temps nécessaire à la création des prototypes.

Lisez ce qui suit pour découvrir les nombreuses méthodes qui existent pour importer des ressources Illustrator vers XD, ainsi que les bonnes pratiques et restrictions liées à ces workflows.

travail avec xd et illustrator

Avant de commencer

Bien que certaines fonctionnalités d’Illustrator et XD soient complémentaires et permettent de conserver les effets et les calques originaux, elles n’offrent pas toutes une correspondance un à un.Avant de procéder, lisez la suite pour en savoir plus à partir de Fonctionnalités Illustrator prises en charge.

Voici quelques-unes des restrictions supplémentaires qui s’appliquent lors de l’utilisation des fichiers Illustrator dans XD :

  • Vous ne pouvez pas copier et coller un plan de travail Illustrator dans XD.
  • Lorsque vous travaillez avec des éléments de texte, XD ne conserve pas les dimensions horizontales affectées à la zone de texte.
  • Vous ne pouvez pas remplir de grille de répétition avec des vecteurs.

Afin de vous garantir une expérience optimale avec XD et Illustrator, nous mettons tout en œuvre pour améliorer les workflows d’interopérabilité. En attendant, si vous avez des suggestions ou des commentaires, faites-en part sur UserVoice.

Méthodes d’importation des ressources Illustrator vers XD

Lorsque votre conception est prête dans Illustrator, voici quelques méthodes possibles pour l’importer dans XD.  



Ouverture ou importation de conceptions Illustrator

 

En savoir plus

Copie de vecteurs ou de fichiers SVG depuis Illustrator

En savoir plus

Utilisation de ressources à partir des bibliothèques CC

 

En savoir plus

Avec XD 57, Adobe a amélioré la fonctionnalité de gestion des couleurs dans XD. Vous obtenez des couleurs cohérentes lorsque vous copiez un asset avec un profil colorimétrique sRGB d'Illustrator dans un document XD avec un profil colorimétrique sRGB.Si le document XD a un profil de couleur Non géré, l’application affiche un message vous invitant à basculer vers le profil de couleur sRVB.

Prototypage de plans de travail importés

Une fois les conceptions Illustrator importées dans XD, voyons comment les utiliser pour créer un prototype.


Lorsque vous travaillez avec Illustrator, vous pouvez créer des plans de travail XD en ouvrant des plans de travail Illustrator directement dans XD. Les plans de travail Illustrator sont importés directement au format des plans de travail de XD. 

Vous pouvez également passer d’une application à l’autre pour apporter des petites retouches aux divers éléments visuels tout au long du projet.

Vous cherchez à améliorer vos conceptions XD ? Utilisez des fonctionnalités spécifiques à XD comme les grilles de répétition, les états, l’animation automatique et le prototypage vocal.

Partage et collaboration avec XD

Votre prototype est-il prêt pour le partage ?


L'un des principaux avantages de l'utilisation d'Adobe XD pour concevoir et créer des prototype interactifs est la possibilité de partager vos designs et prototype et d'obtenir des feedback des parties prenantes.
Utilisez le mode Partager dans XD pour partager vos designs et prototype interactifs avec les parties prenantes et collaborez de manière transparente avec elles.
Invitez vos parties prenantes à collaborer et à coéditer simultanément votre document, tout en conservant un historique des versions de votre projet de design !

Vous vous demandez si la résolution de la conception sera affectée après le partage depuis XD ? La réponse est non.

Avec XD 57 et versions ultérieures, vous pouvez proposer un rendu de couleurs cohérent à tous les collaborateurs concernés. Pour cela, changez le profil de couleur du document pour sRVB. Si vous essayez de partager des plans de travail sélectionnés à 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 pour vos collaborateurs. Pour en savoir plus, reportez-vous à la section Gestion des couleurs.

Vos conceptions partagées sont optimisées sans perte de fidélité, les commentaires de vos collaborateurs sont disponibles en temps réel et les développeurs peuvent télécharger les ressources partagées et les spécifications techniques pour le codage.

Vidéo : Comment importer des conceptions depuis Illustrator ?

« De la même manière que vous pouvez importer des fichiers Photoshop directement dans Adobe XD, vous pouvez importer vos fichiers depuis Illustrator. C'est parfait pour les designers qui souhaitent intégrer des logos, des icônes ou tout autre élément à utiliser dans leurs projets d'UI ou d'UX » — Howard Pinsky, spécialiste senior XD. 

Pour en savoir plus sur l’importation des conceptions Illustrator dans XD, regardez cette vidéo de 2 minutes.

Foire aux questions (FAQ)

Comment puis-je corriger les problèmes d'espacement déformés entre les éléments lorsque j'augmente la taille de mes SVG ? 

Les problèmes de distorsion se produisent lorsque XD considère les objets SVG liés qui ont été importés ou collés comme des objets distincts. Pour éviter la distorsion, assurez-vous que l'option Redimensionnement réactif dans l'Inspecteur de propriétés est définie sur DÉSACTIVÉ. 

Pourquoi mes icônes de design exportées d'Illustrator vers SVG semblent-elles déformées dans XD ?

Certaines fonctions d’Illustrator ne sont pas compatibles avec XD et sont transférées en tant que vecteurs, voire ne sont pas transférées du tout. Les capacités du format SVG sont limitées par rapport à celles d’Illustrator, et il leur est impossible de rendre certaines fonctionnalités comme les dégradés de forme libre. Pour plus d’informations sur les éléments Illustrator pris en charge dans XD, reportez-vous à la section dédiée aux éléments Illustrator pris en charge.

Et après ?

Nous vous avons expliqué comment utiliser des ressources de design Illustrator. Passez à l’étape suivante et apprenez à créer des prototypes interactifs ainsi qu’à les partager avec des designers ou des parties prenantes pour recueillir des commentaires.

Vous souhaitez donner votre avis ? Nous sommes tout ouïe.

Questions à la communauté

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.