Jusqu’ici, nous avons ajouté des calques directement sur le canevas. Mais dès que vous allez commencer à concevoir des interfaces, vous aurez besoin de les organiser et de les structurer. C’est là qu’interviennent les conteneurs !
Figma propose quatre types de conteneurs : la section, le groupe, la frame et l’Auto Layout. Chacun a son utilité et ses spécificités. Dans cet épisode, nous allons découvrir comment les utiliser en pratique pour structurer efficacement vos designs.
Organiser son canevas avec les sections
Commençons par le conteneur le plus simple : la section. La section sert uniquement à organiser visuellement votre espace de travail.
Créer votre première section
Créons ensemble une section pour voir comment elle fonctionne. Vous avez deux façons de faire :
Méthode 1 :
- Cliquez sur l’outil Section dans la barre d’outils ou utilisez le raccourci clavier Shift + S
- Tracez un rectangle sur votre canevas en cliquant et en glissant
- Double-cliquez sur le nom « Section » dans le panneau des calques pour la renommer, par exemple « Mes composants »
Méthode 2 (pour des éléments existants) :
- Sélectionnez plusieurs éléments sur votre canevas
- Clic droit > « Wrap in new section »
Exemple pratique : Imaginez que vous travaillez sur un design system. Créez des sections « Boutons », « Formulaires », « Navigation » pour ranger visuellement vos composants. Cela rendra votre fichier beaucoup plus lisible, surtout quand vous travaillez en équipe !
Grouper des éléments
Passons maintenant au groupe. Le groupe vous permet de rassembler plusieurs éléments pour les manipuler ensemble. Sa particularité ? Sa taille s’adapte automatiquement à son contenu.
Créer un groupe dans Figma
Créons un groupe ensemble :
- Créez deux formes sur votre canevas (par exemple, deux cercles)
- Sélectionnez les deux formes (en cliquant sur la première puis en maintenant Shift et en cliquant sur la seconde)
- Appuyez sur Ctrl + G
Vous remarquerez dans le panneau des calques qu’un nouveau calque « Group » est apparu et que vos deux cercles sont désormais à l’intérieur. Si vous déplacez ce groupe, vous déplacerez les deux cercles à l’intérieur.
Maintenant, essayez de redimensionner le groupe en tirant sur un coin : vous verrez que les éléments à l’intérieur se redimensionnent proportionnellement.
Important : Le groupe n’a pas de dimensions fixes. Si vous regardez dans le panneau de droite, vous verrez que la largeur et la hauteur correspondent exactement à la somme des éléments qu’il contient. Par exemple, si vous avez deux carrés de 100px placés côte à côte, votre groupe fera 200px de largeur.
Limitation du groupe
Un groupe ne peut pas avoir de propriétés visuelles (pas de couleur de fond, pas de bordure). Il sert uniquement à regrouper des éléments. Par exemple, si vous dessinez une icône composée de plusieurs formes, le groupe est parfait pour les rassembler et les déplacer ensemble.
Concevoir des interfaces avec les frames
Les frames sont très importantes dans Figma. C’est avec les frames que vous créerez toutes vos interfaces. Contrairement au groupe, la frame a des dimensions fixes et peut avoir des propriétés visuelles.
Créer votre première frame
Créons ensemble une frame pour un écran mobile :
- Appuyez sur la touche F de votre clavier (ou sélectionnez l’outil Frame dans la barre d’outils)
- Regardez dans le panneau de droite : vous voyez une liste de formats prédéfinis (Phone, Tablet, Desktop, etc.)
- Cliquez sur « Phone » puis sur « iPhone 14 Plus » par exemple
Une frame aux dimensions d’un iPhone 14 Plus apparaît sur votre canevas ! C’est votre écran de travail.
Vous pouvez créer une frame de taille personnalisée en appuyant sur F puis en traçant directement sur le canevas, comme vous le feriez pour une forme.
Donner des propriétés à votre frame
Maintenant que vous avez une frame, essayons de lui donner des propriétés visuelles :
- Sélectionnez votre frame (cliquez dessus ou sur son nom dans le panneau des calques)
- Dans le panneau de droite, trouvez la section « Fill » (Remplissage)
- Cliquez sur le carré de couleur et choisissez une couleur de fond, par exemple une couleur foncée pour créer une interface sombre (#1F1F1F)
Votre frame a maintenant une couleur de fond ! Vous pouvez également lui ajouter :
- Une bordure (section « Stroke »)
- Des coins arrondis (« Corner radius »)
- Des effets comme des ombres (section « Effects »)
Propriétés avancées des frames
Les frames possèdent plusieurs propriétés spéciales. Explorons-les ensemble :
Clip content (Rogner le contenu)
- Créez un grand rectangle qui dépasse de votre frame
- Dans le panneau de droite, cochez « Clip content »
- Tout ce qui dépasse de la frame est maintenant masqué
Cette propriété est très utile pour créer des effets de scroll dans vos prototypes ou pour créer des cartes avec des images qui dépassent volontairement.
Layout Grid (Grille de mise en page)
Les frames peuvent afficher des grilles pour vous aider à aligner vos éléments et ainsi vous permettre de structurer votre contenu.
Ne voyez pas la grille comme une contrainte, mais plutôt comme une alliée ! Elles sont un atout lors de la construction et du développement, mais aussi pour l’utilisateur en créant cohérence et familiarité.
Essayons :
- Sélectionnez votre frame
- Cherchez « Layout grid » dans le panneau de droite
- Cliquez sur le « + » pour ajouter une grille
Une grille apparaît sur votre frame ! Vous pouvez choisir une grille en colonnes, en lignes ou en carrés selon vos besoins. Vous pouvez combiner les grilles pour vous en servir de repères.
Comment choisir sa grille ? Il n’y a pas de règle, tout dépend de votre projet de design. Plus votre grille aura de colonnes, plus elle vous permettra de créer une interface dense tout en vous offrant de la flexibilité. À l’inverse, une grille avec peu de colonnes vous permettra de créer une interface plus minimaliste. Un standard est l’utilisation d’une grille de 12 colonnes sur desktop.
N’hésitez pas à enregistrer vos grilles pour les réutiliser facilement ! Pour enregistrer une grille, cliquez sur le bouton « Apply Style » (quatre cercles). Nommez votre grille et cliquez sur « Create style« . Vous pouvez également partager des grilles entre des fichiers.
J’ai créé un fichier « Bootstrap 5 Grids » dans lequel j’ai enregistré deux grilles en tant que styles (desktop HD + Mobile) et publié ce fichier en tant que librairie. Cela me permet d’appeler très facilement mes grilles dans un nouveau projet.
Contraintes (Constraints)
Les contraintes (Constraints) définissent comment un élément se comporte quand vous redimensionnez sa frame parente. C’est essentiel pour créer des designs responsives. Testons ensemble :
- Créez une frame et rajoutez une forme à l’intérieur, par exemple une étoile.
- Sélectionnez l’étoile
- Dans le panneau de droite, trouvez la section « Constraints«
- Vous voyez deux lignes : une pour l’horizontal et une pour le vertical
- Pour l’horizontal, sélectionnez « Right » (à droite)
- Pour le vertical, sélectionnez « Top » (en haut)
Maintenant, essayez de redimensionner votre frame (tirez sur le coin en maintenant Cmd/Ctrl pour garder les proportions). Vous remarquez que l’étoile reste collée en haut à droite, quelle que soit la taille de la frame !
Les options de contraintes :
- Horizontal : Left (gauche), Center (centre), Right (droite), Left and Right (étirement horizontal)
- Vertical : Top (haut), Center (centre), Bottom (bas), Top and Bottom (étirement vertical)
Découvrir l’Auto Layout
L’Auto Layout, c’est LA fonctionnalité indispensable que vous devez connaître pour le design d’interface ! Cette fonctionnalité vous permet de créer des composants flexibles et dynamiques. Vous pouvez créer des boutons et autres composants qui s’adaptent à la taille de leur contenu, mais aussi des listes et menus que vous pourrez facilement réorganiser.
Créer votre premier Auto Layout
Testons l’Auto Layout avec un exemple concret :
- Créez trois carrés de même taille sur votre canevas, côte à côte
- Sélectionnez les trois rectangles
- Appuyez sur Shift + A
Vous remarquez plusieurs choses :
- Vos rectangles sont maintenant dans un conteneur Auto Layout
- L’espacement entre eux est régulier
- Dans le panneau de droite, de nouvelles propriétés sont apparues
Maintenant, la magie : essayez de supprimer l’un des rectangles (sélectionnez-le et appuyez sur Suppr). Le conteneur se réajuste automatiquement ! Ajoutez-en un nouveau (copiez-collez un rectangle dans l’Auto Layout) : le conteneur s’agrandit automatiquement pour l’accueillir.
Comment reconnaître un Auto Layout ? Dans le panneau des calques, cherchez l’icône spéciale à côté du nom : elle ressemble à trois barres horizontales empilées. C’est le signe qu’une frame utilise l’Auto Layout.
L’Auto Layout mérite tout un épisode ! C’est un sujet vaste avec de nombreuses subtilités. Nous l’explorons en détail dans l’épisode suivant : Qu’est-ce que l’Auto Layout ? (à venir) où vous apprendrez toutes ses possibilités avancées.
Tableau comparatif : quel conteneur utiliser ?
Maintenant que vous avez testé les quatre conteneurs, voici un récapitulatif pour vous aider à choisir :
| Fonctionnalité | Section | Groupe | Frame | Auto layout |
|---|---|---|---|---|
| Dimensions fixes | ✕ | ✕ | ✓ | ✓ |
| Propriétés visuelles (fond, bordure) | ✕ | ✕ | ✓ | ✓ |
| Contraintes (constraints) | ✕ | ✕ | ✓ | ✓ |
| Ajustement automatique au contenu | ✕ | ✓ | ✕ | ✓ |
| Espacement automatique | ✕ | ✕ | ✕ | ✓ |
| Utilisation | Organisation | Regroupement simple | Interfaces, sliders | Layouts dynamiques |
En résumé
Vous venez de découvrir les quatre types de conteneurs de Figma :
- La section pour organiser visuellement votre canevas (Shift + S)
- Le groupe pour rassembler des éléments simples (Ctrl/Cmd + G)
- La frame pour créer des interfaces avec des dimensions fixes (touche F)
- L’Auto Layout pour des conteneurs intelligents qui s’adaptent au contenu (Shift + A)
Avec la pratique, vous saurez instinctivement quel conteneur utiliser selon vos besoins. La règle générale : utilisez des frames pour vos écrans et interfaces, des groupes pour regrouper des formes simples, l’Auto Layout dès que vous voulez de la flexibilité, et des sections pour organiser votre espace de travail.
Dans le prochain épisode, nous plongerons en profondeur dans l’Auto Layout pour maîtriser toutes ses subtilités et créer des interfaces vraiment responsives !
Espace discussion