Guide des « Slots » sur Figma

Le rêve de tout designer UI est de bâtir un Design System indestructible, une bibliothèque de composants si parfaite qu’elle répondrait à chaque besoin, du simple bouton à la modale la plus complexe. Pourtant, la réalité du terrain rattrape vite les équipes. À force de vouloir tout anticiper, les fichiers Figma croulent sous des variantes infinies ou, pire, poussent les utilisateurs à « détacher l’instance » dès qu’un contenu sort du cadre prévu. Cette approche mène directement à une maintenance impossible et à une cohérence visuelle qui s’effrite au fil des itérations.

Le syndrome du composant « incassable »

Dans la quête de cohérence, on cherche souvent à créer le composant parfait, celui qui prévoit chaque icône, chaque ligne de texte et chaque bouton. On finit par construire des organismes extrêmement rigides, pensés comme des blocs monolithiques où rien ne dépasse. C’est ce qu’on appelle le composant « incassable ».

L’enfer des variantes à l’infini

Pour répondre à la diversité des besoins (une modale avec une image, une autre avec un formulaire, une troisième avec un graphique), la solution réflexe est de créer des variantes. On se retrouve rapidement avec une matrice de propriétés ingérable, 50, 100, parfois 200 combinaisons pour un seul élément. Cette complexité visuelle surcharge la mémoire vive de Figma tout en perdant le designer qui passe plus de temps à chercher la bonne option qu’à concevoir son interface.

Le risque du « Detach Instance » : le premier pas vers la dette technique

Face à un composant trop rigide qui ne permet pas d’ajouter un élément spécifique, le designer finit inévitablement par céder à la tentation du « Detach Instance ». C’est le début des problèmes. En brisant le lien avec le composant parent, on sort du Design System. Si la charte graphique évolue (changement d’arrondi, de couleur de fond ou d’espacement), ces instances détachées deviennent des zones d’ombre qu’il faudra corriger manuellement, une par une. C’est l’accumulation de cette dette technique qui finit par rendre un système de design obsolète et inutilisable à long terme.

Comprendre le concept de « Slot » : Le conteneur intelligent

Pour dépasser la rigidité des composants classiques, il faut changer de paradigme et accepter qu’un composant ne peut pas tout prévoir. C’est ici que la notion de « Slot » prend tout son sens en introduisant une zone de liberté contrôlée au sein d’une structure fixe.

Qu’est-ce qu’un emplacement réservé (Placeholder) ?

Un slot est un composant volontairement vide ou générique, dont l’unique fonction est de réserver un espace précis dans une mise en page. Contrairement à un élément finalisé, le slot agit comme une promesse de contenu futur. Dans Figma, on le crée souvent sous la forme d’un simple cadre (Frame) avec un aspect visuel distinctif, des lignes diagonales ou un fond coloré spécifique, pour signaler au designer que cette zone est destinée à être remplacée par un contenu réel.

Structure parente vs Contenu spécifique

L’efficacité de cette méthode repose sur la séparation claire des responsabilités. La structure parente (le « Shell ») gère tout ce qui est immuable, les marges internes (padding), les coins arrondis, les ombres portées et le comportement de redimensionnement (Auto Layout). Le slot, quant à lui, accueille le contenu spécifique à chaque écran. Cette architecture permet de modifier l’apparence globale de cent composants en une seule action sur le parent, tout en laissant chaque instance afficher un contenu unique et adapté au contexte métier.

Tutoriel : Comment structurer vos slots dans Figma ?

La mise en place des slots repose sur une mécanique simple mais rigoureuse. L’objectif est de préparer le terrain pour que n’importe quel designer puisse personnaliser un composant complexe sans jamais avoir à le détacher.

Étape 1 : Créer le composant « Slot » générique

Tout commence par la création d’un composant dédié que l’on nomme généralement _Slot ou 🔗 Placeholder. Il s’agit d’une simple Frame en Auto Layout, souvent stylisée avec une couleur de remplissage légère et une icône centrale pour indiquer visuellement qu’il s’agit d’une zone interchangeable. Ce composant doit avoir des contraintes de redimensionnement flexibles (Hug ou Fill) pour s’adapter aux futurs contenus qu’il accueillera.

Étape 2 : L’intégrer dans vos organismes (Modales, Cards, Page Shells)

Une fois le slot créé, il suffit de l’insérer à l’intérieur d’un composant plus large, comme une fenêtre modale ou une carte. Au lieu de dessiner le contenu spécifique de la modale directement dans le composant principal, on y place l’instance du slot. La structure globale (le header, le bouton de fermeture, les ombres) est ainsi figée, tandis que la zone centrale reste totalement libre.

Étape 3 : Configurer l’Instant Swap pour une flexibilité totale

Pour rendre l’usage fluide, on utilise les « Component Properties » de Figma. En sélectionnant l’instance du slot à l’intérieur du composant parent, on crée une propriété de type « Instant Swap ». Cela permet à l’utilisateur final de cliquer sur la modale et, via le panneau latéral droit, de remplacer le slot par n’importe quel autre composant de la bibliothèque (un formulaire, un sélecteur de date, un message de confirmation) en un seul clic.

3 Cas d’usage concrets pour booster votre Design System

L’adoption des slots ne se limite pas à une simple astuce technique ; elle redéfinit la manière de construire les éléments les plus structurants d’une interface.

La modale universelle

Traditionnellement, une modale nécessite des dizaines de variantes pour couvrir tous les contenus possibles. Avec un slot central, on ne crée qu’un seul composant « Shell » incluant le fond, l’ombre portée, le titre et le bouton de fermeture. Le corps de la modale devient une zone libre où l’on injecte, selon le besoin, un formulaire de connexion, un message de confirmation ou une vue détaillée de produit, tout en garantissant que le cadre reste parfaitement cohérent sur toute l’application.

Les cartes (Cards) 

Les cartes sont souvent les éléments les plus instables d’un système. En plaçant un slot dans la zone de contenu d’une carte, on permet aux designers de basculer instantanément d’une image d’illustration à une vidéo, une icône ou même un graphique complexe. L’Auto Layout de la carte parente s’occupe de réajuster automatiquement les marges et les espacements, garantissant une harmonie visuelle impeccable quel que soit le type de média inséré.

Les menus de navigation personnalisables par page

Pour les barres de navigation latérales ou horizontales, les besoins varient souvent d’une section à l’autre (ajout d’une barre de recherche, d’un sélecteur de langue ou d’un profil utilisateur). Utiliser un slot à l’extrémité de la barre de navigation permet de conserver une structure globale fixe (logo, liens principaux) tout en laissant une zone de personnalisation contextuelle. Cela évite de multiplier les composants de navigation pour chaque spécificité métier.

Vers un Design System plus agile

L’adoption des slots marque une transition majeure dans la maturité d’un Design System. On passe d’une bibliothèque de composants figés à un véritable kit d’outils modulaires, capable de s’adapter aux besoins spécifiques sans jamais sacrifier la cohérence globale de l’interface.

L’impact le plus immédiat se mesure sur la légèreté des fichiers Figma. En remplaçant des centaines de variantes par quelques structures parentes intelligentes, on réduit drastiquement le temps passé à mettre à jour les composants de base. Cette efficacité technique libère du temps précieux pour les designers, qui peuvent alors se concentrer sur l’essentiel : l’expérience utilisateur et la résolution de problèmes complexes, plutôt que sur la gestion manuelle des instances et la correction de la dette technique.