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 horizontale avec éléments répétés
    Grille horizontale avec éléments répétés
    Grille verticale avec éléments répétés
    Grille verticale avec éléments répétés
  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. 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

    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

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

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.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne