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.
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 !
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 :
Pour contrôler avec précision la taille d’arrière-plan d’un objet via le remplissage, procédez comme suit :
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.
Utilisez une des options suivantes :
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.
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 :
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.
Le remplissage ne s’anime pas en mode Prototype lors de l’utilisation des états Survoler ou Appuyer dans le contenu de la conception.
Vous voulez changer le libellé d’un bouton sans qu’il déborde de celui-ci ?
Temps de visionnage : 7 minutes.
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.
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.
Accéder à votre compte