# Design system (DS) --- ## Les avantages d'un Design System - Cohérence pour les designers et les utilisateurs - Renforcement de l'image de la marque - Evolutif - Augmente l'éfficience des individus et des équipes - Facilite le travail entre les designers et les développeurs --- ## Ce que vous pouvez trouver dans un DS  --- ## Les *Tokens* - Moyen pour gérer les _design properties_ et les valeurs dans un Design System - Un token est identifié par un nom et chaque token stock - Chaque token stocke une information (taille, couleur, espacement, etc.) ---- ## L'intérêt des *Tokens* - Représente une source de vérité pour maintenir la cohérence - Améliore la gestion des DS évolutifs - Elimine les suppositions et les approximations ---- ### Exemple (1) ```htmlembedded! <style> div { padding : 24px; } </style> ``` ---- Le designer change d'espacement sans faire exprès (25px)  ---- ```htmlembedded! <style> div { padding : 25px; } </style> ``` ----  --- ## Aliasing  ----  ----  ----  ----  ----  ----  ----  --- ## Organisation des Tokens  --- ### Fluent DS (Microsoft) Global token  ---- Alias token  ---- Alias token pour des éléments plus complexes  ---- ### Material DS (Google) - Reference token - System token - Component token ----  ---- ## Liste non exhaustive de Design System - [Carbon DS](https://carbondesignsystem.com/) (IBM) - [Material DS](https://m3.material.io/)(Google) - [Fluent](https://fluent2.microsoft.design/) (Microsoft) - [Lightning](https://www.lightningdesignsystem.com/) (Salesforce) - [Atlassian](https://atlassian.design/)(Atlassian) - [Polaris](https://polaris.shopify.com/)(Shopify) ---