Création d’un prototype dans Adobe XD CC | Adobe Creative Cloud

Création d’un prototype dans Adobe XD CC | Adobe Creative Cloud

Apprenez à créer un prototype dans Adobe XD.

Partez de zéro ou téléchargez les fichiers d’exemple [https://adobe.ly/2mcm6DP] pour démarrer rapidement. Suivez les étapes ci-dessous.

Créez votre prototype :

1. Ouvrez un document .xd ou utilisez le nôtre (prototype.xd).
2. Faites glisser du texte standard à partir de la catégorie Symboles du panneau Actifs (Affichage / Actifs).
3. Cliquez sur la vignette grise située sur le plan de travail, puis sur Grille de répétition. Faites glisser la poignée verte vers la droite jusqu’à obtenir trois vignettes.
4. Ouvrez le Finder (Mac) ou l’Explorateur (Windows), puis faites glisser les trois images depuis le dossier knots_details vers la grille de répétition des vignettes.
5. Cliquez sur le contour vert de la grille de répétition et faites glisser les trois vignettes sous le plan de travail.
6. Créez deux copies du plan de travail : cliquez sur le nom du plan de travail et choisissez Édition / Dupliquer. Répétez une nouvelle fois cette opération afin d’obtenir de deux copies.

Astuce : vous pouvez également utiliser la combinaison Cmd+D (Mac) ou Ctrl+D (Windows) pour dupliquer le plan de travail.

7. Dans le plan de travail le plus à gauche, cliquez sur le dégradé et choisissez Édition / Copier, puis Édition / Coller.
8. Cliquez sur Grille de répétition et faites glisser la poignée verte pour créer trois copies du rectangle. Placez votre curseur dans une marge et faites glisser la souris pour créer des marges de 70 px.
9. Faites glisser les trois images du dossier knots_full vers la grille de répétition, puis cliquez sur la table de montage (zone grise) pour désactiver la grille de répétition.
10. Cliquez sur la grille de répétition pour la réactiver, faites un clic droit, sélectionnez Dissocier la grille, puis choisissez Objet / Disposition / Arrière-plan.
11. Cliquez sur le nom du produit en maintenant la touche Cmd (Mac) ou Ctrl (Windows) enfoncée, puis double-cliquez sur le texte pour le mettre en surbrillance et saisissez « Mustard floor cushion ».
12. Faites un clic droit sur le bord extérieur de la zone de texte et sélectionnez Mettre à jour tous les symboles. Dans le deuxième plan de travail, double-cliquez sur le texte et remplacez « Mustard » par « Royal Blue ». Dans le troisième plan de travail, remplacez le texte par « Red Wine ».

Créez les interactions de votre prototype :

1. En haut de l’interface, cliquez sur Prototype, puis en maintenant la touche Cmd ou Ctrl enfoncée, cliquez sur la vignette située à gauche. Faites glisser la petite flèche blanche vers le premier plan de travail et définissez la transition à Aucun. Répétez la procédure pour relier les vignettes bleue et rouge aux plans de travail correspondants.
2. Cliquez sur le jeu des trois vignettes et sélectionnez Édition / Couper.
3. Cliquez sur le titre du premier plan de travail et choisissez Édition / Coller. Procédez de la même manière pour les deux autres plans de travail. En maintenant la touche Maj. enfoncée, cliquez sur les trois vignettes et faites-les glisser de manière à les aligner juste en dessous de la grande image dans les plans de travail.
4. Cliquez sur Aperçu sur ordinateur, puis sur chaque vignette afin de prévisualiser le prototype.

Et voilà, le tour est joué !

Pour en savoir plus, rendez-vous sur la page Tutoriels Adobe XD CC : https://helpx.adobe.com/fr/xd/tutorials.html

2 réponses
  1. Tib Creations
    Tib Creations dit :

    Merci pour ce tutoriel rapide ! D’ailleurs j’ai reconnu la musique c’est "Innovating" de Premiumbeat elle est superbe. 😁

    Répondre

Répondre

Se joindre à la discussion ?
Vous êtes libre de contribuer !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *