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.
créer 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.
synchroniser un fichier texte sur 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.
- 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.
- Faites glisser le fichier texte sur la grille de répétition.
real ipsum
Real Ipsum est un générateur de lorem ipsum gratuit développé par Xavier Steve, qui rafraîchit la page à chaque ouverture pour autogénérer des nouveaux contenus de texte.
ajouter des styles de caractères
- Sélectionnez l’outil Texte et cliquez ou faites glisser pour créer une zone de texte.
- Définissez la police, la taille, la couleur, les attributs…
- Ouvrez le panneau Actifs et cliquez sur le signe + (Styles de caractères) pour créer un nouveau style.
- Renommez le style avec votre propre nom personnalisé et appliquez le style aux zones de texte de votre projet.
- Pour modifier un style de caractère, choisissez la commande Modifier avec un clic droit sur le style de caractère.
Avantage indéniable, vos modifications seront immédiatement effectives sur toutes les instances utilisant le style de caractère !
créer un effet de défilement
Par exemple pour créer un prototype de carrousel utilisant un défilement horizontal.
- En mode Design, sélectionnez les objets que vous souhaitez transformer en groupe défilant.
- Cliquez sur l’icône
dans l’Inspecteur Propriétés. La fenêtre d’affichage ajuste automatiquement ses dimensions afin de fournir un aperçu instantané. Vous pouvez également utiliser ⇧ ⌘H sous macOS ou Maj+Ctrl+H sous Windows pour créer un effet de défilement horizontal. - Pour prévisualiser l’effet de défilement horizontal complet, cliquez sur
.
Ou pour un défilement vertical.
Il est utile de combiner les effets de défilement horizontal et vertical lors de la création d’objets qui vous permettent de faire défiler dans toutes les directions, comme les cartes interactives.
dissocier la grille
Lorsque vous êtes parfaitement certain de votre mise en page des composants, vous pouvez dissocier la grille en sélectionnant le groupe puis en cliquant sur Dissocier la grille. Les composants se décomposent alors dans des calques.
téléchargez le dossier d’exercice