Utilisation de ressources Illustrator dans 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.

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.

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 que vous pouvez utiliser pour les intégrer dans XD.

Avec XD 57 et versions ultérieures, lorsque vous copiez une ressource associée à un profil de couleur sRVB d’Illustrator vers un document XD, lui aussi doté d’un profil sRVB, vous obtenez des couleurs cohérentes. 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.

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 ?

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

Foire aux questions (FAQ)

Comment résoudre les problèmes de distorsion des espacements entre é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 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.