Les props sémantiques (ou propriétés sémantiques) sont des paramètres nommés de façon intentionnelle et fonctionnelle plutôt que visuelle ou technique utilisés pour décrire les variantes d’un composant dans un Design System (en Figma, code ou autre outil).
Elles permettent de séparer le quoi du comment :
- Sémantique = ce que l’élément signifie ou fait (ex. :
state="disabled",intent="danger") - Visuel/technique = à quoi il ressemble (ex. :
color="#ff0000",opacity=0.4)
Exemple concret : un bouton
Props non sémantiques (à éviter) :
color = red size = 16px opacity = 0.4
Ces valeurs décrivent l’apparence, pas l’intention. Elles deviennent obsolètes si le design change.
Props sémantiques (recommandées) :
state = disabled
intent = destructive
size = large
→ Ces noms expriment le rôle, l’état ou le comportement attendu, indépendamment du style visuel.
🎯 Pourquoi utiliser des props sémantiques ?
| Avantage | Explication |
|---|---|
| Maintenabilité | Si le rouge devient orange pour les actions destructrices, seul le token de design change — pas la prop intent="destructive". |
| Clarté pour les équipes | Un développeur, un designer ou un chef de produit comprend immédiatement ce que signifie state="loading". |
| Alignement design/développement | Les mêmes termes sont utilisés en Figma (variantes) et en code (React props, CSS classes). |
| Accessibilité & logique métier | Le state="disabled" implique à la fois un style visuel et un comportement (non cliquable, non focusable). |
Dans Figma : comment les appliquer ?
Lorsque vous créez des variantes de composants :
- Nommez vos propriétés avec des termes fonctionnels :
State→default / hover / active / focus / disabled / loadingIntent→primary / secondary / success / warning / dangerSize→small / medium / largeType→submit / reset / link
- Évitez les noms liés à la couleur, à la taille exacte ou à la police :
BlueButton,BigText,RedAlertButton variant="primary",Text size="heading",Alert severity="error"
Astuce Figma : Utilisez la casse camelCase ou kebab-case dans les noms de variantes pour faciliter l’export vers le code (ex. : isFullWidth).
Exemples transverses
| Contexte | Prop sémantique | Valeurs possibles |
|---|---|---|
| Formulaire | status | idle / success / error / warning |
| Notification | severity | info / success / warning / error |
| Icône | decorative | true / false (pour l’accessibilité) |
| Carte | isSelectable | true / false |
Lien avec les tokens de design
Les props sémantiques pilotent les tokens :
intent="danger"→ utilise le tokencolor.intent.dangersize="large"→ utilise le tokenspacing.scale.lg
Cela crée une chaîne sémantique cohérente : intention → token → valeur visuelle.