Figma : bien comprendre le Main Component
Qu'est-ce qu'un Main Component ?
Dans Figma, un Main Component (composant principal) est l'élément source à partir duquel toutes les copies — les instances — sont créées. Tu le reconnais dans le panneau de calques grâce à son icône en forme de losange violet.
Concrètement, c'est la même logique qu'un composant React ou une classe en programmation : tu définis la structure et le comportement une seule fois, puis tu la réutilises partout dans tes maquettes sans dupliquer le travail.
Analogie développeur : le Main Component, c'est exactement ton fichier Button.tsx dans app/components/ui/. Chaque bouton que tu poses dans une page, c'est une instance — elle hérite du composant source, mais peut avoir des props différentes (texte, icône, état).
Tu crées un Main Component en sélectionnant un ou plusieurs calques, puis en appuyant sur Ctrl/Cmd + Alt + K, ou via clic droit → Create component.
Main Component vs Instance
C'est la distinction la plus importante à intégrer avant d'aller plus loin, car elle détermine où tu as le droit de modifier quoi.
Main Component (source)
- Un seul exemplaire dans tout le fichier
- Toute modification se propage à toutes les instances
- Contient la structure de base et les variantes
- Vit généralement dans une page dédiée "Design System"
Instance (copie)
- Autant d'exemplaires que nécessaire, partout dans le fichier
- Les modifications locales (overrides) restent propres à cette instance
- Reste connectée en permanence à son Main Component
- Peut être "détachée" — mais perd alors ce lien pour toujours
Détacher une instance (clic droit → Detach instance) est une action irréversible sans Cmd+Z immédiat. Le calque redevient un groupe de formes normales, complètement déconnecté du Design System. À éviter sauf cas très spécifique.
Pourquoi ça change tout en production
L'intérêt du Main Component ne se limite pas à Figma — il conditionne directement la vitesse et la fiabilité de la maintenance d'un Design System, exactement comme un composant React mal architecturé complique la vie de toute une équipe front-end.
Sans Main Component (formes dupliquées manuellement) : changer la couleur d'un bouton implique de retrouver et modifier chaque occurrence, une par une, dans potentiellement des dizaines de maquettes. Le risque d'incohérence est quasi garanti sur un fichier de plus de 20 écrans.
Avec Main Component : tu modifies le composant source une seule fois. Chaque instance, où qu'elle soit dans le fichier — même dans un fichier séparé si le composant est publié en librairie — se met à jour automatiquement.
C'est exactement le principe qui a rendu possible la bibliothèque de plus de 30 composants Figma construite pour Keller Williams France : un seul point de vérité, des centaines d'écrans qui en héritent sans divergence.
Les propriétés exposées aux instances
Un bon Main Component n'est pas juste "un dessin réutilisable" — c'est une interface configurable. Figma permet d'exposer plusieurs types de propriétés, modifiables directement depuis chaque instance sans toucher au composant source :
| Propriété | Ce qu'elle permet |
|---|---|
| Variant | Basculer entre des états prédéfinis (ex : Primary / Secondary / Ghost) |
| Boolean | Afficher/masquer un élément (ex : montrer ou non une icône) |
| Text | Modifier le contenu d'un champ texte sans changer la structure |
| Instance swap | Remplacer un sous-composant par un autre du même type (ex : changer l'icône affichée) |
Ces propriétés se configurent depuis le panneau de droite en sélectionnant le Main Component, section Component properties. C'est ce mécanisme qui rend un bouton Figma aussi flexible qu'un composant Button.tsx avec ses props variant, icon, et label.
Nomme tes propriétés comme tu nommerais des props en code : variant, size, hasIcon, label — la cohérence de nommage entre Figma et le code facilite énormément le passage du design au développement.
Organiser ses composants dans un fichier
Une convention de nommage claire évite qu'un Design System devienne ingérable au fil des mois. La convention la plus répandue utilise le slash / pour créer une hiérarchie visible dans le panneau Assets :