Formation Système de design

Leçon 1 • Composants principaux 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 de l'équipe

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

Leçon 3 • Valeur commerciale et retour sur investissement

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

Leçon 1 • Jetons d'élévation, de mouvement et de forme

Étend le modèle de jetons aux ombres, aux rayons de bordure et aux valeurs d'animation. Complète le langage visuel complet nécessaire à une conception de composants cohérente.

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 jetons avant de construire un langage visuel.

Leçon 3 • Nommage et gouvernance des jetons

Définit les conventions de nommage et les règles de version qui maintiennent les jetons maintenables à 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 des composants. 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 des composants et conception des propriétés

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 de design atomique

Introduit les atomes, les molécules, les organismes, les modèles et les 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 la 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 révision par les pairs pour maintenir l'intégrité de la bibliothèque. Les apprenants établissent un processus d'assurance qualité avant la diffusion de tout composant.

Leçon 2 • Configuration de la bibliothèque dans l'outil de design

Configure une bibliothèque de design partagée 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 de base

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 sous forme de propriétés personnalisées CSS, de variables SCSS et de constantes JavaScript. Les apprenants valident que les jetons de code correspondent exactement aux valeurs de l'outil de design.

Leçon 3 • Stratégie de jetons multiplateforme

Étend la livraison des jetons aux mobiles natifs et à d'autres plateformes sans dupliquer les données sources. Assure une cohérence visuelle sur toutes les surfaces produit.

Leçon 1 • Schémas de composition et d'emplacement

Applique la composition basée sur les 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 reconcevoir à partir de zéro. Standardise les décisions de mise en page entre les domaines produit.

Leçon 3 • Comprendre les 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 cassants

Planifie et communique les changements cassants pour minimiser les perturbations pour les équipes consommatrices. Les apprenants créent des guides de migration et des calendriers de dépréciation.

Leçon 2 • Conception du workflow 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 • Versioning sémantique pour les systèmes de design

Applique le versioning sémantique pour communiquer les changements cassants, les nouvelles fonctionnalités et les correctifs. Les apprenants rédigent des journaux de modifications 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 refactorisent les grands systèmes vieillissants.

Leçon 2 • Architecture multi-marques et de thématisation

Étend le système de jetons pour prendre en charge plusieurs marques ou 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 principale.

Leçon 3 • Internationalisation et localisation

Adapte les composants et les jetons pour prendre en charge les mises en page de droite à gauche, 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 le changement sans réécritures complètes.