Découvrez comment importer des illustrations vectorielles comme des icônes et des designs de logo 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 actifs 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 commencer, renseignez-vous sur ces fonctionnalités dans la section dédiée aux 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 d’utilisation sans accroc avec XD et Illustrator, nous travaillons à l’amélioration des workflows d’interopérabilité. En attendant, si vous avez des suggestions ou des commentaires, faites-en part sur UserVoice.

Méthodes d’importation des actifs Illustrator vers XD

Lorsque votre conception est prête dans Illustrator, voici quelques méthodes que vous pouvez utiliser pour les intégrer dans XD.



Importation ou ouverture de conceptions Illustrator
En savoir plus
Copie de vecteurs ou d’objets SVG à partir d’Illustrator
En savoir plus
Utilisation d’actifs provenant de bibliothèques CC
En savoir plus

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 à un ensemble d’éléments visuels tout au long de votre tâche.

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 prototypes interactifs est la possibilité de partager vos conceptions et prototypes et de recueillir les commentaires des parties prenantes.
Utilisez le mode Partage dans XD pour partager vos conceptions et prototypes interactifs avec les parties prenantes, et collaborer en toute simplicité avec elles.
Invitez vos parties prenantes à collaborer et à profiter de la fonctionnalité de cocréation simultanée sur votre document, tout en conservant un historique des versions précédentes de votre projet de conception.

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

Vos conceptions partagées sont optimisées sans perte de fidélité, les commentaires de vos parties prenantes sont disponibles en temps réel et les développeurs peuvent télécharger les actifs partagés 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 l’idéal pour les concepteurs qui veulent importer des logos, des icônes ou autres pour les modifier dans leurs projets de UI/UX design » – Howard Pinsky, expert spécialiste XD chez Adobe.

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


Forum aux questions (FAQ)

Comment résoudre les problèmes de distorsion des espacements entre mes éléments qui surviennent lorsque j’augmente la taille de mes objets 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 ces distorsions, assurez-vous que l’option Redimensionnement réactif de l’inspecteur Propriétés est désactivée. 

Pourquoi les icônes de conception que j’ai exportées au format SVG depuis Illustrator 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 avons abordé les caractéristiques de base de l’utilisation des actifs de conception 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.

community

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.