Welcome to
Build a Complete Company Design System
Course Syllabus and Content
Introduction
5 Lessons 11 Minutes
An introduction to the course
Which technologies we will be using in this course
Why design systems are becoming popular
How to think of design systems and model them appropriately
How to convert a Figma file to requirements
Design System Monorepo
5 Lessons 18 Minutes
What you will learn in Module 2
How to structure a design system monorepo
Using yarn workspace to create a monorepo
Foundation package
5 Lessons 8 Minutes
What you will learn in module 3
How to work with design tokens
Transforming raw design tokens with Style Dictionary
Creating a Tailwind CSS preset with JavaScript design tokens
Using
tscto build the foundation package
React package
3 Lessons 3 Minutes
What you will learn in module 4
Setting up the react component library package
Write our first Button component
Storybook package
4 Lessons 7 Minutes
What you will learn in module 5
Developing the component library with Storybook
Using Storybook to document our component library
Storybook controls and Accessibility addon panel
Styling components
3 Lessons 17 Minutes
What you will learn in module 6
Styling React components with JavaScript design tokens
Styling React components with Tailwind CSS preset
Testing components
4 Lessons 8 Minutes
What you will learn in module 7
Using React Testing Lirary to test React components
Finding accessibility issues using AXE with Jest
What is Visual Testing and how to use it
CI, Changelogs and Publishing
3 Lessons 4 Minutes
What you will learn in module 8
What are changesets and how to use them
How to test & publish our packages from CI (Github Actions)