Guide d'utilisation Annuler

Création d’éléments répétés

Rechercher
XD

XD

Ouvrir l’application
  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. Gestion des couleurs
    5. Configuration requise
      1. Configuration matérielle et logicielle requise
      2. Adobe XD, Big Sur et Apple Silicon | macOS 11
    6. Notions de base concernant l’espace de travail
    7. Changement de langue dans l’application Adobe XD
    8. Accès aux kits de conception d’interface utilisateur
    9. Accessibilité dans Adobe XD
    10. Raccourcis clavier
    11. Conseils et astuces
  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 de ressources de design
    12. Exportation et téléchargement de fichiers à partir de spécifications techniques
    13. Partage de groupe pour les entreprises
    14. Sauvegarde et transfert de ressources XD
  6. Chartes graphiques
    1. Chartes graphiques et bibliothèques Creative Cloud
    2. Utilisation de ressources de document dans Adobe XD
    3. Utilisation des bibliothèques Creative Cloud dans Adobe XD
    4. Migration de ressources liées vers les bibliothèques Creative Cloud
    5. Utilisation des jetons de conception 
    6. Utilisation de ressources 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 de ressources externes
    2. Utilisation de ressources de design provenant de Photoshop
    3. Copier-coller de ressources 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

Apprenez à créer des éléments répétés dans Adobe XD à l’aide de la fonctionnalité Grille de répétition.

Lorsqu’on crée des pages web ou des applications mobiles, il est souvent nécessaire de définir des éléments ou des listes de contenu qui se répètent. Toutefois, créer ces éléments ou les mettre à jour en cas de modifications peut s’avérer extrêmement chronophage.

La fonctionnalité Grille de répétition transforme un groupe d’éléments en un élément répété. Tirez simplement sur l’élément, dans n’importe quelle direction, et la grille se répète. Lorsque vous modifiez le style d’un élément, ce changement se répercute sur tous les éléments de la grille. Par exemple, si vous modifiez la taille d’image d’un des éléments, toutes les images de la grille sont redimensionnées automatiquement.

Si vous avez inclus un élément de texte dans la grille, seul le style est reproduit, pas le contenu du texte. Ainsi, vous pouvez appliquer rapidement un style commun à l’ensemble de vos textes, tout en conservant un contenu distinct pour chaque élément de la grille.

Vous pouvez remplacer le paramètre de texte fictif d’une grille de répétition en faisant glisser un fichier texte sur la grille.

Création d’une grille de répétition

Fondamentalement, une grille de répétition est un type de groupe particulier. Vous pouvez créer une grille de répétition en sélectionnant un objet ou un groupe d’objets, puis en le convertissant en grille de répétition.

  1. Créez l’élément de base que vous souhaitez répéter (par exemple, un ensemble composé de miniatures d’images et de texte).

  2. Sélectionnez les éléments que vous souhaitez répéter.

  3. Convertissez la sélection en grille de répétition en cliquant sur le bouton dans l’inspecteur Propriétés ou en utilisant le raccourci clavier Cmd + R (Mac) ou Ctrl + R (Windows).

    De grosses poignées apparaissent sur les bords de l’élément.

    Poignées permettant de répéter un élément ou un groupe d’éléments
    Poignées permettant de répéter un élément ou un groupe d’éléments

  4. Pour répéter l’élément selon une grille verticale, faites glisser la poignée située au bas de l’élément. Pour répéter l’élément selon une grille horizontale, faites glisser la poignée située sur la droite de l’élément.

    Grille de répétition verticale

    Grille de répétition horizontale

  5. Pour sélectionner des éléments de la grille afin de les modifier, double-cliquez sur la grille.

Pour dissocier les éléments de la grille afin de les modifier séparément, sélectionnez la grille, puis cliquez sur Dissocier la grille dans l’inspecteur Propriétés.

Vous pouvez accéder aux éléments composant la grille de répétition en double-cliquant à l’intérieur du groupe.

Après avoir apporté vos modifications, quittez le contexte de modification en appuyant sur la touche Echap.

Remarque :

Vous pouvez également accéder à ces éléments en navigant jusqu’à eux dans le panneau Calque ou en les sélectionnant directement.

Ajustement de la marge entre deux éléments dans une grille de répétition

Pour ajuster les marges entre deux éléments de la grille, passez la souris au-dessus de l’espace qui sépare ces éléments. Quand le curseur se transforme en flèche double, faites-le glisser pour augmenter ou diminuer la marge intérieure.

Grille verticale avec éléments répétés
Grille verticale avec éléments répétés

Utilisation de texte dans une grille de répétition

Vous disposez de plusieurs options pour utiliser du texte dans une grille de répétition. Vous pouvez mettre à jour individuellement chaque occurrence d’un objet de texte dans une grille de répétition, ou vous pouvez choisir de faire glisser un document .txt prérempli sur une grille de répétition afin que son contenu soit automatiquement appliqué aux objets de texte se trouvant dans cette grille. 

Mise à jour individuelle d’éléments de texte dans une grille de répétition

  1. Utilisez le raccourci Cmd + clic (Mac) ou Ctrl + clic (Windows) sur un objet de texte dans votre grille de répétition pour le sélectionner. 

  2. Pour modifier l’élément de texte, double-cliquez dessus et modifiez le texte.

Remarque :

Les modifications apportées au contenu ne sont pas appliquées aux autres objets de texte de la grille de répétition. Cependant, tout style appliqué à l’objet de texte s’applique à l’ensemble des objets de texte.

Déplacement d’un fichier texte séparé par des retours à la ligne sur un objet de texte dans une grille de répétition

Vous pouvez remplacer le paramètre de texte fictif d’une grille de répétition en faisant glisser un fichier texte sur la grille.

  1. Créez un fichier texte avec l’extension .txt. Pour ce faire, vous pouvez utiliser le logiciel TextEdit sous Mac ou le Bloc-notes sous Windows (en enregistrant au format .txt), ou tout autre éditeur de texte. Assurez-vous que le codage est défini sur UTF-8. Séparez les différentes lignes de données par un retour à la ligne. 

  2. Faites glisser le fichier texte sur la grille de répétition.

    Déplacement d’un fichier texte sur un objet dans une grille de répétition
    Déplacement d’un fichier texte sur un objet dans une grille de répétition - Remplacer par

    La grille de répétition est complétée selon l’ordre du texte dans le fichier texte. S’il y a davantage d’éléments de grille que de lignes de texte dans le fichier, le texte est répété à partir du début.

Utilisation d’images dans une grille de répétition

Pour ce qui est des images, vous pouvez créer des schémas répétés d’objets, dans lesquels le remplissage des objets par des images est répété selon un modèle que vous définissez.

Vous pouvez choisir de créer un schéma de remplissage d’images en faisant glisser les images une par une dans un objet ou en sélectionnant plusieurs images pour les faire glisser sur un objet dans la grille de répétition.

Déplacement de fichiers image sur un objet dans une grille de répétition
Déplacement de fichiers image sur un objet dans une grille de répétition - Remplacer par

Remplacement d’images dans une grille de répétition

Pour remplacer des images dans la grille, ouvrez le Finder ou l’Explorateur de fichiers et accédez à l’emplacement où vous avez enregistré les images destinées à votre projet. Sélectionnez toutes les images que vous souhaitez voir apparaître dans la grille et faites-les glisser vers l’objet cible dans la grille de répétition.

Les anciennes images sont remplacées par les nouvelles, qui sont automatiquement redimensionnées.

Création d’interactions à partir d’une grille de répétition

Vous pouvez relier une grille de répétition à d’autres plans de travail en mode Prototype de différentes manières :

Association de l’intégralité de la grille de répétition à une même interaction

  1. En mode Design, créez un deuxième plan de travail dans le fichier à l’aide de l’outil Plan de travail (A).

  2. Basculez en mode Prototype en cliquant sur l’onglet Prototype ou en utilisant le raccourci clavier Ctrl + Tab.

  3. Sélectionnez la grille de répétition dans votre premier plan de travail. Un connecteur doté d’une flèche s’affiche sur le côté droit de l’objet, à son point médian.

  4. Faites glisser le connecteur sur le plan de travail suivant. Sélectionnez les options de transition dans la fenêtre contextuelle, puis appuyez sur la touche Echap ou cliquez en dehors de la fenêtre pour la faire disparaître.

  5. Affichez un aperçu en cliquant sur le bouton Lecture dans le coin supérieur droit du cadre de l’application ou à l’aide du raccourci clavier Cmd + Entrée (Mac) ou Ctrl + Entrée (Windows). Cliquez n’importe où sur la grille de répétition pour lire l’interaction.

Association d’un seul élément d’une grille de répétition à une interaction

  1. Sélectionnez un objet dans la grille de répétition.

  2. Faites glisser le connecteur se trouvant à droite du rectangle vers le plan de travail que vous souhaitez lier. Sélectionnez les options de transition dans la fenêtre contextuelle, puis appuyez sur la touche Echap ou cliquez en dehors de la fenêtre pour la faire disparaître.

  3. Affichez un aperçu en cliquant sur le bouton Lecture dans le coin supérieur droit du cadre de l’application ou à l’aide du raccourci clavier Cmd + Entrée (sous Mac) ou Ctrl + Entrée (sous Windows). Cliquez sur l’objet pour vérifier l’interaction.

Création d’un groupe d’éléments dans la grille de répétition puis création d’une interaction à partir du groupe

Vous pouvez également créer un groupe d’objets dans la grille de répétition, puis créer des interactions à partir de ce groupe.

  1. Sélectionnez un objet dans la grille de répétition, puis utilisez le raccourci Maj + clic sur d’autres objets pour les ajouter à votre sélection.

  2. Après avoir sélectionné ces objets, cliquez avec le bouton droit de la souris et sélectionnez Grouper dans le menu contextuel. Vous pouvez également utiliser le raccourci clavier Cmd + G (Mac) ou Ctrl + G (Windows) pour regrouper les objets.

  3. Passez en mode Prototype. Faites glisser le connecteur du groupe vers le plan de travail que vous souhaitez lier.

  4. Affichez un aperçu en cliquant sur le bouton Lecture dans le coin supérieur droit du cadre de l’application ou à l’aide du raccourci clavier Cmd + Entrée (sous Mac) ou Ctrl + Entrée (sous Windows). Cliquez sur le groupe pour vérifier l’interaction.

Importation de contenu avec une grille de répétition

Voici une vidéo d’exemple pour apprendre à utiliser les grilles de répétition. 

Articles connexes

 Adobe

Recevez de l’aide plus rapidement et plus facilement

Nouvel utilisateur ?

Liens rapides

Voir toutes vos formules Gérer vos formules
Afficher les liens rapides
Masquer les liens rapides
Adobe MAX 2024

Adobe MAX
La conférence sur la créativité

Du 14 au 16 octobre à Miami Beach et en ligne

S’inscrire

Adobe MAX

La conférence sur la créativité

Du 14 au 16 octobre à Miami Beach et en ligne

S’inscrire
Adobe MAX 2024

Adobe MAX
La conférence sur la créativité

Du 14 au 16 octobre à Miami Beach et en ligne

S’inscrire

Adobe MAX

La conférence sur la créativité

Du 14 au 16 octobre à Miami Beach et en ligne

S’inscrire

Mentions légales    |    Politique de confidentialité en ligne