Grilles de mise en page, lignes et colonnes dans Figma : structuration de vos conceptions

Ajouter une grille

Sélection d'une frame et clic sur l’icône plus dans la section Grille de mise en page du panneau de conception pour ajouter une grille. Par défaut, les grilles sont définies sur une grille uniforme de 10 pixels.

Personnalisation des paramètres de la grille

• Type de grille : choix entre colonnes, lignes ou grille ;
• Nombre : ajustement du nombre de colonnes ou de lignes ;
• Apparence : modification de la couleur et de l’opacité ;
• Paramètres de type : définition des colonnes en étirement ou fixation à gauche, au centre ou à droite ;
• Marges et gouttières : définition de l’espacement entre les bords du cadre (marges) et les colonnes/lignes (gouttières).

Options avancées

• Ajout de plusieurs grilles à un même cadre en cliquant à nouveau sur l’icône plus.
• Modification ou suppression des grilles via le panneau des paramètres ou l’icône moins.
• Application de styles de grille prédéfinis via l’icône à quatre points ou importation de grilles depuis la bibliothèque de l’équipe.

Utilisation des règles et repères dans Figma

Activer les règles

Accès aux règles via Affichage > Règles ou avec le raccourci Maj + R. Elles apparaissent en haut et à gauche du cadre, avec des unités mesurées en pixels.

Ajouter des repères

Pour créer des repères, glisser depuis la règle et les positionner pour l’alignement. Les repères peuvent être supprimés en les faisant glisser vers la règle.

Bonnes pratiques

Combinaison des grilles et repères pour plus de précision et pour maintenir des mises en page organisées. Des alignements propres améliorent la clarté du design et l’expérience utilisateur globale.