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 !

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 : 

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.

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

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 ?

En savoir plus

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 ?