Une fois défini, un composant peut être dupliqué sous forme d’instances : ces instances héritent automatiquement des modifications apportées au composant principal, garantissant cohérence visuelle, efficacité de production et maintenabilité à grande échelle.
Caractéristiques essentielles
| Propriété | Description |
|---|---|
| Réutilisabilité | Un seul composant peut être utilisé des dizaines ou centaines de fois. |
| Liaison dynamique | Toute modification du composant principal se propage automatiquement à toutes ses instances (sauf si elles sont détachées). |
| Variantes | Les composants peuvent avoir plusieurs variantes (ex. : bouton primary / secondary, hover / active / disabled), organisées selon des propriétés personnalisables (état, taille, couleur, etc.). |
| Intégration Dev Mode | Les développeurs peuvent inspecter les composants, leurs propriétés et leurs tokens directement via le Dev Mode de Figma. |
| Interopérabilité | Les composants peuvent contenir du texte, des vecteurs, des images, d’autres composants, et même des frames avec Auto Layout. |
Exemples concrets
- Un bouton avec variantes :
taille (S/M/L),type (primary/secondary),état (default/hover/focus/disabled). - Une carte produit contenant une image, un titre, un prix et un bouton « Ajouter » — tous imbriqués dans un composant réutilisable.
- Une icône vectorielle transformée en composant pour assurer la cohérence de la palette et de l’épaisseur de trait.
Bonnes pratiques
- Nommez vos composants de façon claire et hiérarchique :
Button/Primary/Large - Utilisez des props sémantiques dans les variantes (ex. :
state=disabled, pascolor=gray) - Évitez de trop imbriquer les composants (profondeur max recommandée : 3–4 niveaux)
- Documentez les composants dans une page dédiée de votre fichier (« Library » ou « Design System »)
Différence clé
- Composant principal = la « recette originale » (modifiable uniquement depuis sa source).
- Instance = une « copie liée » (modifiable localement via overrides, mais synchronisée sur la structure).
Si vous détachez une instance (Right-click → Detach instance), elle devient un objet indépendant et perd la liaison avec le composant principal.