English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 21 Lessons (1h 20m) | 235 MB
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.
Table of Contents
1 Course Introduction
2 Design systems are exploding
3 Mental models for design systems
4 From Figma to Code
5 Monorepo Architecture
6 Start building the monorepo
7 TypeScript Configuration
8 ESLint and Prettier Configs
9 Structuring the design tokens
10 Transforming the design tokens
11 Tailwind Preset
12 Setting up React environment
13 Write our first components
14 Set up Storybook
15 Create our first stories
16 Controls and A11y testing
17 Using the JS design tokens
18 Use TailwindCSS with our design tokens
19 React Testing Library
20 Accessibility Testing
21 Changesets
Resolve the captcha to access the links!