Learning Plan
A step-by-step path from basics to a professional portfolio. Complete lessons and track progress.
Module 1: Introduction and Planning
What a design system is, when you need one, how to audit your current UI, and how to choose a tech stack for the course.
Module 2: Design System Foundations
Project structure and core design tokens: color, typography, spacing, and layout.
Module 3: Components I
Core UI layer: Button, Input, Typography, and Icon. Variants, states, semantics, and accessibility as a required part of the API.
Module 4: Components II
Composite patterns: Card, Modal/Dialog, form controls, and Badge/Tag. Focus on composition, keyboard, and ARIA.
Module 5: Documentation
Storybook as the design system workbench: setup, CSF stories, MDX/autodocs, theming, and a basic deploy.
Module 6: Testing the design system
The DS test pyramid: unit tests with Testing Library, visual regression, axe-core, and E2E for package consumers.
Module 7: Publishing and distribution
Preparing the package for release: exports and types, npm + SemVer, distribution alternatives, and a CI/CD pipeline test → build → publish.
Module 8: Governance, evolution, and capstone
Operating a DS: changelog and migrations, RFC/review, adoption metrics, deprecation, and a final mini-system project.
To be continued
We are constantly updating the program. Stay tuned for new modules and topics.