Build a Complete Company Design System
This course is a comprehensive guide to publishing your first component library and design assets using React, TypeScript, Storybook, Tailwind CSS, and Styled Dictionary. You’ll create a flexible, enterprise-grade design system library that your co-workers will actually enjoy.
What You Will Learn
How a simple monorepo works with Yarn workspaces
What design tokens are, and how to generate them with Styled-Dictionary
How to create a shared component library
Automate testing for accessibility issues (Axe) and visual changes (Chromatic)
Develop and document our design system with Storybook
How to publish with Github Actions and Changesets
How to provide a Tailwind configuration for other teams
In this course, we will dive into the world of design systems. We will learn how they can help developers increase their productivity, create consistency across a company's products, and ultimately speed up the development process.
We will start by covering the fundamental concepts of design systems, then move on to the architecture of a monorepo codebase. We will set up shared configurations for TypeScript, ESLint, and Prettier, and create a foundation package for hosting and distributing design tokens and assets.
Next, we will create a React package with demo components that are styled using our design system's style tokens. We will also create a Storybook package and learn the best practices for developing and documenting components with TypeScript. We will focus on styling our components in two ways: using CSS-in-JS with styled-components and JavaScript design tokens, as well as Tailwind CSS classes.
Finally, we will learn how to create tests for our React components using React Testing Library and AXE, and manage releases using changesets and set up a CI pipeline with GitHub Actions.
This course aims to be a comprehensive guide, or a cookbook, to building a complete company design system from scratch. By the end of the course, you will have the knowledge and skills to create a practical and maintainable design system for any organization.
Course Content
Introduction
Overview
Which technologies we will be using in this course
LESSON
Mental models for design systems
How to think of design systems and model them appropriately
LESSON
2:37 minutes
Design System Monorepo
Foundation package
Module 2 Introduction
What you will learn in module 2
LESSON
Transforming the design tokens
Transforming raw design tokens with Style Dictionary
LESSON
3:14 minutes
Building the foundation
Using `tsc` to build the foundation package
LESSON
React package
Storybook package
Styling components
Module 5 Introduction
What you will learn in module 5
LESSON
Use TailwindCSS with our design tokens
Styling React components with Tailwind CSS preset
LESSON
8:45 minutes
Testing components
Module 6 Introduction
What you will learn in module 6
LESSON
Visual Testing
What is Visual Testing and how to use it
LESSON
CI, Changelogs and Publishing
Module 7 Introduction
What you will learn in module 7
LESSON
Publish from our CI
How to test & publish our packages from CI (Github Actions)
LESSON
Summary
LESSON
Your Instructors
Frequently Asked Questions
Who is this course for?
This course is for Web Developers that want an Engineering Design System Cookbook that will provide recipes they can use from day 1 to start building and shipping their own design system library.
What if I need help?
You can ask us questions anytime through the community Discord channel or by sending us a message.
What are the prerequisites?
This course assumes that you are familiar with React (or any front-end framework) and the basics of front-end development including HTML, CSS, and JavaScript. While TypeScript will be used, an absence of knowledge will not be a roadblock.