Learn
Learn
Learn web development from expert teachers. Build real projects, join our community, and accelerate your career
Get Started
Fullstack Rust Fullstack Node.js Fullstack D3 Fullstack React Fullstack React with TypeScript more →
The newline Guide to Building Your First GraphQL Server with Node and TypeScript
In this course, we'll show you how to create your first GraphQL server with Node.js and TypeScript
Enroll for free
Teach
Teach
Share your knowledge with others, earn money, and help people with their career
Apply Now
Apply To Teach A Course What Our Teachers Say
Amelia Wattenberger
Author of Fullstack D3
"Writing Fullstack D3 was a thoroughly enjoyable, fun process.

The writing was over before I knew it, and we've sold way more copies than I expected! Plus, the compliments from my peers have been really amazing."
Community
Community
Get help with programming projects, find collaborators, and make friends
Join Now
Join our Discord Server What Our Students Say
Tutorials

Welcome to

Build a Complete Company Design System

Module 1

Introduction

5 Lessons 11 Minutes

01Build a Company Design System - Course Introduction
Sneak Peek00:01:40
02Build a Company Design System - Course Overview
Sneak Peek
03What are Design Systems and Why are They so Popular?
Sneak Peek00:01:57
04Pace Layering and Atomic Design System Mental Models
Sneak Peek00:02:37
05How to Turn a Figma Design System Into Code
Sneak Peek00:04:54

Module 2

Design System Monorepo

5 Lessons 18 Minutes

01Module 2 Introduction
Sneak Peek
02How to Structure a Design System Monorepo
Sneak Peek00:01:19
03Using Yarn Workspaces to Create a Monorepo
Sneak Peek00:06:29
04How to Build a Dynamic Design System With TypeScript
Sneak Peek00:05:00
05Create ESLint and Prettier Configs for a Design System
Sneak Peek00:05:44

Module 3

Foundation package

5 Lessons 8 Minutes

01Module 3 Introduction
Sneak Peek
02How to Work With and Structure Design Tokens
Sneak Peek00:03:05
03A Guide to Transforming Design Tokens with Style Dictionary
Sneak Peek00:03:14
04Creating Tailwind CSS Presets With Design Tokens
Sneak Peek00:02:32
05Building the foundation
Sneak Peek

Module 4

React package

3 Lessons 3 Minutes

01Module 4 Introduction
Sneak Peek
02Setting Up A React Component Library for Design Systems
Sneak Peek00:01:21
03How to Write React Components for a Company Design System
Sneak Peek00:02:05

Module 5

Storybook package

4 Lessons 7 Minutes

01Module 5 Introduction
Sneak Peek
02Setting Up Storybook for Company Design Systems
Sneak Peek00:03:18
03Creating Your First Stories in Storybook
Sneak Peek00:02:37
04Controls and A11y testing
Sneak Peek00:01:38

Module 6

Styling components

3 Lessons 17 Minutes

01Module 6 Introduction
Sneak Peek
02How to Style React Components With Design Tokens
Sneak Peek00:09:11
03How to Use Tailwind CSS With JavaScript Design Tokens
Sneak Peek00:08:45

Module 7

Testing components

4 Lessons 8 Minutes

01Module 7 Introduction
Sneak Peek
02React Testing Library - Install and Write Your First Test
Sneak Peek00:04:01
03Using jest-axe to Find Accessibility Issues in React Components
Sneak Peek00:04:16
04What is Visual Testing and How Does it Work?
Sneak Peek

Module 8

CI, Changelogs and Publishing

3 Lessons 4 Minutes

01Module 8 Introduction
Sneak Peek
02What are Changesets and How Do They Manage Versioning?
Sneak Peek00:04:09
03How to Setup a CI/CD Pipeline in GitHub Actions
Sneak Peek

Module 9

Summary

1 Lesson

01Thank you 🙏
Sneak Peek

Next Introduction:

Build a Company Design System - Course Introduction