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.
Dernière mise à jour le
- Guide de l’utilisateur d’Adobe XD
- Introduction
- Nouveautés d’Adobe XD
- Questions fréquentes
- Design, création de prototypes et partage avec Adobe XD
- Gestion des couleurs
- Configuration requise
- Notions de base concernant l’espace de travail
- Changement de langue dans l’application Adobe XD
- Accès aux kits de conception d’interface utilisateur
- Accessibilité dans Adobe XD
- Raccourcis clavier
- Conseils et astuces
- Conception
- Plans de travail, repères et calques
- Formes, objets et chemins
- Sélection, redimensionnement et rotation d’objets
- Déplacement, alignement, répartition et disposition d’objets
- Regroupement, verrouillage, duplication, copie et retournement d’objets
- Application d’un contour, d’un fond ou d’une ombre portée à un objet
- Création d’éléments répétés
- Création de designs en perspective avec des transformations 3D
- Modification d’objets à l’aide d’opérations booléennes
- Texte et polices
- Composants et états
- Masquage et effets
- Mise en page
- Vidéos et animations Lottie
- Prototypage
- Création de prototypes interactifs
- Animation des prototypes
- Propriétés d’objet prises en charge pour l’animation automatique
- Création de prototypes avec clavier et manette de jeu
- Création de prototypes à l’aide de la lecture et des commandes vocales
- Création de transitions temporisées
- Ajouter des incrustations
- Conception de prototypes de voix
- Création de liens d’ancrage
- Création d’hyperliens
- Aperçu de designs et de prototypes
- Partage, exportation et révision
- Partage des plans de travail sélectionnés
- Partage de conceptions et de prototypes
- Définition des autorisations d’accès pour les liens
- Utilisation de prototypes
- Révision de prototypes
- Utilisation des spécifications techniques
- Partage de spécifications techniques
- Inspection de spécifications techniques
- Navigation dans les spécifications techniques
- Révision des spécifications techniques et commentaires
- Exportation de ressources de design
- Exportation et téléchargement de fichiers à partir de spécifications techniques
- Partage de groupe pour les entreprises
- Sauvegarde et transfert de ressources XD
- Chartes graphiques
- Chartes graphiques et bibliothèques Creative Cloud
- Utilisation de ressources de document dans Adobe XD
- Utilisation des bibliothèques Creative Cloud dans Adobe XD
- Migration de ressources liées vers les bibliothèques Creative Cloud
- Utilisation des jetons de conception
- Utilisation de ressources provenant de bibliothèques Creative Cloud
- Documents en ligne
- Intégrations et plug-ins
- Utilisation de ressources externes
- Utilisation de ressources de design provenant de Photoshop
- Copier-coller de ressources depuis Photoshop
- Importation ou ouverture de conceptions Photoshop
- Utilisation des fichiers Illustrator dans Adobe XD
- Ouverture et importation de conceptions Illustrator
- Copie de vecteurs d’Illustrator vers XD
- Plug-ins pour Adobe XD
- Création et gestion des plug-ins
- Intégration Jira pour XD
- Plug-in Slack pour XD
- Plug-in Zoom pour XD
- Publication de designs depuis XD vers Behance
- XD pour iOS et Android
- Résolution des problèmes
- Problèmes connus et résolus
- Installation et mises à jour
- Lancement et blocage
- XD se bloque au lancement sur Windows 10
- XD se ferme lorsque vous vous déconnectez de Creative Cloud
- Problème lié à l’état d’un abonnement sur Windows
- Avertissement d’application bloquée lors du lancement de XD sur Windows
- Génération du fichier de vidage sur Windows
- Collecte et partage de journaux d’incidents
- Documents en ligne et bibliothèques Creative Cloud
- Prototype, publication et révision
- Impossible d’enregistrer les interactions de prototypes sur macOS Catalina
- Problèmes liés aux workflows de publication
- Les liens publiés n’apparaissent pas dans les navigateurs
- Les prototypes ne s’affichent pas correctement dans les navigateurs
- Le panneau de commentaires s’affiche soudainement sur les liens partagés
- Impossible de publier des bibliothèques
- Importation, exportation et utilisation d’autres applications
Découvrez comment utiliser un remplissage fixe pour créer facilement des mises en page prenant en compte le contenu, notamment des boutons, des listes déroulantes, des info-bulles et des boîtes de dialogue modales.
Adobe XD vous permet de définir des valeurs de remplissage fixe sur des groupes ou des composants avec états, et de mettre automatiquement à l’échelle l’arrière-plan lors de l’apport de modifications au contenu.
Cela réduit la friction de conception et la surcharge cognitive lors de la création de boutons, de listes déroulantes, d’info-bulles ou de boîtes de dialogue modales.
Contrairement au redimensionnement en responsive design qui agit lorsque vous redimensionnez un groupe entier, le remplissage agit lorsque vous modifiez le contenu au sein d’un groupe.
Dites adieu au redimensionnement manuel et bonjour à la flexibilité et à la rapidité des workflows !
Utilisation du remplissage
Le remplissage est la distance entre l’arrière-plan visuel et le bord du contenu de chaque côté identifié par un arrière-plan étiré.
XD identifie automatiquement un arrière-plan lorsque :
- Tout groupe, groupe booléen ou forme est positionné au plus bas dans la structure de groupe ou de couche de composant, et
- D’autres éléments chevauchent la couche la plus basse.
Pour contrôler avec précision la taille d’arrière-plan d’un objet via le remplissage, procédez comme suit :
- Sous Inspecteur Propriétés, activez le bouton de remplissage.
- Selon les besoins de votre conception, définissez des valeurs pour Même remplissage pour toutes les directions ou Remplissage différent pour chaque direction.
Vous ne pouvez afficher l’option Remplissage que si l’élément Arrière-plan de la structure de calque occupe la dernière position dans le groupe et qu’il chevauche d’autres objets.
Lorsque vous déplacez ou redimensionnez le contenu au sein d’un groupe ou d’un composant, XD identifie l’arrière-plan, calcule les valeurs de remplissage et les met à jour dans l’Inspecteur Propriétés.
Les valeurs mises à jour sont conservées dans le groupe ou le composant et l’arrière-plan est automatiquement redimensionné. Lorsqu’un groupe ou un composant n’a pas d’arrière-plan visuel, la valeur de remplissage est définie sur 0.
Vous souhaitez modifier les valeurs de remplissage ?
Utilisez une des options suivantes :
- Dans Inspecteur Propriétés, mettez à jour les valeurs de remplissage existantes.
- Pour redimensionner le remplissage sur une zone de travail, appuyez sur la touche « ` », survolez la zone de remplissage et faites-la glisser.
- Pour mettre à jour les valeurs de remplissage sur un groupe ou un composant, redimensionnez ou déplacez manuellement l’arrière-plan sur la zone de travail.
- Pour modifier toutes les valeurs de remplissage, sélectionnez Maj + `.
- Pour modifier des valeurs de remplissage opposées, sélectionnez ` + Alt.
Exemples
Lorsque vous augmentez les valeurs de remplissage, XD crée un remplissage invisible qui agit comme un espace sécurisé autour des logos ou dans une zone de prise en main plus grande pour les boutons lors du prototypage.
- Vous voulez changer le libellé d’un bouton ? Tapez le texte suivant et le bouton se redimensionne.
- Vous souhaitez ajouter plus de lignes dans une liste déroulante ? Utilisez une grille de répétition pour créer plus de lignes à l’intérieur d’un groupe et constatez que l’arrière-plan se redimensionne avec la grille de répétition.
Remplissage dans des composants avec états
Les composants héritent du comportement de remplissage du composant principal. Cela signifie que les valeurs de remplissage définies sur le composant principal sont synchronisées entre les instances ou les états.
La désactivation du remplissage se produit lorsque :
- Vous modifiez les valeurs de remplissage sur une instance de composant et dans le composant principal, ou
- L’instance ne met pas à jour ses valeurs de remplissage.
Choses à garder à l’esprit
- Lorsque vous activez le remplissage :
- Toutes les instances des composants et les états héritent automatiquement de l’ensemble de propriétés du composant principal ou de l’état par défaut, sans possibilité de remplacement local.
- L’option Arrière-plan dans la zone de travail positionne n’importe quel élément d’un groupe ou d’un composant juste au-dessus de l’arrière-plan de groupe.
- Si l’arrière-plan est un groupe booléen, un masque ou un composant, des règles de redimensionnement en responsive design sont appliquées pour redimensionner l’objet.
Si vous supprimez un arrière-plan, XD évalue le groupe, promeut automatiquement la prochaine couche potentielle en tant qu’arrière-plan et met à jour les valeurs de remplissage. S’il n’y a pas de couche d’arrière-plan, le remplissage est réinitialisé à 0.
Restrictions
- Les composants et le texte de point ne peuvent pas faire office d’arrière-plan pour un groupe ou un composant.
Le remplissage ne s’anime pas en mode Prototype lors de l’utilisation des états Survoler ou Appuyer dans le contenu de la conception.
Exemples et exemples de fichiers
Vous voulez changer le libellé d’un bouton sans qu’il déborde de celui-ci ?
- Téléchargez et ouvrez l’exemple de fichier de bouton dans XD.
- Sélectionnez l’objet et son arrière-plan.
- Pour contrôler l’arrière-plan et le contenu du bouton, activez l’option Remplissage dans l’Inspecteur Propriétés.
- En fonction des besoins liés à votre conception, sélectionnez et appliquez l’une des options de remplissage.
En savoir plus
Temps de visionnage : 7 minutes.
Et après ?
Nous vous avons présenté le remplissage. Apprenez maintenant à créer des conceptions ou des prototypes interactifs et partagez-les avec les collaborateurs, comme des développeurs et d’autres designers.
Vous avez une question ou une suggestion ?
Accéder à votre compte