Slot

Un Slot est un espace réservé à l’intérieur d’un composant, conçu pour accueillir du contenu variable (icône, image, texte, autre composant) sans casser la structure du composant parent.

Ce n’est pas une fonction native de Figma (le logiciel ne parle pas de “Slot”), mais une bonne pratique d’architecture de design system, inspirée du développement web (Web Components, Vue.js, etc.).

L’objectif ? Créer des composants flexibles, réutilisables et maintenables, sans multiplier les Variantes inutiles.

Comment implémenter un Slot dans Figma ? (Mode opératoire simplifié)

Méthode 1 : Composant “Slot” dédié (Recommandée)

1. Créez un composant “Slot”
   • Nom : Slot / Icon, Slot / Image, etc.
   • Contenu : un rectangle transparent ou une icône temporaire + texte indicatif (ex. : “< icône >” ou “Contenu personnalisable”).
   • Conserver ce composant dans une page dédiée (ex. : Tokens / Slots).
2. Insérez ce Slot dans votre composant principal
   Exemple : dans une Card, placez Slot / Icon là où l’icône doit apparaître.
3. Utilisez “Swap Instance” pour le remplacer
   • Sélectionnez l’instance du Slot dans votre mise en page.
   • Cliquez sur l’icône “Swap Instance” (dans la barre de propriétés à droite).
   • Choisissez le composant souhaité (ex. : une icône réelle).
     → Le nouveau composant prend la place du Slot, tout en respectant sa position et ses contraintes.

Méthode 2 : Slot optionnel avec propriété booléenne

• Si le contenu est facultatif (ex. : texte d’aide sous un champ de formulaire) :
  1. Créez une Boolean Property (ex. : Show Helper Text).
  2. Liez la visibilité de l’instance du Slot à cette propriété.
  3. En cochant/décochant la case, le designer affiche ou masque le Slot sans altérer le layout.

Pourquoi c’est utile ?

• Évite la multiplication des Variantes.
• Facilite la personnalisation par les équipes produit.
• Garantit la cohérence du système.
• Simplifie la collaboration avec les développeurs (le concept leur est familier).