Apprenez à configurer des grilles de mise en page dans vos projets pour aligner du contenu et diffuser vos designs sur différents types d’appareils.

Ce qu'il vous faut

Il s'agit d’une ressource Adobe Stock qui vous permettra de mettre en pratique ce que vous apprenez dans ce tutoriel. Si vous souhaitez utiliser ce fichier d’exemple en dehors du cadre de ce tutoriel, il vous suffit d’acheter une licence sur Adobe Stock. Consultez le fichier Lisez-moi figurant dans le dossier pour connaître les conditions régissant l’utilisation de ce fichier d’exemple.

Vous savez maintenant comment appliquer et modifier des grilles de mise en page sur différents plans de travail

Les grilles à colonnes d’Adobe XD CC sont très utiles pour aligner le contenu de designs ou concevoir des projets adaptés à différents types d’appareil. Vous pouvez facilement les modifier en fonction des besoins.

Application d’une grille de mise en page

  • Après avoir sélectionné un ou plusieurs plans de travail, choisissez Mise en page dans le menu de la section Grille de l'inspecteur de propriétés et sélectionnez l'option. La grille de mise en page par défaut est appliquée.

Modification des options de la grille de mise en page

Après avoir appliqué une grille de mise en page à un plan de travail, vous pouvez modifier les paramètres dans la section Grille de l'inspecteur de propriétés.

Nombre de colonnes : pour un design web, il faut généralement définir des grilles à 12 ou 16 colonnes. N’hésitez pas à modifier le nombre de colonnes selon les besoins.

Couleur : cliquez sur l'option de couleur pour modifier la couleur des colonnes de la grille de mise en page. En réglant l'opacité sur 0, vous pouvez supprimer la couleur de fond des colonnes et ne garder que des contours.

Largeur de la gouttière : il s'agit de la distance entre chacune des colonnes. Par défaut, XD calcule une valeur en fonction du nombre de colonnes, des marges et de la largeur totale du plan de travail.

Marges : les marges sont la distance qui sépare la grille de mise en page et le bord du plan de travail, sur les quatre côtés. Vous pouvez les modifier simultanément, par défaut, ou séparément en cliquant sur l'icône Marges différentes de chaque côté dans la section Grille de l'inspecteur de propriétés.

Conseil : pour rétablir les options par défaut de la grille de mise en page, cliquez sur le bouton Paramètres par défaut dans la section Grille de l'inspecteur de propriétés.

Enregistrement et application d’une grille de mise en page personnalisée

  • Pour enregistrer votre grille de mise en page actuelle comme grille par défaut, afin de pouvoir l'appliquer à n'importe quel plan de travail, vous pouvez cliquer sur le bouton Définir par défaut dans la section Grille de l'inspecteur de propriétés. Les options de la grille de mise en page des plans de travail sélectionnés sont désormais enregistrées comme paramètres par défaut.
  • Vous pouvez les appliquer à tout plan de travail sélectionné, avec grille de mise en page, en cliquant sur le bouton Paramètres par défaut dans la section Grille de l'inspecteur de propriétés.
Cette page vous a-t-elle été utile ?