Comment utiliser les kits dinterface utilisateur dans Adobe XD

Pour ceux qui s'intéressent à la conception Web, les kits d'interface utilisateur dans Adobe XD sont un excellent moyen de démarrer un nouveau projet de conception. Avec ces kits, vous avez accès à des ressources pratiques que vous pouvez modifier et utiliser pour la conception de votre site Web ou de votre application.

Si vous êtes nouveau dans le logiciel et que vous ne savez pas comment utiliser les kits d'interface utilisateur dans Adobe XD, vous êtes au bon endroit. Dans cet article, je vais vous montrer comment vous pouvez installer des kits d'interface utilisateur dans le logiciel, puis utiliser les ressources incluses pour votre projet.

Comment télécharger des kits d'interface utilisateur dans Adobe XD

Voyons d'abord comment vous pouvez télécharger des kits d'interface utilisateur dans Adobe XD, directement depuis le logiciel. Suivez simplement ces étapes pour commencer :

Étape 1 : Cliquez sur le bouton du menu hamburger dans le coin supérieur gauche du logiciel.

Étape 2 : Dans le menu, faites défiler jusqu'à l'option Obtenir des kits d'interface utilisateur, puis cliquez sur l'une des trois options disponibles.

Pour cet article, je choisirai le kit Google Material UI. Cependant, selon votre projet, vous pouvez sélectionner les kits Apple iOS ou Microsoft Windows. Cela ouvrira une page Web officielle à partir de laquelle vous pourrez télécharger gratuitement les kits d'interface utilisateur.

Étape 3 : Localisez le kit d'interface utilisateur Adobe XD sur la page Web suivante et téléchargez-le sur votre système.

Étape 4 : Ouvrez maintenant le fichier téléchargé dans Adobe XD et vous serez accueilli avec un tas de plans de travail contenant des ressources d'interface utilisateur pour la plate-forme respective.

Vous pouvez maintenir le bouton Ctrl enfoncé et déplacer la molette de défilement pour effectuer un zoom avant/arrière afin de voir tous les plans de travail individuels.

Si vous souhaitez plutôt télécharger Wireframes, vous pouvez cliquer sur l'option Wireframes dans le menu Get UI Kits.

Vous pouvez également rechercher des kits d'interface utilisateur supplémentaires sur le site Web d'Adobe en cliquant sur l'option Plus de kits d'interface utilisateur dans le menu Obtenir des kits d'interface utilisateur.

Le site Web propose d'excellentes options, y compris ce kit d'interface utilisateur Movie Magic vraiment cool qui ressemble à un affichage tête haute.

Maintenant que vous savez comment télécharger des kits d'interface utilisateur, voyons comment vous pouvez les utiliser dans vos projets.

Comment utiliser les kits d'interface utilisateur dans Adobe XD

Pour utiliser des kits d'interface utilisateur dans votre projet, suivez simplement ces étapes simples :

Étape 1 : Zoomez sur l'élément d'interface utilisateur que vous souhaitez utiliser dans votre projet et cliquez sur son titre pour le sélectionner.

Étape 2 : Copiez maintenant l'élément à l'aide du raccourci Ctrl+C.

Étape 3 : Ouvrez ensuite un nouveau projet Adobe XD à partir du menu.

Étape 4 : Ici, collez l'élément de l'interface utilisateur à l'aide du raccourci Ctrl+V.

Pour cet article, j'utiliserai l'élément Mobile Dark du kit Google Material UI. L'élément comprend des guides pour vous aider à placer plus de calques , mais si vous ne souhaitez pas les utiliser, vous pouvez facilement les supprimer en suivant l'étape suivante.

Étape 5 : Pour supprimer des guides, cliquez sur l'icône de verrouillage dans le coin supérieur gauche, puis appuyez sur supprimer. Vous pouvez ignorer cette étape si vous souhaitez utiliser les guides pour placer plus d'objets dans l'élément avec précision.

Étape 6 : Revenez maintenant au kit d'interface utilisateur pour sélectionner un autre élément à ajouter à cette page. Cliquez à nouveau sur le titre de l'élément et copiez-le à l'aide du raccourci Ctrl+C.

Je vais créer un toast de base pour cet article pour lequel j'utiliserai l'une des boîtes de dialogue.

Étape 7 : Collez le nouvel élément sur l'élément précédent, puis alignez-le selon les guides.

Étape 8 : Maintenant, pour modifier chaque élément du toast, double-cliquez sur la zone de texte, puis saisissez le texte que vous souhaitez utiliser. Commençons par changer le titre du toast.

Ensuite, modifiez le contenu du corps en double-cliquant sur la zone de texte et en tapant ce que vous souhaitez ajouter.

Vous pouvez également modifier le texte des boutons de la même manière. Une fois que vous avez terminé de modifier le texte, vous pouvez modifier la couleur et l'opacité du texte. Pour modifier l'opacité, déplacez simplement le curseur sous l'option Opacité dans la barre d'outils vers la droite.

Pour changer la couleur du texte, cliquez sur le rectangle à côté de l'option Remplir, puis sélectionnez une nouvelle couleur dans le sélecteur de couleurs.

Et ce n'est pas seulement le texte que vous pouvez modifier de cette manière. Vous pouvez également modifier la couleur et l'opacité de presque tous les éléments de la boîte de dialogue, ce qui est idéal si vous optez pour un jeu de couleurs unique.

Une fois que vous êtes satisfait du résultat, continuez et enregistrez votre fichier en cliquant sur l'option Enregistrer sous dans le menu ou en utilisant le raccourci Maj + Ctrl + S.

Perfectionnez votre conception à l'aide de kits d'interface utilisateur

Maintenant que vous savez comment télécharger et utiliser des kits d'interface utilisateur dans Adobe XD, je suis sûr que vous commencerez à créer des designs incroyables en un rien de temps. Ces kits d'interface utilisateur sont vraiment très pratiques et vous aident à accéder directement à votre projet sans vous soucier de la conception de chaque élément de l'interface utilisateur.

Prochaine étape : Vous avez terminé un projet sur Adobe XD et vous ne savez pas comment l'exporter au format HTML ? Consultez l'article suivant pour un tutoriel simple étape par étape.