Vous avez une question à poser ou une idée à partager ? Venez participer à la communauté Adobe XD. Nous aimerions connaître vos commentaires et découvrir vos créations !
Dernière mise à jour le
6 févr. 2023
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.
Avant de commencer
Veillez à vous familiariser avec les concepts de base des mises en page prenant en compte le contenu :
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
Vous pouvez activer des piles sur un groupe ou un composant pour lequel le redimensionnement réactif est activé. Cochez la case Piles dans les commandes Redimensionnement réactif de l’Inspecteur Propriétés.
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.
Annotation
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 ?
Lorsque vous activez la pile, XD effectue les opérations suivantes :
- Il identifie automatiquement l’arrière-plan (un groupe ou une forme est placé en bas du panneau Calques et chevauche la zone de travail avec tous les objets du groupe),
- Il active et calcule les valeurs de remplissage,
- Il détermine l’orientation de la pile : Verticale ou Horizontale,
- Il regroupe les éléments qui se chevauchent pour conserver la mise en page, et
- Il définit et corrige les valeurs d’espacement entre les éléments.
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
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é.
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 :
- Sélectionnez les éléments de la pile et faites-les glisser le long de la direction de la pile sur la zone de travail.
- Utilisez Cmd + ] et Cmd + [ pour monter et descendre dans la pile et Cmd + Maj + ] et Cmd + Maj + [ pour déplacer la sélection en premier ou en dernier dans une pile. Ces commandes sont également disponibles dans le menu contextuel (clic droit).
- La nouvelle position de l’élément de la pile est mise en surbrillance par des zones roses. Pour maintenir l’alignement lors de la réorganisation, appuyez sur la touche Maj pour verrouiller les éléments de la pile dans le sens du glissement et ainsi conserver leur alignement d’origine.
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.
Annotation
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 :
- 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é.
- Dans la pile, sélectionnez l’élément à utiliser en arrière-plan.
- 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 chartes graphiques. 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 ?
- Un remplacement d’espace survient lorsque vous modifiez manuellement l’espace entre deux éléments d’une pile dans une instance ou un état. Si vous modifiez l’espace dans le composant principal, les modifications ne sont pas appliquées à l’instance ou à l’état.
- Les instances peuvent avoir des remplacements de contenu ou de mise en page sur des éléments comme un texte de zone plus grand. Ces instances peuvent toujours être synchronisées avec le composant principal pour les valeurs de remplissage ou les espaces entre elles.
En savoir plus
« Couplées à un remplissage et à un redimensionnement réactif, elles constituent une puissante combinaison de fonctionnalités lorsque vous travaillez dans une charte graphique. Lorsque des piles sont utilisées sur un composant principal, toute instance de ce composant respectera cette structure de piles." — 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.
Durée 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 suggestion ?
Concevoir des prototypes UX avec Adobe XD
Créez des maquettes interactives pour sites web et applications mobiles.
