Comment utiliser la fonction Répéter la grille dans Adobe XD

La grille de répétition est l'une des principales fonctionnalités de gain de temps d'Adobe XD. La fonction Répéter la grille vous permet de créer un ensemble d'éléments répétés d'un simple clic et glisser. Lorsqu'ils sont répétés, vous pouvez modifier un ensemble d'éléments répétés et faire en sorte que ces changements se reflètent instantanément dans le reste des éléments. Les étapes que vous trouverez ici vous aident à découvrir cette fonctionnalité intéressante.

Il est préférable de suivre les instructions si vous le pouvez. Vous pouvez trouver un exemple de fichier contenant une image et du texte dans le dossier LuckyTemplatesCCfiles . Ouvrez le dossier XD et choisissez le fichier RepeatGrid-Sample. Suivez ensuite ces étapes :

Ouvrez un fichier contenant des éléments que vous souhaitez répéter verticalement (vers le bas) sur la page. Comme mentionné précédemment, vous pouvez créer le vôtre ou utiliser le fichier RepeatGrid-Sample qui a été fourni sur notre site.

Sélectionnez tous les éléments à répéter, puis appuyez sur le bouton Répéter la grille dans le panneau Propriétés. Vous pouvez également choisir d'utiliser le raccourci clavier Ctrl+R (Windows) ou ⌘ +R (Mac).

Des poignées apparaissent sur les côtés droit et inférieur de vos éléments.

Sélectionnez les éléments que vous souhaitez répéter, puis appuyez sur le bouton Répéter la grille dans le panneau Propriétés.

Cliquez et faites glisser vers le bas sur la poignée inférieure pour voir qu'une répétition est créée automatiquement lorsque vous faites glisser. Faites glisser au-delà du modèle pour étendre l'illustration en dehors du bas.

Répétez facilement les éléments sélectionnés à l'aide de la fonction Répéter la grille.

Revenez à votre art original et effectuez un simple changement. Modifiez peut-être la taille du texte du titre ou redimensionnez un peu l'image. Notez que lorsque vous apportez des modifications à ce premier élément, les modifications sont répercutées tout au long de la répétition.

Cela peut vous faire gagner beaucoup de temps, mais suivez les étapes suivantes pour voir comment vous pouvez facilement remplacer l'image et le texte répétés.

Importation d'images mises à jour dans votre grille répétée

Après avoir répété les éléments, vous souhaiterez peut-être montrer comment votre application va fonctionner avec un contenu plus réaliste. L'élément répété ne permet pas d'afficher les différentes données que votre application peut proposer. Ci-dessous, vous prenez un dossier d'images et les déposez au-dessus de votre grille répétée afin de remplacer votre image d'origine. Suivez simplement ces étapes :

Recherchez un dossier d'images dans un format pris en charge par XD, tel que JPEG, PNG ou GIF. Si vous accédez au dossier LuckyTemplatesCCfiles , vous pouvez trouver un dossier nommé Insectes dans le dossier XD Files.

Positionnez votre fenêtre XD qui contient le plan de travail avec la répétition afin que vous puissiez le voir ainsi que le dossier plein d'images.

Assurez-vous de sélectionner toutes les images, puis cliquez et faites-les glisser sur la grille répétée. Les images sont remplacées.

Vous pouvez faire glisser et déposer plusieurs images dans la grille répétée pour remplacer le contenu de votre image.

Vous pouvez également faire glisser des images de l'application Bridge vers Adobe XD.

Mise à jour de votre texte dans votre grille répétée

Ici, vous découvrez comment mettre à jour votre texte dans une grille répétée. Cela se fait à peu près de la même manière qu'avec les images, mais le format .txt est essentiel pour que ce processus fonctionne :

Créez du texte dans n'importe quelle application pouvant enregistrer le fichier au format Texte brut, c'est-à-dire avec une extension .txt. Le texte peut être généré à partir du Bloc-notes, Word, téléchargé à partir de Google Docs en tant que texte brut ou exporté à partir de nombreuses autres applications. Pour cet exemple, vous pouvez utiliser l'exemple de fichier texte nommé Bugtext.txt dans le dossier XD-Files sur notre site.

Positionnez le dossier qui contient le fichier texte de manière à voir le fichier et la grille répétée.

Comme pour le processus de remplacement de l'image répétée, cliquez et faites glisser le fichier .txt sur votre texte de grille répété. Le texte est remplacé par le texte de votre fichier.

Cliquez et faites glisser un fichier .txt sur la grille répétée pour remplacer le texte.

Vous pouvez voir l'exemple tel qu'il apparaît une fois que les images et le texte ont été remplacés ici.

La grille répétée avec de nouvelles images et du texte.

Si vous avez étendu au-delà de la zone d'affichage, assurez-vous de cliquer sur le nom du plan de travail au-dessus du plan de travail pour le sélectionner.

Faites glisser la poignée inférieure pour l'étendre à la longueur de votre grille répétée. Cela permet de faire défiler l'écran dans l'aperçu. La ligne pointillée représente la zone qui prévisualise avant le défilement.

Cliquez et faites glisser pour étendre la zone d'affichage de votre grille répétée.

Cliquez sur le bouton Aperçu du bureau et faites défiler pour voir votre grille répétée en action.