Création de conceptions dynamiques avec des piles

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 :

• Composants
• Redimensionnement réactif et contraintes
• Remplissage pour des composants et des groupes

Restrictions

Avant de commencer à utiliser des piles, tenez compte des restrictions suivantes :

• Si vous passez la souris sur un élément dont l’état de survol augmente, l’arrière-plan ne se redimensionne pas pour s’adapter au nouvel état et les éléments de la pile ne sont pas repoussés.
• Les composants ne peuvent pas servir d’arrière-plan pour le remplissage et les piles. Créez plutôt un composant qui contient à la fois le contenu et l’arrière-plan.
• Vous ne pouvez pas :
  • convertir des groupes spéciaux en masques ou des groupes booléens en piles ;
  • redimensionner des piles dans l’orientation de la pile ;
  • sélectionner un élément de la pile et des éléments en dehors de la pile.

Activation des piles

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.

Que se passe-t-il lorsque vous activez les piles ?

Modification des éléments de la pile

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

Modifier les espaces entre les objets                                                                   Modifier les espaces dans une pile

Égaliser les espaces dans une pile                                                                        Dupliquer les éléments d’une pile

Réorganisation des éléments de la pile

Après avoir créé et modifié les éléments de la pile, utilisez l’une des options suivantes pour les réorganiser :

Création ou modification d’un arrière-plan de pile

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 :

1. Créez une forme ou un groupe à l’intérieur de la pile qui sert d’arrière-plan de pile. Vous pouvez également créer un arrière-plan en dehors de la pile et le copier dans le groupe empilé.
2. Dans la pile, sélectionnez l’élément à utiliser en arrière-plan.
3. Cliquez avec le bouton droit et sélectionnez Créer l’arrière-plan ou Remplacer l’arrière-plan. L’élément sélectionné est déplacé à la fin de la pile et redimensionné pour s’adapter à la taille de la pile et aux valeurs de remplissage.
   

Exploitation optimale des éléments de la pile

Maintenant que vous avez appris à créer des piles et à les utiliser, voici quelques conseils supplémentaires sur l’utilisation des piles :

Imbriquer et réorganiser 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. 

Piles dans les composants et les états

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. 

Comment les remplacements se comportent-ils avec les piles ?

En savoir plus

« 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.

Et après ?

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 ou une idée ?