Guide d'utilisation Annuler

Création de conceptions dynamiques avec des piles

  1. Guide de l’utilisateur d’Adobe XD
  2. Introduction
    1. Nouveautés d’Adobe XD
    2. Questions fréquentes
    3. Design, création de prototypes et partage avec Adobe XD
    4. Configuration requise
      1. Configuration matérielle et logicielle requise
      2. Adobe XD, Big Sur et Apple Silicon | macOS 11
    5. Notions de base concernant l’espace de travail
    6. Changement de langue dans l’application Adobe XD
    7. Accès aux kits de conception d’interface utilisateur
    8. Accessibilité dans Adobe XD
    9. Raccourcis clavier
    10. Conseils et astuces
    11. Options d’abonnement à Adobe XD
    12. Modifications apportées à la formule de lancement d’Adobe XD
  3. Conception
    1. Plans de travail, repères et calques
      1. Prise en main des plans de travail
      2. Utilisation des guides et des grilles
      3. Création de plans de travail défilants
      4. Utilisation de calques
      5. Création de groupes de défilement
    2. Formes, objets et chemins
      1. Sélection, redimensionnement et rotation d’objets
      2. Déplacement, alignement, répartition et disposition d’objets
      3. Regroupement, verrouillage, duplication, copie et retournement d’objets
      4. Application d’un contour, d’un fond ou d’une ombre portée à un objet
      5. Création d’éléments répétés
      6. Création de designs en perspective avec des transformations 3D
      7. Modification d’objets à l’aide d’opérations booléennes
    3. Texte et polices
      1. Utilisation d’outils de dessin et de texte
      2. Polices dans Adobe XD
    4. Composants et états
      1. Utilisation de composants
      2. Utilisation de composants imbriqués
      3. Ajout de plusieurs états aux composants
    5. Masquage et effets
      1. Création d’un masque avec des formes
      2. Utilisation des effets de flou
      3. Création et modification de dégradés
      4. Application des effets de fusion
    6. Mise en page
      1. Redimensionnement réactif et contraintes
      2. Définition d’un remplissage fixe pour des composants et des groupes
      3. Création de conceptions dynamiques avec des piles
    7. Vidéos et animations Lottie
      1. Utilisation de vidéos
      2. Création de prototypes avec des vidéos
      3. Utilisation d’animations Lottie
  4. Prototypage
    1. Création de prototypes interactifs
    2. Animation des prototypes
    3. Propriétés d’objet prises en charge pour l’animation automatique
    4. Création de prototypes avec clavier et manette de jeu
    5. Création de prototypes à l’aide de la lecture et des commandes vocales
    6. Création de transitions temporisées
    7. Ajouter des incrustations
    8. Conception de prototypes de voix
    9. Création de liens d’ancrage
    10. Création d’hyperliens
    11. Aperçu de designs et de prototypes
  5. Partage, exportation et révision
    1. Partage des plans de travail sélectionnés
    2. Partage de conceptions et de prototypes
    3. Définition des autorisations d’accès pour les liens
    4. Utilisation de prototypes
    5. Révision de prototypes
    6. Utilisation des spécifications techniques
    7. Partage de spécifications techniques
    8. Inspection de spécifications techniques
    9. Navigation dans les spécifications techniques
    10. Révision des spécifications techniques et commentaires
    11. Exportation d’actifs de conception
    12. Exportation et téléchargement de fichiers à partir de spécifications techniques
    13. Partage de groupe pour les entreprises
  6. Chartes graphiques
    1. Chartes graphiques et bibliothèques Creative Cloud
    2. Utilisation d’actifs de document dans Adobe XD
    3. Utilisation des bibliothèques Creative Cloud dans Adobe XD
    4. Migration d’actifs liés vers les bibliothèques Creative Cloud
    5. Utilisation des jetons de conception 
    6. Utilisation d’actifs provenant de bibliothèques Creative Cloud
  7. Documents en ligne
    1. Documents en ligne dans Adobe XD
    2. Collaboration et cocréation de conceptions
    3. Cocréation de documents partagés
  8. Intégrations et plug-ins
    1. Utilisation d’actifs externes
    2. Utilisation d’actifs de création provenant de Photoshop
    3. Copier-coller d’actifs depuis Photoshop
    4. Importation ou ouverture de conceptions Photoshop
    5. Utilisation des fichiers Illustrator dans Adobe XD
    6. Ouverture et importation de conceptions Illustrator
    7. Copie de vecteurs d’Illustrator vers XD
    8. Plug-ins pour Adobe XD
    9. Création et gestion des plug-ins
    10. Intégration Jira pour XD
    11. Plug-in Slack pour XD
    12. Plug-in Zoom pour XD
    13. Publication de designs depuis XD vers Behance
  9. XD pour iOS et Android
    1. Aperçu sur appareils mobiles
    2. FAQ concernant Adobe XD pour mobile
  10. Résolution des problèmes
    1. Problèmes connus et résolus
      1. Problèmes connus
      2. Problèmes résolus
    2. Installation et mises à jour
      1. XD semble incompatible avec Windows
      2. Code d’erreur 191
      3. Code d’erreur 183
      4. Problèmes d’installation des modules externes XD
      5.  Invitation à désinstaller et réinstaller Adobe XD sur Windows 10
      6. Problèmes liés à la migration des préférences
    3. Lancement et blocage
      1.  XD se bloque au lancement sur Windows 10
      2.  XD se ferme lorsque vous vous déconnectez de Creative Cloud
      3. Problème lié à l’état d’un abonnement sur Windows
      4. Avertissement d’application bloquée lors du lancement de XD sur Windows
      5. Génération du fichier de vidage sur Windows
      6. Collecte et partage de journaux d’incidents
    4. Documents en ligne et bibliothèques Creative Cloud
      1. Problèmes liés aux documents en ligne XD
      2. Problèmes relatifs aux composants liés
      3. Problèmes relatifs aux bibliothèques et aux liens
    5. Prototype, publication et révision
      1. Impossible d’enregistrer les interactions de prototypes sur macOS Catalina
      2. Problèmes liés aux workflows de publication
      3. Les liens publiés n’apparaissent pas dans les navigateurs
      4. Les prototypes ne s’affichent pas correctement dans les navigateurs
      5. Le panneau de commentaires s’affiche soudainement sur les liens partagés
      6. Impossible de publier des bibliothèques
    6. Importation, exportation et utilisation d’autres applications
      1. Importation et exportation dans XD
      2. Fichiers Photoshop dans XD
      3. Fichiers Illustrator dans XD
      4. Exportation dans After Effects à partir de XD
      5. Fichiers Sketch dans XD
      6. ++Applications tierces non visibles lors de l’exportation

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. 

Résultat du fonctionnement des piles

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.

Vous débutez dans XD ?

Installer XD

Découvrez les bases de l’application

Vous utilisez déjà XD ?

Mettre à jour votre application

Découvrez les nouveautés

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. 

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.
appliquer des 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

aligner les piles

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.

redimensionner

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

modifier les espaces entre les objets

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.

modifier les espaces entre les piles

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.
Réorganisation des éléments de la pile

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 :

create_modify_stack_baground

  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 et grilles de répétition

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 ?

  • 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. 
Comportement des remplacements 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 ?

Questions à la communauté

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 !

Logo Adobe

Accéder à votre compte