FigmaCOMPOSANTS RÉUTILISABLES POUR
Prérequis
- Inventaire des composants UI déjà codés (ou cible React/Tailwind)
- Convention de nommage alignée code (`Button`, `CardProduct`, etc.)
- Variables Figma publiées (couleurs, spacing, radius)
- Page Figma dédiée « Components » séparée des explorations
Des frames dupliqués ne constituent pas un design system : chaque copie diverge, le handoff devient interprétatif. Des composants maîtres avec variantes, auto-layout et propriétés Figma mappées sur les props React accélèrent l'intégration. Vous allez structurer votre bibliothèque pour qu'un composant design corresponde à un composant code.
Architecturer la bibliothèque Figma
Organisez le fichier : page « Foundations » (tokens, grilles), page « Components » (masters publiés), page « Patterns », page « Archive ». Seuls les masters Components sont « Ready for dev ».
Créez chaque composant en auto-layout dès la conception : padding, gap et alignment deviennent des hints flex/grid pour le développeur.
Définissez les variantes sur des axes stables qui correspondent aux props TypeScript. Préférez des propriétés booléennes (`hasIcon`, `isLoading`) reproductibles en code.
Variantes, propriétés et auto-layout
Utilisez les component properties Figma : texte éditable pour les labels, boolean pour les icônes, instance swap pour les slots (avatar, média).
Configurez min/max width et hug/fill pour simuler le comportement responsive. Un bouton « fill container » en mobile doit être documenté dans la description du master.
Testez les overrides autorisés : quels calques restent modifiables en instance ? Documentez les anti-patterns (« ne pas étirer le logo »).
Documenter chaque composant pour le handoff
Remplissez la description du master : usage, props Figma ↔ props React, lien Storybook ou chemin `src/components/`. Ajoutez des exemples do/don't.
Pour les états non visuels (loading, erreur réseau), ajoutez une variante ou une annotation Dev Mode. Le développeur ne doit pas improviser un spinner non spécifié.
Synchronisez le statut avec Notion (voir figma-notion-sync-specs-composants) : design | en dev | done.
Erreurs fréquentes
Détacher les instances en production de maquettes : la bibliothèque et les écrans divergent.
Multiplier les variantes redondantes (`primary` et `primary-v2`) au lieu de corriger le master.
Oublier auto-layout sur les composants composés (card avec header + body + footer).
Nommer en français côté Figma et en anglais côté code sans table de correspondance.
Ce qu'il faut retenir
Composants maîtres + variantes = contrat avec le code.
Auto-layout systématique ; nesting maîtrisé.
Documentation dans la description master, pas dans Slack.
Revue design system régulière : alignement Figma ↔ repo.
FAQ
Utile comme vocabulaire (atomes, molécules). L'essentiel reste la correspondance 1:1 entre master Figma et composant exporté du repo.
Versionnez dans le nom de page ou l'historique Figma. Communiquez la migration (props renommées) dans Notion avant que le dev intègre.
Oui : bibliothèque `Icon/*` avec instance swap. Même traitement SVG côté code (`src/components/icons/`).
Cursor