Vous avez une question à poser ou une idée à partager ? Venez participer à la communauté Adobe XD. Nous serions ravis de vous compter parmi nous et de découvrir vos créations !
Découvrez comment utiliser des piles dans Adobe XD pour créer des mises en page dynamiques qui réagissent aux modifications du contenu.
Les piles dans Adobe XD permettent aux objets d’un groupe de définir des espaces fixes entre eux. Lorsque vous redimensionnez, réorganisez ou modifiez des objets dans une pile, XD conserve automatiquement l’espace défini entre les objets.
Couplées à un remplissage et à un redimensionnement réactif, les piles constituent une combinaison puissante de fonctionnalités qui offre davantage de contrôle et de vitesse dans la conception. Les piles s’appliquent aux composants, automatisent la mise en page et permettent de modifier aisément les boutons, les menus, les listes déroulantes et les mises en page de cartes.
Veillez à vous familiariser avec les concepts de base des mises en page prenant en compte le contenu :
Avant de commencer à utiliser des piles, tenez compte des restrictions suivantes :
XD détermine automatiquement l’orientation de la pile en fonction de la structure de votre groupe ou composant. Cependant, si vous souhaitez modifier l’orientation de la pile, sélectionnez Vertical ou Horizontal dans l’option Pile de l’Inspecteur Propriétés.
Lorsque vous travaillez avec des composants, la commande d’orientation de la pile est disponible uniquement pour le composant principal.
Lorsque vous activez la pile, XD effectue les opérations suivantes :
Après avoir créé des éléments de pile, utilisez l’une des options suivantes pour les modifier :
Déplacer les éléments ou utiliser l’option Aligner Redimensionner des objets et du texte dans la pile
Déplacez les éléments librement ou utilisez les outils Aligner sur les éléments de la pile à l’opposé de la direction de la pile.
Sélectionnez un objet à redimensionner, et les autres objets de la pile se déplacent automatiquement pour conserver leur espacement relatif. Utilisez le texte à hauteur automatique pour ajuster dynamiquement la hauteur du texte dans la pile sans modifier sa largeur.
Modifier les espaces entre les objets Modifier les espaces dans une pile
Sélectionnez un objet à l’intérieur d’un groupe ou d’un composant empilé et passez la souris sur les espaces. Une surbrillance rose représente l’espace entre les objets de la pile. Cliquez et faites glisser la mise en surbrillance pour modifier l’espace entre les objets.
Sélectionnez la pile entière et maintenez la touche S enfoncée sur le clavier pour ajuster les espaces à l’intérieur d’une pile. Vous pouvez également utiliser la touche S pour modifier le remplissage.
Égaliser les espaces dans une pile Dupliquer les éléments d’une pile
Faites glisser et utilisez les touches Maj ou Maj+S (lorsque votre sélection se trouve en dehors de la pile).
Utilisez Cmd+D pour dupliquer un élément à l’intérieur d’une pile et le positionner sous l’élément sélectionné.
Après avoir créé et modifié les éléments de la pile, utilisez l’une des options suivantes pour les réorganiser :
Lorsque vous créez une pile, XD détermine automatiquement l’arrière-plan. Cependant, lorsque vous activez les piles sur un groupe ou un composant, le calque ou le groupe placé le plus bas dans la pile et qui chevauche son contenu devient son arrière-plan.
XD ne prend pas en charge les instances de composant en tant qu’arrière-plan.
Pour créer et modifier un arrière-plan de pile, procédez comme suit :
Maintenant que vous avez appris à créer des piles et à les utiliser, voici quelques conseils supplémentaires sur l’utilisation des piles :
Vous pouvez obtenir des mises en page bien définies et faciles à modifier lors de l’imbrication de piles les unes dans les autres, par exemple une pile horizontale dans une pile verticale. Vous pouvez imbriquer un nombre illimité de piles. Regardez l’illustration animée pour comprendre comment fonctionnent les piles imbriquées.
Vous pouvez appliquer des piles et des remplissages dans les composants pour définir des éléments d’IU réutilisables dans le contexte des systèmes de conception. Lorsque vous travaillez avec des composants qui ont besoin d’un libellé ou d’une mise à jour de ligne, l’utilisation de piles fait en sorte que la mise en page du composant réagit à la modification et automatise l’effort de mise en page manuelle. Par exemple, si vous avez plusieurs instances avec des remplacements de contenu, utilisez des piles pour modifier et gérer les espaces globalement. Plus de retouche manuelle de chaque carte !
Les piles appliquées aux composants principaux sont automatiquement appliquées à toutes ses instances et à tous ses états. Vous pouvez également créer un composant lié avec des piles et les modifier.
« Couplées à un remplissage et à un redimensionnement réactif, elles constituent une puissante combinaison de fonctionnalités lorsque vous travaillez dans un système de conception. Lorsque les piles sont utilisées sur un composant principal, toute instance de ce composant respecte cette structure d’empilement. » - Dani Beaumont, responsable produit principal, XD.
Pour en savoir plus sur la prise en main des piles dans les composants et les groupes, regardez cette vidéo.
Temps de visionnage : 1 minute.
Vous avez commencé à utiliser des piles pour définir des espaces entre les éléments. Passez à l’étape suivante et apprenez à créer des prototypes animés et à les partager avec des designers ou des parties prenantes pour recueillir des commentaires.
Vous avez une question à poser ou une idée à partager ? Venez participer à la communauté Adobe XD. Nous serions ravis de vous compter parmi nous et de découvrir vos créations !
Accéder à votre compte