Comment utiliser les kits d'interface utilisateur dans adobe xd

Pour les personnes intéressées par la conception Web, les kits d'interface utilisateur d'Adobe XD constituent un excellent moyen de lancer 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 sur le logiciel et que vous ne savez pas comment utiliser les kits d'interface utilisateur dans Adobe XD, vous êtes au bon endroit., Je vais vous montrer comment installer des kits d’interface utilisateur dans le logiciel, puis utiliser les ressources fournies pour votre projet.

Aussi sur Tech de guidage

Comment convertir par lots des photos avec Adobe Bridge

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

Tout d’abord, voyons comment télécharger des kits d’interface utilisateur dans Adobe XD, directement à partir du logiciel. Il suffit de suivre ces étapes pour commencer:

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

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

Pour cet article, je choisirai le kit d'interface utilisateur Google Material. Toutefois, 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: Recherchez le kit d’interface utilisateur Adobe XD dans 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 un ensemble de planches d’art contenant des ressources d’interface utilisateur pour la plate-forme correspondante vous sera accueilli.

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 télécharger Wireframes à la place, vous pouvez cliquer sur l’option Wireframes dans le menu Get UI Kits.

Vous pouvez également rechercher d'autres kits d'interface utilisateur 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 de très bonnes options, notamment ce kit Movie Magic UI vraiment génial qui ressemble à un affichage tête haute.

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

Comment utiliser les kits d'interface utilisateur dans Adobe XD

Pour utiliser les kits d’interface utilisateur dans votre projet, suivez 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 d'interface utilisateur à l'aide du raccourci Ctrl + V.

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

Étape 5: Pour supprimer les guides, cliquez sur l'icône de cadenas 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. Encore une fois, cliquez 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 je vais utiliser l'un des dialogues.

Étape 7: Collez le nouvel élément sur l’élément précédent, puis alignez-le conformément aux guides.

Étape 8: Maintenant, pour éditer chaque élément du pain grillé, double-cliquez sur la zone de texte, puis entrez le texte que vous souhaitez utiliser. Tout d'abord, changeons le titre du pain grillé.

Ensuite, modifiez le contenu du corps en double-cliquant sur la zone de texte et en saisissant 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é avec l'édition du texte, vous pouvez changer la couleur et l'opacité du texte. Pour changer l'opacité, il suffit de déplacer le curseur sous l'option Opacité dans la barre d'outils à droite.

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

Et ce n'est pas seulement le texte que vous pouvez éditer 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, sauvegardez simplement votre fichier en cliquant sur l’option Enregistrer sous du menu ou en utilisant le raccourci Maj + Ctrl + S.

Aussi sur Tech de guidage

#conception graphique

Cliquez ici pour voir notre page d'articles de graphisme

Perfectionnez votre conception en utilisant des kits d'interface utilisateur

Maintenant que vous savez télécharger et utiliser les kits d'interface utilisateur dans Adobe XD, je suis sûr que vous allez commencer à créer des designs incroyables en un rien de temps. Ces kits d’interface utilisateur sont certainement très utiles et vous permettent d’entrer directement dans 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 le prochain article pour un tutoriel pas à pas.