Formation Design System

Leçon 1 • Composants essentiels et anatomie

Décompose les couches structurelles : jetons, composants, motifs et directives. Les apprenants associent chaque couche à son rôle dans un système fonctionnel.

Leçon 2 • Parties prenantes et rôles d’équipe

Identifie qui possède, contribue et consomme un design system. Clarifie les responsabilités entre les fonctions de design, d’ingénierie et de produit.

Leçon 3 • Valeur commerciale et retour sur investissement (ROI)

Quantifie les gains d’efficacité, les améliorations de cohérence et la réduction des refontes. Relie l’investissement dans le système à des résultats mesurables sur le produit.

Leçon 1 • Jetons d’Élévation, de Mouvement et de Forme

Étend le modèle de jeton aux valeurs d’ombre, de rayon de bordure et d’animation. Complète le langage visuel complet nécessaire à une conception cohérente des composants.

Leçon 2 • Introduction aux Jetons de Design

Explique les jetons comme des décisions de design nommées, indépendantes de la plateforme et stockées sous forme de données. Ancre les apprenants dans le modèle de jeton avant de construire un langage visuel.

Leçon 3 • Nommage et Gouvernance des Jetons

Définit des conventions de nommage et des règles de versionnement qui maintiennent les jetons évolutifs à grande échelle. Les apprenants appliquent des pratiques de gouvernance pour éviter la prolifération des jetons.

Leçon 4 • Architecture du Système de Couleurs

Structure les couleurs en jetons primitifs, sémantiques et au niveau du composant. Les apprenants conçoivent une palette évolutive qui prend en charge les modes clair et sombre.

Leçon 1 • États et Interactions des Composants

Cartographie tous les états interactifs—par défaut, survol, focus, désactivé, erreur—dans la conception des composants. Assure une couverture complète des états avant la remise.

Leçon 2 • API du Composant et Conception des Propriétés (Props)

Définit comment les composants exposent la configuration via des variantes, des états et des propriétés. Les apprenants conçoivent des API flexibles qui équilibrent puissance et simplicité.

Leçon 3 • Méthodologie du Design Atomique

Introduit les atomes, molécules, organismes, modèles et pages comme cadre de composition. Les apprenants classifient les éléments d’interface utilisateur existants dans cette hiérarchie.

Leçon 4 • Composants Réactifs et Adaptatifs

Conçoit des composants qui s’adaptent aux points de rupture, aux tailles de conteneur et aux contextes d’appareil. Les apprenants appliquent une logique réactive sans dupliquer les définitions de composants.

Leçon 1 • Assurance Qualité de la Bibliothèque

Applique les tests de régression visuelle, le linting et la revue par les pairs pour maintenir l’intégrité de la bibliothèque. Les apprenants établissent un processus d’AQ avant la livraison de tout composant.

Leçon 2 • Configuration de la Bibliothèque dans l’Outil de Design

Configure une bibliothèque partagée dans l’outil de design avec des pages organisées, un nommage et des connexions de jetons. Établit la structure de fichiers que les équipes utiliseront quotidiennement.

Leçon 3 • Construction des Composants d’Interface Utilisateur Essentiels

Construit les composants fondamentaux—boutons, champs de saisie, cartes, modales—en suivant les principes de jetons et d’API des chapitres précédents. Produit un ensemble de base réutilisable.

Leçon 4 • Storybook et Documentation Vivante

Déploie les composants dans un environnement de documentation interactif pour des tests en temps réel. Connecte le design et l’ingénierie via une référence partagée et toujours à jour.

Leçon 1 • Architecture du Pipeline de Jetons

Construit un pipeline automatisé qui transforme les jetons de design en sorties spécifiques à la plateforme. Les apprenants configurent des outils de transformation pour servir le web, iOS et Android.

Leçon 2 • Implémentation des Jetons en CSS et en Code

Implémente les jetons en tant que propriétés personnalisées CSS, variables SCSS et constantes JavaScript. Les apprenants valident que les jetons de code correspondent exactement aux valeurs des outils de design.

Leçon 3 • Stratégie de Jetons Multiplateforme

Étend la livraison des jetons aux plateformes mobiles natives et autres sans dupliquer les données source. Assure la cohérence visuelle sur toutes les surfaces produit.

Leçon 1 • Composition et Motifs d’Emplacement

Applique la composition basée sur des emplacements pour construire des mises en page flexibles à partir de composants fixes. Les apprenants conçoivent des structures composables qui évitent les solutions rigides et ponctuelles.

Leçon 2 • Modèles de Page et Mises en Page

Crée des modèles de page basés sur une grille que les équipes peuvent adapter sans refaire la conception à partir de zéro. Standardise les décisions de mise en page entre les domaines du produit.

Leçon 3 • Compréhension des Motifs d’Interface Utilisateur

Distingue les motifs d’interface utilisateur des composants et explique quand codifier un motif. Les apprenants identifient les motifs à forte valeur ajoutée qui méritent d’être standardisés dans leur système.

Leçon 4 • Motifs d’Interaction Courants

Documente et conçoit des motifs pour les formulaires, les tableaux de données, les états vides et la gestion des erreurs. Fournit des solutions réutilisables aux défis produit les plus fréquents.

Leçon 1 • Gestion des Changements Casseurs (Breaking Changes)

Planifie et communique les changements casseurs pour minimiser les perturbations pour les équipes consommatrices. Les apprenants créent des guides de migration et des délais d’obsolescence.

Leçon 2 • Conception du Flux de Contribution

Crée un processus structuré permettant aux équipes externes de proposer, construire et soumettre des ajouts au système. Abaisse les barrières à la contribution tout en maintenant les normes de qualité.

Leçon 3 • Versionnement Sémantique pour les Design Systems

Applique le versionnement sémantique pour communiquer les changements casseurs, les nouvelles fonctionnalités et les correctifs. Les apprenants rédigent des journaux de modifications (changelogs) et gèrent la communication des versions aux consommateurs.

Leçon 4 • Métriques d’Adoption et Suivi de l’État de Santé

Définit et suit les métriques qui révèlent l’adoption du système, la couverture et l’utilisation des composants. Les apprenants construisent des tableaux de bord qui guident les décisions de priorisation.

Leçon 1 • Gestion de la Complexité du Système

Identifie les signes de gonflement du système et applique des stratégies pour réduire la complexité sans casser les consommateurs. Les apprenants auditent et refondent les systèmes vastes et vieillissants.

Leçon 2 • Architecture Multi-Marque et de Thème

Étend le système de jetons pour prendre en charge plusieurs marques ou des produits en marque blanche à partir d’une seule base de code. Les apprenants conçoivent des couches de thème qui isolent les décisions de marque de la logique centrale.

Leçon 3 • Internationalisation et Localisation

Adapte les composants et les jetons pour prendre en charge les mises en page de droite à gauche (RTL), la typographie spécifique à la langue et le contenu traduit. Garantit que le système fonctionne à l’échelle mondiale.

Leçon 4 • Pérennisation et Évolution Technologique

Évalue les technologies et normes émergentes qui peuvent affecter l’architecture du système. Les apprenants construisent des systèmes adaptables qui absorbent les changements sans réécritures complètes.