Guide d'utilisation Annuler

Prise en main des plans de travail dans Adobe XD

Découvrez comment utiliser des plans de travail pour créer vos projets de conception dans XD.

Voici Jeanee, une graphiste choisie pour diriger un projet en UX design. Elle présente Adobe XD à son équipe, dont les membres ont des niveaux d’expertise variés en termes de conception et d’outils UX.

 
  • Elle cherche des ressources qui pourraient l’aider à démarrer le projet rapidement.

 

  • Elle a besoin de tutoriels pour commencer et de fichiers d’exemple pour apprendre à la volée.

Jeanee étudie les terminologies de base de la conception et travaille avec des plans de travail pour créer son premier prototype dans XD. Lisez ce qui suit pour savoir comment nous pouvons l’aider à commencer.

Avant de commencer

Configuration des plans de travail en 4 étapes simples

Qu’est-ce qu’un plan de travail ? Les plans de travail désignent les écrans de votre application ou les pages de votre site web. Ils simplifient les processus de conception et créent des conceptions interactives pour plusieurs tailles d’écran dans un seul document. Utilisez des plans de travail pour créer votre projet XD.

Lisez ce qui suit pour savoir comment configurer vos plans de travail.

Créer un nouveau plan de travail

Adobe XD fournit des plans de travail pour les tailles d’écran les plus utilisées, telles que celles des différentes versions d’iPhone, d’iPad et de navigateurs web. Vous pouvez créer un plan de travail personnalisé si les choix ne répondent pas à vos exigences.

Écran d’accueil

Utilisez les tailles de plan de travail prédéfinies ou créez votre plan de travail personnalisé.

Plans de travail personnalisés

Application XD

Utilisez l’outil Plan de travail  pour créer des plans de travail supplémentaires. 

Propriétés du plan de travail

Sélectionnez un plan de travail prédéfini dans l’inspecteur Propriétés ou faites glisser le curseur sur la zone de travail pour créer un plan de travail personnalisé.

Utiliser un plan de travail existant à partir de Photoshop et Illustrator

Vous pouvez importer des plans de travail existants à partir de Photoshop ou Illustrator dans XD sans avoir à les recréer. 

Utiliser un plan de travail existant à partir de Photoshop et Illustrator

Utilisez Fichier > Importer à partir de XD pour ouvrir les plans de travail Photoshop ou Illustrator dans XD tout en gardant tous les plans de travail et calques intacts et modifiables

Avec XD 57 et versions ultérieures, lorsque vous utilisez une ressource existante associée à un profil de couleur sRVB de Photoshop ou 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.

Gérer les plans de travail

Vous avez changé d’avis sur la taille du plan de travail ? Redimensionnez-les. Vous pouvez également les renommer en fonction des besoins de votre conception. Vous souhaitez créer davantage de plans de travail et gérer leur emplacement ? Dupliquez et réorganisez-les.

Renommer

Réorganiser

Double-cliquez sur le titre du plan de travail.

Redimensionner

Redimensionner

Faites glisser la poignée circulaire qui s’affiche sur les bords d’un plan de travail.

Dupliquer

Copier et coller des plans de travail

Sélectionnez le plan de travail et appuyez sur Ctrl/Cmd + D.

Aligner et répartir

Aligner et répartir

Sélectionnez plusieurs plans de travail, puis cliquez sur Aligner et répartir dans l’inspecteur Propriétés. Faites glisser le plan de travail pour le réorganiser.

Appliquer les grilles de mise en page ou les grilles quadrillées

Vous souhaitez définir la structure sous-jacente du contenu de votre conception ajouté dans les plans de travail ? Appliquez des grilles de mise en page. Vous souhaitez savoir comment mesurer rapidement et aligner le contenu de votre conception lors de la disposition d’objets ou de texte sur vos plans de travail ? Utilisez des Grilles quadrillées.

Grilles de mise en page

Grilles de mise en page

Sélectionnez un ou plusieurs plans de travail, puis dans la section Grille de l’Inspecteur Propriétés, choisissez Mise en page.

Grilles rectangulaires

Grilles de mise en page

Sélectionnez un ou plusieurs plans de travail et, dans la section Grille de l’Inspecteur Propriétés, choisissez Quadrillée.

Conception des plans de travail

Maintenant que vous avez créé votre premier plan de travail, apprenez à ajouter des éléments visuels et textuels, à modifier l’arrière-plan et à créer des effets de défilement.

Ajout d’éléments visuels et textuels

Création de plans de travail défilants

Ajout d’éléments visuels et textuels

Maintenant que votre plan de travail de base est en place, vous pouvez créer ou modifier la couleur d’arrière-plan, ajouter des graphismes et créer ou mettre en forme des styles de texte dans des ressources réutilisables. Vous souhaitez créer une grille modifiable d’éléments répétés ? Utilisez des grilles de répétition.

Ajout d’éléments visuels et textuels

Ajout d’éléments

Utilisez les outils de Dessin pour créer des éléments personnalisés ou sélectionnez Fichier > Importer pour importer des éléments existants, tels que des images et des icônes, à partir du dossier de votre appareil. Utilisez les outils Texte pour créer, formater et capturer des styles de texte dans des ressources réutilisables. 

Pour modifier la couleur d’arrière-plan du plan de travail, dans l’Inspecteur Propriétés, sélectionnez Remplir et appliquez la couleur dans le sélecteur de couleurs.

Création d’éléments répétables

Répéter les éléments

Utilisez les grilles de répétition pour créer des objets avec des éléments répétables, tels que des listes et des mises en page de cartes.

Création de plans de travail défilants

Vous souhaitez ajouter des effets de défilement vertical et horizontal à votre conception ? Utilisez des groupes de défilement pour prototyper une fenêtre de contenu.

Vous souhaitez atteindre une simulation réaliste de défilement sur les ordinateurs de bureau et les appareils mobiles ? Définissez la position fixe d’un élément sur le plan de travail afin d’autres éléments puissent défiler en dessous. 

Défilement vertical

Ligne pointillée et contenu défilant

Pour étendre le plan de travail au-delà de la hauteur de la fenêtre d’affichage, utilisez le marqueur. Le marqueur indique la position jusqu’à laquelle vous devez faire défiler pour accéder au contenu.

Position fixe lors du défilement

Ligne pointillée et contenu défilant

Pour épingler les éléments de conception à une position fixe, sélectionnez Position fixe lors du défilement dans l’inspecteur Propriétés

La conception finale

Maintenant que vous en savez assez sur les plans de travail, vous pouvez vous amuser avec ce que vous avez appris jusqu’à présent et créer des plans de travail plus incroyables encore pour vos projets de conception.

Sous réserve de modification

Continuez et téléchargez la conception finale pour avoir un aperçu de votre projet de conception.

En savoir plus

Voici une vidéo d’exemple de 4 minutes pour commencer. Vous pouvez également télécharger les fichiers d’exemple pour les tester parallèlement aux vidéos

Fichiers d’exemple

Conseils et astuces

Maintenant que vous avez les bases des plans de travail dans XD, voici quelques conseils et astuces pratiques :

  • Pour mesurer la distance entre un objet et les bords d’un plan de travail, cliquez sur l’objet et appuyez sur les touches Option (sous macOS) ou Alt (sous Windows).
  • Pour désactiver l’option de défilement dans un plan de travail, sélectionnez le plan de travail et, dans l’inspecteur Propriétés, remplacez Défilement par Aucun.

Pour plus de conseils professionnels sur l’utilisation des plans de travail, suivez @Elainecchao, Chef de produit XD sur Twitter.


Et après ?

Nous vous avons expliqué comment créer, gérer et partager vos plans de travail. Passez à l’étape suivante et découvrez comment créer des repères de plan de travail personnalisés et positionner votre plan de travail à l’aide de grilles.

Vous avez une question ou une suggestion ?

Questions à la communauté

Si vous avez une question à poser ou une idée à partager, rejoignez la communauté Adobe XD. Nous serions ravis de vous compter parmi nous et de découvrir vos créations.

Recevez de l’aide plus rapidement et plus facilement

Nouvel utilisateur ?