Comment créer une grille dans Figma – la mise en page simplifiée

Apprenez à créer des grilles dans Figma à l’aide des grilles de mise en page pour les colonnes, les lignes ou les carrés. Idéal pour la conception d’interface, l’espacement et un alignement au pixel près.

Créez de superbes vidéos produit et des documents avec l’IA

Ce tutoriel a été créé avec Trupeer en moins de 5 minutes

Créez gratuitement

Ce guide vous accompagne à travers le processus d’ajout et de personnalisation des lignes de grille dans Figma, afin de garantir une mise en page de conception 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 conception.

1. Sélectionnez un cadre

Cliquez sur le cadre auquel vous souhaitez appliquer la grille. Les grilles de mise en page sont uniquement disponibles pour les cadres, et non pour les éléments individuels.

2. Ajoutez une grille de mise en page

Accédez à la barre latérale de droite (panneau Design), faites défiler jusqu’à la section Grille de mise en page, puis cliquez sur l’icône « + ».

3. Choisissez un type de grille

Figma propose trois types de grille :

Grille (carrés uniformes)
Colonnes (utile pour les mises en page responsives)
Lignes (adapté à l’alignement horizontal)

Utilisez le menu déroulant pour sélectionner le type de grille de votre choix.

4. Personnalisez les paramètres de la grille

Nombre de colonnes/lignes : définissez le nombre de colonnes ou de lignes.
Gouttière : ajustez l’espacement entre les colonnes/lignes.
Marge : définissez l’espace intérieur entre le cadre et la grille.
Alignement : choisissez comment les colonnes ou les lignes s’alignent :
- Colonnes : gauche, centre, droite ou étirer
- Lignes : haut, centre, bas ou étirer
Couleur & opacité : modifiez la couleur et la transparence des lignes de grille pour les adapter à votre design.

5. Activez ou désactivez la visibilité de la grille

Utilisez le raccourci Maj + 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 par apprendre - « Comment ajouter des lignes de grille dans Figma ». Ouvrez votre fichier Figma. Sélectionnez l’option de 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 du 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

Accédez aux paramètres de la grille du 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-la 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 aux exigences de votre 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, finalisez la personnalisation de votre 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, tout en conservant les paramètres de grille intacts. Enregistrez-la avec le nom d’un style particulier, afin qu’il soit pertinent 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 de pro pour créer une grille dans Figma

Utilisez les grilles de mise en page pour la cohérence :
Sélectionnez le frame ou le plan de travail 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 de l’ensemble de 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 les marges selon vos besoins.
Configurez plusieurs grilles :
Vous pouvez ajouter plusieurs grilles à un même frame. Utilisez différents types de grilles pour travailler sur différents aspects de votre design, par exemple une grille en colonnes pour le texte et une grille standard pour l’alignement général.
Utilisez la grille pour un design responsive :
Pour un design web ou mobile responsive, utilisez une grille en colonnes et ajustez la largeur de la grille ainsi que la gouttière pour l’adapter à différentes tailles d’écran. Cela aide à maintenir les proportions et la lisibilité sur plusieurs appareils.
Activez ou désactivez la visibilité de la grille :
Basculer la visibilité des grilles en appuyant sur Maj + G. Cela vous permet d’afficher et de masquer rapidement les grilles sans modifier le design.

Erreurs courantes et comment les éviter lors de l’ajout de lignes de grille dans Figma

Espacement de grille incorrect :
Correctif : vérifiez de nouveau les paramètres de votre grille et assurez-vous que l’espacement et les colonnes/lignes conviennent à votre design. Utilisez des mesures cohérentes pour maintenir l’alignement.
Surcharge du frame avec des grilles :
Correctif : évitez d’ajouter trop de grilles ou d’utiliser des grilles qui ne conviennent pas au contenu. Tenez-vous à un seul style de grille (par ex. des colonnes), sauf si vous avez un besoin précis pour différentes grilles.
Éléments de design mal alignés :
Correctif : utilisez la grille pour aligner vos éléments, mais assurez-vous que vos éléments de design sont parfaitement alignés sur la grille. Zoomez pour vérifier que tout s’accroche correctement aux lignes de grille.
Mise en page peu claire pour les visiteurs :
Correctif : si vous concevez pour que d’autres personnes le voient, assurez-vous que vos grilles ne surchargent pas le design. Utilisez les grilles uniquement comme guide et désactivez-les pour l’export final.
Confusion sur la visibilité de la grille :
Correctif : si les grilles sont trop distrayantes, utilisez le curseur d’opacité dans le panneau Grilles de mise en page pour réduire leur visibilité tout en les gardant utiles pour l’alignement.

FAQ courantes pour ajouter des grilles dans Figma

Puis-je ajouter des grilles à une partie spécifique de mon design, comme une image ?
Les grilles s’appliquent aux cadres et aux plans de travail dans Figma. Pour concentrer la grille sur une partie précise, créez un cadre autour de la zone souhaitée et appliquez la grille à ce cadre.
Comment puis-je personnaliser la taille de la grille ?
Vous pouvez personnaliser la taille, l’espacement et l’entretoise de la grille en ajustant les valeurs dans la section Grilles de mise en page du panneau de droite lorsque vous avez sélectionné un cadre.
Comment masquer les grilles lors de la présentation ou de l’exportation ?
Il suffit de désactiver les grilles en appuyant sur Shift + G ou en décochant l’option Grilles de mise en page dans le panneau de droite pour les retirer de l’affichage et de l’exportation.
Les grilles sont-elles imprimables dans Figma ?
Non, les grilles ne sont pas imprimées ni exportées par défaut. Vous pouvez désactiver leur visibilité avant d’exporter votre design afin de vous assurer qu’elles n’apparaissent pas dans le rendu final.
Puis-je utiliser des grilles pour le design mobile ou web ?
Oui, les grilles sont extrêmement utiles pour le design web et mobile. Vous pouvez utiliser des grilles de colonnes pour aligner les éléments, afin de garantir que votre design s’adapte bien à différentes tailles d’écran.
Voici le guide étape par étape pour ajouter des grilles dans Figma.
Comment enregistrer l’écran sur Mac
Pour enregistrer l’écran sur un Mac, vous pouvez utiliser Trupeer AI. Il permet de capturer l’écran entier et offre des capacités d’IA telles que l’ajout d’avatars IA, l’ajout de voix off, ainsi que le zoom avant et arrière dans la vidéo. Grâce à la fonctionnalité de traduction vidéo par IA de Trupeer, vous pouvez traduire la vidéo dans 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 par IA. Trupeer AI est un outil d’enregistrement d’écran par IA qui vous aide à créer des vidéos avec plusieurs avatars et vous aide aussi à 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 barre de jeu intégrée (Windows + G) ou un outil IA avancé comme Trupeer AI pour des fonctionnalités plus poussées telles que des avatars IA, la voix off, la traduction, etc.
Comment ajouter une voix off à une vidéo ?
Pour ajouter une voix off aux vidéos, téléchargez l’extension Chrome trupeer ai. Une fois inscrit, téléchargez votre vidéo avec la voix, choisissez la voix off souhaitée dans Trupeer, puis exportez votre vidéo modifiée.
Comment zoomer sur un enregistrement d’écran ?
Pour zoomer pendant un enregistrement d’écran, utilisez les effets de zoom dans Trupeer AI, qui vous permettent de zoomer avant et arrière à des moments précis, renforçant ainsi l’impact visuel de votre contenu vidéo.