Start free trial

Comment créer une grille dans Figma – Disposition simplifiée

Ce guide vous guide à travers le processus d'ajout et de personnalisation des lignes de grille dans Figma, garantissant une mise en page de design bien organisée.
Suivez les étapes ci-dessous pour ajouter efficacement des lignes de grille à vos projets Figma.

Figma vous permet d'appliquer des grilles de mise en page aux cadres, ce qui facilite l'alignement et l'organisation des éléments de design.

1. Sélectionnez un cadre

Cliquez sur le cadre auquel vous souhaitez appliquer la grille. Les grilles de mise en page ne sont disponibles que pour les cadres - pas pour les éléments individuels.

2. Ajoutez une grille de mise en page

Accédez à la barre latérale droite (panneau de design), faites défiler jusqu'à la section Grille de mise en page et cliquez sur l'icône "+".

3. Choisissez un type de grille

Figma propose trois types de grilles :

Grille (carrés uniformes)
Colonnes (utile pour les mises en page réactives)
Lignes (bon pour l'alignement horizontal)

Utilisez le menu déroulant pour sélectionner votre type de grille préféré.

4. Personnalisez les paramètres de la grille

Nombre de Colonnes/Lignes : Définissez le nombre de colonnes ou de lignes.
Interligne : Ajustez l'espacement entre les colonnes/lignes.
Marge : Définissez le rembourrage entre le cadre et la grille.
Alignement : Choisissez comment les colonnes ou les lignes s'alignent :
- Colonnes : Gauche, Centre, Droite ou Étendre
- Lignes : Haut, Centre, Bas ou Étendre
Couleur & Opacité : Changez la couleur des lignes de la grille et la transparence pour s'adapter à votre design.

5. Basculer la visibilité de la grille

Utilisez le raccourci Shift + G pour afficher ou masquer la grille de mise en page à tout moment.

Guide étape par étape : Comment créer une grille dans Figma

Étape 1

Commençons à apprendre - 'Comment ajouter des lignes de grille dans Figma'. Ouvrez votre fichier Figma. Sélectionnez l'option cadre pour créer un nouveau cadre.

Lets begin learning - 'How to add gridlines in Figma'. Open your Figma file. Select the frame option to create a new frame.

Étape 2

Si vous n'avez pas encore créé de cadre, assurez-vous d'en créer un et de définir ses dimensions en conséquence. Accédez aux paramètres de la grille de calque.

If you haven't created a frame yet, ensure you create one and set its dimensions accordingly. Navigate to the layer grid settings.

Étape 3

Dans les paramètres de la grille de calque. Dans les paramètres de la grille, choisissez le type de grille que vous préférez, comme une grille carrée, et personnalisez-le selon vos besoins.

In the Navigate to the layer grid settings. In the grid settings, choose the grid type you prefer, such as a square grid, and customize it to your needs.

Étape 4

Ajustez les colonnes et les lignes dans les paramètres de la grille pour répondre à vos exigences de design.

Adjust the columns and rows within the grid settings to suit your design requirements.

Étape 5

Après avoir défini le nombre de lignes et de colonnes, procédez à la finalisation de votre personnalisation de grille.

After setting the number of rows and columns, proceed to finalize your grid customization.

Étape 6

Cliquez sur 'Créer un style' pour enregistrer votre grille en tant que fichier avec les paramètres de grille restant intacts. Enregistrez-le avec le nom d'un style particulier - afin qu'il ait un sens pour le projet et que vous puissiez l'utiliser à l'avenir.

Click 'Create Style' to save your grid as a file with grid settings remaining intact. Save it with the name of a particular style - so that it makes sense for the project and you can use it in future.

Conseils pour créer une grille dans Figma

Utilisez des grilles de mise en page pour la cohérence:
Sélectionnez le cadre ou l'artboard auquel vous souhaitez ajouter des lignes de grille. Dans le panneau de droite, sous la section Grille de Mise en Page, cliquez sur l'icône + pour ajouter une grille. Cela garantit la cohérence dans votre design et aide à aligner les éléments avec précision.
Personnalisez le type de grille:
Figma vous permet de choisir entre Grille, Colonnes, et Lignes pour votre mise en page. Sélectionnez Grille pour une grille uniforme, Colonnes pour une mise en page basée sur des colonnes, ou Lignes pour une structure horizontale. Personnalisez l'espacement, le nombre et la marge selon vos besoins.
Mettez en place plusieurs grilles:
Vous pouvez ajouter plusieurs grilles à un seul cadre. Utilisez différents types de grilles pour travailler sur différents aspects de votre design, comme utiliser une grille de colonnes pour le texte et une grille standard pour l'alignement général.
Utilisez la grille pour un design réactif:
Pour un design web ou mobile réactif, utilisez une grille de colonnes et ajustez la largeur et l'interligne de la grille pour s'adapter à différentes tailles d'écran. Cela aide à maintenir la proportion et la lisibilité sur plusieurs appareils.
Basculez la visibilité de la grille:
Basculez la visibilité des grilles en appuyant sur Shift + G. Cela vous permet de visualiser et de masquer rapidement les grilles sans changer le design.

Pièges courants et comment les éviter pour ajouter des lignes de grille dans Figma

Espacement de grille incorrect:
Correction: Vérifiez vos paramètres de grille et assurez-vous que l'espacement et les colonnes/lignes sont appropriés pour votre design. Utilisez des mesures cohérentes pour maintenir l'alignement.
Surchargement du cadre avec des grilles:
Correction: Évitez d'ajouter trop de grilles ou d'utiliser des grilles qui ne conviennent pas au contenu. Restez sur un style de grille (par exemple, colonnes) à moins que vous ayez un besoin spécifique pour différentes grilles.
Éléments de design désalignés:
Correction: Utilisez la grille pour aligner vos éléments, mais assurez-vous que vos éléments de design sont parfaitement alignés avec la grille. Zoomez pour vous assurer que tout s'aligne correctement avec les lignes de la grille.
Mise en page peu claire pour les spectateurs:
Correction: Si vous concevez pour d'autres à voir, assurez-vous que vos grilles ne surchargent pas le design. Utilisez des grilles uniquement comme guide et éteignez-les pour l'exportation finale.
Confusion de visibilité de la grille:
Correction: Si les grilles sont trop distrayantes, utilisez le curseur Opacité dans le panneau des Grilles de Mise en Page pour réduire la visibilité de la grille tout en les gardant utiles pour l'alignement.

Questions fréquentes concernant l'ajout de lignes de grille dans Figma

Puis-je ajouter des lignes de grille à une partie spécifique de mon design, comme une image ?
Les grilles sont appliquées aux cadres et aux artboards dans Figma. Pour centrer la grille sur une partie spécifique, créez un cadre autour de la zone que vous souhaitez et appliquez la grille à ce cadre.
Comment personnaliser la taille de la grille ?
Vous pouvez personnaliser la taille de la grille, l'espacement et l'interligne en ajustant les valeurs dans la section Grilles de Mise en Page dans le panneau de droite lorsque vous avez sélectionné un cadre.
Comment masquer les lignes de grille lors de la présentation ou de l'exportation ?
Il suffit de basculer les lignes de grille en appuyant sur Shift + G ou de décocher l'option Grilles de Mise en Page dans le panneau de droite pour les retirer de la vue et de l'exportation.
Les lignes de grille sont-elles imprimables dans Figma ?
Non, les lignes de grille ne sont pas imprimées ou exportées par défaut. Vous pouvez basculer leur visibilité avant d'exporter votre design pour vous assurer qu'elles n'apparaissent pas dans la sortie finale.
Puis-je utiliser des lignes de grille pour un design mobile ou web ?
Oui, les lignes de grille sont extrêmement utiles pour le design web et mobile. Vous pouvez utiliser des grilles de colonnes pour aligner les éléments, en veillant à ce que votre design s'adapte bien à différentes tailles d'écran.
Ceci est le guide étape par étape pour ajouter des lignes de grille dans Figma.
Comment enregistrer l'écran sur un mac ?
Pour enregistrer l'écran sur un Mac, vous pouvez utiliser Trupeer AI. Il vous permet de capturer l'intégralité de l'écran et propose des fonctionnalités d'IA telles que l'ajout d'avatars IA, l'ajout de voix off, l'ajout de zoom avant et arrière dans la vidéo. Avec la fonction de traduction vidéo IA de trupeer, vous pouvez traduire la vidéo en plus de 30 langues.
Comment ajouter un avatar IA à un enregistrement d'écran ?
Pour ajouter un avatar IA à un enregistrement d'écran, vous devrez utiliser un outil d'enregistrement d'écran IA. Trupeer AI est un outil d'enregistrement d'écran IA, qui vous aide à créer des vidéos avec plusieurs avatars, et vous aide également à créer votre propre avatar pour la vidéo.
Comment enregistrer l'écran sur Windows ?
Pour enregistrer l'écran sur Windows, vous pouvez utiliser la Game Bar intégrée (Windows + G) ou un outil IA avancé comme Trupeer AI pour des fonctionnalités avancées telles que les avatars IA, la voix off, la traduction, etc.
Comment ajouter une voix off à une vidéo ?
Pour ajouter une voix off à des vidéos, téléchargez l'extension Chrome trupeer ai. Une fois inscrit, téléchargez votre vidéo avec voix, choisissez la voix off souhaitée parmi trupeer et exportez votre vidéo éditée.
Comment puis-je zoomer dans un enregistrement d'écran ?
Pour zoomer pendant un enregistrement d'écran, utilisez les effets de zoom dans Trupeer AI qui vous permettent de zoomer et de dézoomer à des moments spécifiques, améliorant ainsi l'impact visuel de votre contenu vidéo.