'%3E%3Crect x='-4.10352' y='0.1875' width='171.875' height='171.875' rx='85.9375' fill='%230C5238'/%3E%3Crect x='82.5566' y='-9.2085' width='133.93' height='133.93' rx='22.7014' transform='rotate(45 82.5566 -9.2085)' fill='%23F79CFF'/%3E%3Crect x='144.375' y='23.677' width='123.75' height='123.75' rx='61.875' transform='rotate(90 144.375 23.677)' fill='%23FF6D38'/%3E%3Crect x='106.562' y='26.198' width='119.396' height='48.125' rx='24.0625' transform='rotate(90 106.562 26.198)' fill='%23252525'/%3E%3Crect x='106.562' y='62.8645' width='48.125' height='48.125' transform='rotate(90 106.562 62.8645)' fill='%2312A720'/%3E%3Cpath d='M106.553 86.927L99.5232 103.942L82.5526 110.99L65.5819 103.942L58.5524 86.927L65.5819 69.9122L82.5526 62.8645L99.5233 69.9122L106.553 86.927Z' fill='%23FFFF00'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3971_7584'%3E%3Crect width='165' height='92.8125' fill='white' transform='translate(0 0.1875)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A)
Création de grilles de mise en page avec des grilles, des colonnes et des lignes
Lors du design de l'écran, un certain nombre de mises en page sont à traiter. La précision et la flexibilité sont nécessaires pour faciliter l'adaptation de nos designs.
La grille de pixels nous donne la précision et le contrôle du positionnement. Une grille de mise en page nous offre une plus grande flexibilité dans la mise en œuvre de nos designs.
Pour en savoir plus sur les grilles de mise en page
- Consultez nos réponses aux Foire aux questions au bas de cette page.
- Pour en savoir plus sur l'utilisation des grilles de mise en page, consultez notre blog : Grid Pro Quo.
Que sont les grilles de mise en page
Les grilles de mise en page nous aident à aligner des objets dans un cadre, en offrant une structure visuelle à nos designs. Elles leur permettent de conserver logique et cohérence sur les différentes plates-formes et périphériques.
Les grilles de mise en page ne dépendent pas de la grille de pixels, ne dépendant donc pas d'une résolution spéciale ou de dimensions spécifiques.
Vous ne pouvez appliquer des grilles de mise en page qu'aux cadres, de premier niveau ou imbriqués dans un autre cadre.
Les grilles de mise en page vous permettent :
- d'établir une cohérence sur plusieurs plates-formes,
- d'avoir moins de décisions à prendre lors de la définition des mises en page,
- de réduire le temps nécessaire à la définition des mises en page pour les maquettes ou les wireframes,
- de prendre en charge diverses techniques de mise en page comme les galeries, les icônes ou les mises en page complètes.
Remarque : Pour en savoir plus sur l'utilisation des systèmes de grille avec Figma, consultez le blog : Grid Systems for Screen Design
Application de grilles de mise en page
Vous pouvez appliquer une grille de mise en page à n'importe quel cadre. N'oubliez pas que les composants sont également des cadres, il est donc possible de leur en appliquer également.
Vous trouverez les paramètres de la grille de mise en page dans la barre latérale de droite :
Pour appliquer une grille de mise en page :
- Sélectionnez le cadre dans le canevas ou le panneau Calques de la barre latérale gauche :
- Cliquez sur à côté des grilles de mise en page dans la barre latérale à droite :
- Une grille uniforme sera appliquée au cadre par défaut :
- Vous pouvez ensuite cliquer sur pour ouvrir les paramètres de la grille de mise en page et mettre à jour les propriétés :
Propriétés de la grille de mise en page
Trois types de grille de mise en page sont disponibles : une Grille carrée uniforme, des Colonnes et des Lignes.
Les grilles uniformes vous permettent de définir la taille et la couleur de la grille. Les grilles carrées sont idéales pour les situations nécessitant une grande précision, comme la conception de symboles ou d'icônes.
Les grilles colonnes et lignes vous permettent de définir la largeur ou la hauteur de la grille, ainsi que la rainure et les marges. Elles sont parfaites pour concevoir des interfaces réactives pour le Web et les mobiles.
Vous pouvez utiliser les grilles seules ou les combiner pour prendre en charge des mises en page plus complexes.
En savoir plus sur Associer des grilles de mise en page ↓
Modification de la grille de mise en page
Pour sélectionner le type de grille :
- Cliquez sur dans la barre latérale à droite :
- Cliquez sur dans la fenêtre de propriétés de la grille de mise en page :
- Vous pouvez choisir :
- Grille uniforme,
- Grille avec Colonnes,
- Grille avec Lignes.
Propriétés de grille uniforme
Si vous sélectionnez une grille uniforme, vous pouvez choisir sa taille, en déterminant le nombre de pixels contenus dans chaque carré.
Par exemple : dans une grille 10pt par défaut, chaque carré de la grille contient 100 pixels (10 px par 10 px).
- Cliquez sur pour ouvrir les paramètres de la grille de mise en page.
- Mettez à jour le champ Taille en fonction des dimensions souhaitées :
- Cliquez sur pour fermer la fenêtre et revenir au canevas :
Propriétés de colonne et de ligne
Vous pouvez appliquer des grilles de mise en page sous forme de colonnes, de lignes ou les deux. Les grilles de colonnes et de lignes vous offrent un meilleur contrôle et une plus grande flexibilité en matière de mise en page.
Vous pouvez définir les propriétés suivantes de votre grille :
Propriétés de grille
- Le Nombre détermine le nombre de colonnes ou de lignes de la grille.
- La Rainure définit la distance entre chaque colonne ou ligne.
- La valeur Marge correspond à la distance à partir du bord de laquelle la colonne ou la ligne commence. Cela s'applique uniquement aux grilles Étirer.
- Le Décalage correspond à la distance à partir de laquelle la colonne ou la ligne commence en haut ou à gauche. Cela s'applique aux lignes définies en haut et aux colonnes définies à gauche.
Type de grille
Il existe deux types différents de grilles de mise en page : Fixe et Extensible.
Pour les grilles de mise en page Fixe, vous pouvez déterminer les valeurs Largeur (des colonnes) ou Hauteur (des lignes), ainsi que le Nombre de colonnes ou de lignes.
La grille de mise en page peut être fixée à :
- En haut ou au Centre du cadre pour les Lignes
- À gauche ou au Centre du cadre pour les Colonnes
Les grilles Étendre s'adaptent à la taille du cadre, ce qui permet à vos designs de répondre en conséquence lorsque le cadre est redimensionné.
La valeur Largeur ou Hauteur de la grille sera automatiquement déterminée en fonction de la taille du cadre.
Couleur
La couleur par défaut d'une grille de mise en page est le rouge (#FF0000), avec une opacité de 10 %.
Vous pouvez modifier la Couleur et l'Opacité de n'importe quelle grille de mise en page :
- Cliquez sur dans la barre latérale à droite.
- Cliquez sur la nuance de Couleur :
- Utilisez le sélecteur de couleurs pour sélectionner une nouvelle couleur :
- Ajustez l'opacité si nécessaire.
Combiner les grilles de mise en page
Comme nous l'avons mentionné ci-dessus, vous pouvez appliquer de nombreuses grilles de mise en page à un seul cadre, ce qui s'avère pratique lors de l'élaboration de mises en page plus complexes.
Par exemple : Vous pouvez appliquer les grilles de mise en page Colonne et Ligne pour un meilleur contrôle de l'alignement vertical et horizontal.
- Sélectionnez le cadre auquel vous souhaitez ajouter une autre grille de mise en page.
- Cliquez sur à côté de Grilles de mise en page dans la barre latérale de droite.
- Sélectionnez la grille de mise en page dans la liste déroulante.
- Définissez d'autres propriétés pertinentes.
- Répétez l'opération pour ajouter d'autres grilles de mise en page au cadre.
Activer/désactiver les grilles de mise en page
Vous pouvez activer/désactiver la visibilité de vos grilles de mise en page. Cela est idéal lorsque vous devez masquer vos grilles de mise en page, sans les supprimer entièrement.
Les grilles de mise en page fonctionnent toujours, même lorsqu'elles ne sont pas visibles.
Activer/désactiver toutes les grilles de mise en page
Vous pouvez activer/désactiver simultanément la visibilité de toutes les grilles de mise en page de votre fichier.
- Cliquez sur le pourcentage de zoom dans le coin supérieur droit de votre écran. Le menu Paramètres d'affichage s'ouvre.
- Si la case n'est pas cochée à côté de l'option Grilles de mise en page, cliquez sur cette option pour les afficher.
- En revanche, si elle est cochée, cliquez sur Grilles de mise en page pour les masquer :
- Vous pouvez également utiliser les raccourcis clavier pour activer ou désactiver les grilles de mise en page :
- Mac : ⌃ Control – G
- Windows : Control + Maj + 4
Activer/désactiver de grilles de mise en page individuelles
Si vous souhaitez activer ou désactiver une seule grille de mise en page, vous pouvez le faire dans le panneau Propriétés.
- Sélectionnez le cadre approprié.
- Dans la section Grilles de mise en page de la barre latérale située à droite,
- Cliquez sur l'icône à côté de la grille de mise en page pour la désactiver :
- Cliquez sur à côté de la grille de mise en page pour l'activer :
Styles de grille de mise en page
Une fois mise au point la grille de mise en page idéale, vous pouvez créer un style pour la réutiliser dans vos designs.
Pour en savoir plus sur les styles de création →
Créer un style de mise en page
- Sélectionnez un cadre dans le canevas avec la ou les grilles de mise en page appliquées.
- Cliquez sur dans la section Grille de mise en page de la barre latérale de droite.
- Cliquez sur dans la fenêtre Styles de grille :
- Attribuez un nom marquant au style de grille de mise en page :
- Cliquez sur Créer un style pour terminer le processus.
Appliquer un style de mise en page
- Créez ou sélectionnez un cadre dans le canevas.
- Dans la barre latérale de droite, cliquez sur.
- Sélectionnez un style de grille de mise en page dans la fenêtre :
- La grille de mise en page sera appliquée au cadre sélectionné :
Remarque : Les Composants associés seront déterminés en suivant les étapes ci-dessous :
- Sélectionnez les calques que vous souhaitez copier.
- Cliquez sur la grille de mise en page dans la barre latérale de droite.
- Lorsqu'elle est mise en surbrillance, utilisez les raccourcis clavier pour copier la grille de mise en page :
- Mac : Commande ⌘ + C
- Windows : Ctrl + C
- Sélectionnez le cadre auquel vous souhaitez appliquer la grille de mise en page.
- Utilisez le raccourci clavier pour coller la grille de mise en page :
- Mac : Commande ⌘ + V
- Windows : Ctrl + V
Travailler avec des grilles et des contraintes
Pour les conceptions plus complexes, la précision et la flexibilité sont essentielles pour garantir le comportement de nos designs lorsqu'ils sont redimensionnés.
Les contraintes permettent de créer une structure de base pour les objets placés dans un cadre. Lorsqu'elles sont associées à des grilles de mise en page, elles constituent la structure d'un système de mise en page puissant.
Pour en savoir plus sur l'association de grilles et de contraintes →
Grille à 8 points
Le système de grille à 8 points est un outil populaire pour la conception de mises en page d'interface utilisateur. Il implique l'utilisation de multiples de 8 pour définir le positionnement des objets dans votre design.
Vous pouvez utiliser ce système lors de la conception de contraintes fixes, comme une application mobile. Mais il peut également s'avérer utile lors de la conception de mises en page réactives.
Il existe deux méthodes courantes pour mettre en œuvre le système à 8 points :
- Grille rigide : elle implique de placer des objets sur une grille fixe avec des incréments de 8 points. Dans Figma, il faudra appliquer une grille uniforme au cadre d'une taille 8.
- Grille souple : elle implique de placer des objets à distance les uns des autres, divisibles par 8. Il faudra appliquer une grille de mise en page de ligne ou de colonne avec des propriétés divisibles par 8.
Pour en savoir plus sur la grille 8 points voir ce post Spec.fm →
Foire aux questions
Puis-je activer ou désactiver toutes les grilles de mise en page en même temps ?
Oui. Cette opération peut être effectuée à partir du menu Paramètres d'affichage dans le coin supérieur droit de Figma.
Pourquoi mes grilles de mise en page ne s'affichent-elles pas ?
Deux raisons peuvent expliquer pourquoi une grille de mise en page ne s'affiche pas :
- La grille de mise en page a été désactivée dans la barre latérale de droite.
- Les grilles de mise en page ont été désactivées de manière générale.
- Le calque sélectionné n'est pas un cadre. En effet, les grilles de mise en page ne peuvent être appliquées qu'aux cadres.
- Le cadre a subi une rotation. Avant d'appliquer une grille de mise en page, assurez-vous que la rotation des objets soit définie sur 0º.
Comment puis-je copier les grilles de mise en page ?
Vous pouvez copier une seule grille de mise en page et l'appliquer à un autre Cadre. Vous pouvez également créer un style de grille de mise en page qui peut être réutilisé dans vos designs.
Pour en savoir plus reportez-vous à notre section Styles de grille de mise en page ↑