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

This video is available to students only

How to Write React Components for a Company Design System

Write our first Button component

This page is a preview of Build a Complete Company Design System

Previous Lesson:

Setting Up A React Component Library for Design Systems

Next Lesson:

Module 5 Introduction

New
-:--2
-:--2

Start a new discussion. All notification go to the author.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Build a Complete Company Design System

WELCOMEIntroduction

Introduction:

Start Here

Module 1: Introduction

Introduction: (1:40)

Build a Company Design System - Course Introduction

Lesson 1:

Build a Company Design System - Course Overview

Lesson 2: (1:57)

What are Design Systems and Why are They so Popular?

Lesson 3: (2:37)

Pace Layering and Atomic Design System Mental Models

Lesson 4: (4:54)

How to Turn a Figma Design System Into Code

Module 2: Design System Monorepo

Lesson 1:

Module 2 Introduction

Lesson 2: (1:19)

How to Structure a Design System Monorepo

Lesson 3: (6:29)

Using Yarn Workspaces to Create a Monorepo

Lesson 4: (5:00)

How to Build a Dynamic Design System With TypeScript

Lesson 5: (5:44)

Create ESLint and Prettier Configs for a Design System

Module 3: Foundation package

Lesson 1:

Module 3 Introduction

Lesson 2: (3:05)

How to Work With and Structure Design Tokens

Lesson 3: (3:14)

A Guide to Transforming Design Tokens with Style Dictionary

Lesson 4: (2:32)

Creating Tailwind CSS Presets With Design Tokens

Lesson 5:

Building the foundation

Module 4: React package

Lesson 1:

Module 4 Introduction

Lesson 2: (1:21)

Setting Up A React Component Library for Design Systems

Lesson 3: (2:05)

How to Write React Components for a Company Design System

Module 5: Storybook package

Lesson 1:

Module 5 Introduction

Lesson 2: (3:18)

Setting Up Storybook for Company Design Systems

Lesson 3: (2:37)

Creating Your First Stories in Storybook

Lesson 4: (1:38)

Controls and A11y testing

Module 6: Styling components

Lesson 1:

Module 6 Introduction

Lesson 2: (9:11)

How to Style React Components With Design Tokens

Lesson 3: (8:45)

How to Use Tailwind CSS With JavaScript Design Tokens

Module 7: Testing components

Lesson 1:

Module 7 Introduction

Lesson 2: (4:01)

React Testing Library - Install and Write Your First Test

Lesson 3: (4:16)

Using jest-axe to Find Accessibility Issues in React Components

Lesson 4:

What is Visual Testing and How Does it Work?

Module 8: CI, Changelogs and Publishing

Lesson 1:

Module 8 Introduction

Lesson 2: (4:09)

What are Changesets and How Do They Manage Versioning?