Vous avez une idée d'application géniale ? Avec Adobe XD, réalisez une maquette fonctionnelle que vous pourrez présenter sur votre téléphone.

Téléchargement des wireframes :
1. Dans l'écran d'accueil d'Adobe XD, cliquez sur le lien Wireframes dans la section Kits d'interface utilisateur. Ou bien téléchargez-les ici.
2. Cliquez sur le lien Download kits sur la page de profil Behance.
3. Décompressez le fichier wires.zip et ouvrez le fichier .xd souhaité dans Adobe XD.
 
Création d'un design :
1. Sélectionnez l'outil Zoom et faites glisser le pointeur sur les plans de travail pour en agrandir les détails.
2. Activez l'outil Sélection, puis cliquez et faites glisser le pointeur pour sélectionner les éléments sur le plan de travail de votre choix. Sélectionnez Édition – Copier, puis Fichier – Nouveau ; choisissez le format de plan de travail adapté à la création d'un nouveau document XD, puis sélectionnez Édition – Coller pour coller ces éléments sur le nouveau plan de travail.
 
Conseil : vous pouvez également cliquer sur l'intitulé d'un plan de travail pour en sélectionner le contenu. Ensuite, copiez et collez-le dans un nouveau fichier.
 
3. En maintenant la touche Maj enfoncée, cliquez sur les éléments que vous jugez inutiles ; faites un clic droit et choisissez Supprimer.
 
Conseil : selon la manière dont les plans de travail ont été créés, vous devrez peut-être ouvrir le panneau Calques (Affichage – Calques), cliquer avec le bouton droit sur un groupe de calques, puis sélectionner Dissocier pour les dissocier et pouvoir sélectionner les éléments individuellement.
 
4. Réagencez au besoin les éléments restants par simple glisser-déposer.
5. Double-cliquez sur une forme, un rectangle par exemple, pour pouvoir accéder individuellement à ses différents points de contrôle. Faites glisser les points en question sur un tracé pour redéfinir la forme.
6. Créez des styles de caractères réutilisables : sélectionnez un élément de texte, appliquez-lui un style à l'aide des paramètres disponibles aux sections Texte et Apparence de l'inspecteur Propriétés. Cliquez sur l'icône + en regard de Styles de caractères dans le panneau Actifs (Affichage – Actifs) et réutilisez ce style au fil de vos créations.
7. Créez des symboles réutilisables : créez une forme ou un élément de design (regroupez des éléments au besoin). Cliquez sur l'icône + en regard de Symboles dans le panneau Actifs et réutilisez ce symbole au fil de vos créations.
8. Créez deux plans de travail supplémentaires : sélectionnez l'outil Plan de travail. Cliquez sur le format de plan de travail approprié. Effectuez cette opération à deux reprises.
9. Utilisez l'outil Sélection et faites glisser le pointeur pour sélectionner les éléments sur le premier plan de travail, cliquez sur Grille de répétition, puis faites glisser la poignée verte sur la droite pour répéter ces éléments sur tous les plans de travail. Positionnez le curseur entre les plans de travail et faites glisser les repères roses jusqu'à ce que la marge soit égale à la distance entre les plans de travail.
10. Faites glisser trois images à partir du Finder ou de l'Explorateur pour remplir les formes.
11. Faites glisser un fichier texte comprenant trois lignes pour l'en-tête afin de remplacer le texte de substitution.
12. Désélectionnez, puis resélectionnez la grille de répétition. Cliquez sur Dissocier la grille pour faire apparaître le contenu masqué sur les autres plans de travail.
 
Création d'un prototype :
1. Cliquez sur l'onglet Prototype en haut.
2. Reliez les plans de travail entre eux.
3. Cliquez sur le bouton Lecture, en haut, pour tester l'application à l'aide de la fonctionnalité d'aperçu sur ordinateur.
 
C'est tout ! Pour en savoir plus, rendez-vous sur la page Tutoriels Adobe XD.