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.
- 4.1 / 5 (46 ratings)
- Published
- Updated
1 hrs 19 mins
21 Videos
Costa Alexoglou
Curr. Engineer @neo4j
Co-founder @loceye
01Remote
You can take the course from anywhere in the world, as long as you have a computer and an internet connection.
02Self-Paced
Learn at your own pace, whenever it's convenient for you. With no rigid schedule to worry about, you can take the course on your own terms.
03Community
Join a vibrant community of other students who are also learning with Build a Complete Company Design System. Ask questions, get feedback and collaborate with others to take your skills to the next level.
04Structured
Learn in a cohesive fashion that's easy to follow. With a clear progression from basic principles to advanced techniques, you'll grow stronger and more skilled with each module.
What You Will Build In This Course
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.
Our students work at
Course Syllabus and Content
Introduction
5 Lessons 11 Minutes
- Free00:01:40
- Free
- Free00:01:57
- Free00:02:37
- Free00:04:54
Design System Monorepo
5 Lessons 18 Minutes
- Sneak Peek
- Sneak Peek00:01:19
- Sneak Peek00:06:29
- Sneak Peek00:05:00
- Sneak Peek00:05:43
Foundation package
5 Lessons 8 Minutes
- Sneak Peek
- Sneak Peek00:03:05
- Sneak Peek00:03:14
- Sneak Peek00:02:32
- Sneak Peek
React package
3 Lessons 3 Minutes
- Sneak Peek
- Sneak Peek00:01:21
- Sneak Peek00:02:05