Introduction
1. Le Concept de Design System
Un Design System est un ensemble de standards, de pratiques et d'outils utilisés pour guider et unifier la création d'interfaces utilisateur. Il ne s'agit pas seulement d'une bibliothèque de composants, mais aussi d'un langage de conception partagé au sein même du métier. (designers, développeurs, PO..).
Composants essentiels :
- Guide de Style : Cela inclut la typographie, les couleurs, les icônes et d'autres éléments visuels qui définissent l'apparence des produits.
- Bibliothèque de Composants : Ensemble de composants UI réutilisables et standardisés (buttons, inputs, cards, etc.).
- Règles et Standards : Normes pour le codage et le design, assurant la cohérence et la qualité.
- Documentation : Explications et lignes directrices pour utiliser correctement le Design System.
Exemples célèbres de Design Systems
- Material Design de Google : Un Design System complet qui établit des standards de design pour les interfaces Android, mais aussi utilisé sur le web et d'autres plateformes. Il est connu pour ses principes de design basés sur le monde réel, comme la lumière, la surface et le mouvement.
- Ant Design : Une bibliothèque de composants d'interface utilisateur pour React, reconnue pour son design élégant et minimaliste, qui facilite la création d'applications web interactives et esthétiquement cohérentes.
2. Pourquoi utiliser un Design System ?
L'adoption d'un Design System offre plusieurs avantages clés :
- Consistance et cohérence dans l'UI/UX : en standardisant les éléments visuels et les interactions, un Design System assure une expérience utilisateur cohérente sur l'ensemble d’une application.
- Réutilisabilité et maintenance simplifiée : les composants réutilisables réduisent le temps et les efforts nécessaires pour construire et maintenir des interfaces. Les modifications peuvent être appliquées de manière centralisée et répercutées automatiquement à travers tous les composants.
- Accélération du processus de développement : un Design System bien établi accélère le processus de développement. Les équipes peuvent se concentrer sur la logique métier plutôt que sur les détails du design, réduisant ainsi le temps de mise sur le marché.
En somme, un Design System n'est pas seulement un ensemble d'outils ; c'est une solution de travail qui facilite la communication, améliore la qualité et accélère le développement des projets.
3. Pourquoi ne pas utiliser un Design System ?
Nous pourrions être tentés de se dire “en vérité, il n’y a que des avantages, le CSS est réutilisable et facilement maintenable tout au long de la durée de vie de notre / nos projets.”
Mais nous sommes là pour penser produit et client, alors si nous devions délivrer un MVP assez rapidement avec une deadline serrée,serait-il viable de prendre le temps de créer un Design System ? Pas forcément. Si le MVP est validé, le Design System pourra être implémenté par la suite.
Il soulève aussi plusieurs questions :
- Quid d’avoir un Design System massivement utilisé dans toutes les applications d’une entreprise ?
- Qui met à jour le Design System ?
- Quand ?
- Comment ?
4. Mise en pratique
Pour illustrer cela nous allons simplement prendre exemple sur un bouton réutilisable que nous allons dupliquer et ensuite lui appliquer son style qui lui est propre.
Button.tsx
---
Partie 1 : Pure CSS avec CSS Modules
Le "Pure CSS” fait référence à l'usage direct de feuilles de style sans framework ou préprocesseur. Mais même en Pure CSS, nous pouvons rendre notre code plus maintenable et éviter les conflits de noms de classes grâce à une fonctionnalité nommée CSS Modules.
Avantages de CSS Modules
- Scopage local: Chaque classe définie dans un fichier module CSS est locale à ce fichier, ce qui permet d'éviter les conflits.
- Réutilisabilité: Comme les classes sont locales, elles peuvent être utilisées dans différents composants sans risque de styles inattendus.
- Maintenance simplifiée: Changer une classe ne causera pas d'effets de bord inattendus ailleurs.
Création d'un thème de couleurs et de typographie
Fichier de Variables CSS (variables.css)
- Rôle : définit les variables globales telles que les couleurs, les tailles de bordure, les familles de polices, etc. Ces variables sont les fondations de notre thème de design
- Pour cela nous créons un fichier variables.css, dans lequel nous allons mettre toutes nos variables de styles dans la pseudo classe root.
- Les variables définies dans :root ont une portée globale à travers tous les fichiers CSS liés à notre document HTML. Cela signifie que ces variables peuvent être utilisées dans n'importe quelle autre feuille de style incluse dans le document.
Construire des composants réutilisables avec CSS Modules
- Dans notre design system, le fichier de composants est crucial. Mais plutôt que d'utiliser un fichier components.css global, nous allons adopter l'approche CSS Modules, qui rend chaque style spécifique à son composant, offrant ainsi une meilleure encapsulation et évitant les conflits de classe.
- Pour implémenter CSS Modules, nous créons un fichier par composant, comme Button.module.css, qui contiendra les styles propres au bouton. Ce fichier s'appuiera sur les variables globales définies dans variables.css, mais scoper ses classes localement grâce à l'architecture de modules.
- Par exemple, pour les boutons, au lieu d'avoir des styles globaux, nous aurons:
Application du style sur notre bouton réutilisable via les modules
Dans la props className nous faisons appel à notre style via le module styles.button
Fichier Global (index.css)
- Rôle : sert à importer les styles nécessaires et à définir des styles globaux, comme la police par défaut pour l'application.
- Pour cela nous allons dans le fichier index.css et nous importons nos fichiers components.css et variable.css
Intégration dans un Projet React
- Lorsque nous appelons notre composant réutilisable dans notre composant parent (en l'occurrence ici pour l’exemple : App.tsx), nous avons simplement à y mettre la classe CSS correspondante.
Résultat
Nous avons un seul composant Button.tsx réutilisable utilisé 3 fois mais avec 3 styles différents en cohérence avec leur comportement attendu (Acheter Annuler / Découvrir etc.).
Un grand remerciement à Maxime et Fabio pour leur relecture.
Ressources :
https://developer.mozilla.org/fr/
.png)
.png)
