Guide d'utilisation Annuler

Définition d’un remplissage fixe pour des composants et des groupes

  1. Guide de l’utilisateur d’Adobe XD
  2. Introduction
    1. Nouveautés d’Adobe XD
    2. Questions fréquentes
    3. Design, création de prototypes et partage avec Adobe XD
    4. Configuration requise
      1. Configuration matérielle et logicielle requise
      2. Adobe XD, Big Sur et Apple Silicon | macOS 11
    5. Notions de base concernant l’espace de travail
    6. Changement de langue dans l’application Adobe XD
    7. Accès aux kits de conception d’interface utilisateur
    8. Accessibilité dans Adobe XD
    9. Raccourcis clavier
    10. Conseils et astuces
    11. Options d’abonnement à Adobe XD
    12. Modifications apportées à la formule de lancement d’Adobe XD
  3. Conception
    1. Plans de travail, repères et calques
      1. Prise en main des plans de travail
      2. Utilisation des guides et des grilles
      3. Création de plans de travail défilants
      4. Utilisation de calques
      5. Création de groupes de défilement
    2. Formes, objets et chemins
      1. Sélection, redimensionnement et rotation d’objets
      2. Déplacement, alignement, répartition et disposition d’objets
      3. Regroupement, verrouillage, duplication, copie et retournement d’objets
      4. Application d’un contour, d’un fond ou d’une ombre portée à un objet
      5. Création d’éléments répétés
      6. Création de designs en perspective avec des transformations 3D
      7. Modification d’objets à l’aide d’opérations booléennes
    3. Texte et polices
      1. Utilisation d’outils de dessin et de texte
      2. Polices dans Adobe XD
    4. Composants et états
      1. Utilisation de composants
      2. Utilisation de composants imbriqués
      3. Ajout de plusieurs états aux composants
    5. Masquage et effets
      1. Création d’un masque avec des formes
      2. Utilisation des effets de flou
      3. Création et modification de dégradés
      4. Application des effets de fusion
    6. Mise en page
      1. Redimensionnement réactif et contraintes
      2. Définition d’un remplissage fixe pour des composants et des groupes
      3. Création de conceptions dynamiques avec des piles
    7. Vidéos et animations Lottie
      1. Utilisation de vidéos
      2. Création de prototypes avec des vidéos
      3. Utilisation d’animations Lottie
  4. Prototypage
    1. Création de prototypes interactifs
    2. Animation des prototypes
    3. Propriétés d’objet prises en charge pour l’animation automatique
    4. Création de prototypes avec clavier et manette de jeu
    5. Création de prototypes à l’aide de la lecture et des commandes vocales
    6. Création de transitions temporisées
    7. Ajouter des incrustations
    8. Conception de prototypes de voix
    9. Création de liens d’ancrage
    10. Création d’hyperliens
    11. Aperçu de designs et de prototypes
  5. Partage, exportation et révision
    1. Partage des plans de travail sélectionnés
    2. Partage de conceptions et de prototypes
    3. Définition des autorisations d’accès pour les liens
    4. Utilisation de prototypes
    5. Révision de prototypes
    6. Utilisation des spécifications techniques
    7. Partage de spécifications techniques
    8. Inspection de spécifications techniques
    9. Navigation dans les spécifications techniques
    10. Révision des spécifications techniques et commentaires
    11. Exportation d’actifs de conception
    12. Exportation et téléchargement de fichiers à partir de spécifications techniques
    13. Partage de groupe pour les entreprises
  6. Chartes graphiques
    1. Chartes graphiques et bibliothèques Creative Cloud
    2. Utilisation d’actifs de document dans Adobe XD
    3. Utilisation des bibliothèques Creative Cloud dans Adobe XD
    4. Migration d’actifs liés vers les bibliothèques Creative Cloud
    5. Utilisation des jetons de conception 
    6. Utilisation d’actifs provenant de bibliothèques Creative Cloud
  7. Documents en ligne
    1. Documents en ligne dans Adobe XD
    2. Collaboration et cocréation de conceptions
    3. Cocréation de documents partagés
  8. Intégrations et plug-ins
    1. Utilisation d’actifs externes
    2. Utilisation d’actifs de création provenant de Photoshop
    3. Copier-coller d’actifs depuis Photoshop
    4. Importation ou ouverture de conceptions Photoshop
    5. Utilisation des fichiers Illustrator dans Adobe XD
    6. Ouverture et importation de conceptions Illustrator
    7. Copie de vecteurs d’Illustrator vers XD
    8. Plug-ins pour Adobe XD
    9. Création et gestion des plug-ins
    10. Intégration Jira pour XD
    11. Plug-in Slack pour XD
    12. Plug-in Zoom pour XD
    13. Publication de designs depuis XD vers Behance
  9. XD pour iOS et Android
    1. Aperçu sur appareils mobiles
    2. FAQ concernant Adobe XD pour mobile
  10. Résolution des problèmes
    1. Problèmes connus et résolus
      1. Problèmes connus
      2. Problèmes résolus
    2. Installation et mises à jour
      1. XD semble incompatible avec Windows
      2. Code d’erreur 191
      3. Code d’erreur 183
      4. Problèmes d’installation des modules externes XD
      5.  Invitation à désinstaller et réinstaller Adobe XD sur Windows 10
      6. Problèmes liés à la migration des préférences
    3. Lancement et blocage
      1.  XD se bloque au lancement sur Windows 10
      2.  XD se ferme lorsque vous vous déconnectez de Creative Cloud
      3. Problème lié à l’état d’un abonnement sur Windows
      4. Avertissement d’application bloquée lors du lancement de XD sur Windows
      5. Génération du fichier de vidage sur Windows
      6. Collecte et partage de journaux d’incidents
    4. Documents en ligne et bibliothèques Creative Cloud
      1. Problèmes liés aux documents en ligne XD
      2. Problèmes relatifs aux composants liés
      3. Problèmes relatifs aux bibliothèques et aux liens
    5. Prototype, publication et révision
      1. Impossible d’enregistrer les interactions de prototypes sur macOS Catalina
      2. Problèmes liés aux workflows de publication
      3. Les liens publiés n’apparaissent pas dans les navigateurs
      4. Les prototypes ne s’affichent pas correctement dans les navigateurs
      5. Le panneau de commentaires s’affiche soudainement sur les liens partagés
      6. Impossible de publier des bibliothèques
    6. Importation, exportation et utilisation d’autres applications
      1. Importation et exportation dans XD
      2. Fichiers Photoshop dans XD
      3. Fichiers Illustrator dans XD
      4. Exportation dans After Effects à partir de XD
      5. Fichiers Sketch dans XD
      6. ++Applications tierces non visibles lors de l’exportation

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.

1
Utilisation du remplissage pour créer des mises en page prenant en compte le contenu

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. 
Remplissage
Mêmes valeurs de remplissage dans toutes les directions

Pour contrôler avec précision la taille d’arrière-plan d’un objet via le remplissage, procédez comme suit : 

  1. Sous Inspecteur Propriétés, activez le bouton de remplissage.
  2. 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.
1
Valeurs de remplissage différentes 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.
Répéter les grilles et le remplissage
Utiliser la grille de répétition avec un remplissage

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 ?

1
Fichiers d’exemple

  1. Téléchargez et ouvrez l’exemple de fichier de bouton dans XD.
  2. Sélectionnez l’objet et son arrière-plan.
  3. Pour contrôler l’arrière-plan et le contenu du bouton, activez l’option Remplissage dans l’Inspecteur Propriétés.
  4. 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 ?

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.

Logo Adobe

Accéder à votre compte