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.0 149 students started

1h 19m

Published |Updated

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

9 modules33 lessons1h 19m total

Introduction

5 lessons 11m total

Course Introduction

An introduction to the course

INTRODUCTION

1:40 minutes

Overview

Which technologies we will be using in this course

LESSON

Design systems are exploding

Why design systems are becoming popular

LESSON

1:57 minutes

Mental models for design systems

How to think of design systems and model them appropriately

LESSON

2:37 minutes

From Figma to Code

How to convert a Figma file to requirements

LESSON

4:54 minutes

Design System Monorepo

5 lessons 18m total

Module 1 Introduction

What you will learn in Module 1

LESSON

Monorepo Architecture

How to structure a design system monorepo

LESSON

1:19 minutes

Start building the monorepo

Using yarn workspace to create a monorepo

LESSON

6:29 minutes

LESSON

5:00 minutes

LESSON

5:43 minutes

Foundation package

5 lessons 8m total

Module 2 Introduction

What you will learn in module 2

LESSON

Structuring the design tokens

How to work with design tokens

LESSON

3:05 minutes

Transforming the design tokens

Transforming raw design tokens with Style Dictionary

LESSON

3:14 minutes

Tailwind Preset

Creating a Tailwind CSS preset with JavaScript design tokens

LESSON

2:32 minutes

Building the foundation

Using `tsc` to build the foundation package

LESSON

React package

3 lessons 3m total

Module 3 Introduction

What you will learn in module 3

LESSON

Setting up React environment

Setting up the react component library package

LESSON

1:21 minutes

Write our first components

Write our first Button component

LESSON

2:05 minutes

Storybook package

4 lessons 7m total

Module 4 Introduction

What you will learn in module 4

LESSON

Set up Storybook

Developing the component library with Storybook

LESSON

3:18 minutes

Create our first stories

Using Storybook to document our component library

LESSON

2:37 minutes

Controls and A11y testing

Storybook controls and Accessibility addon panel

LESSON

1:38 minutes

Styling components

3 lessons 17m total

Module 5 Introduction

What you will learn in module 5

LESSON

Using the JS design tokens

Styling React components with JavaScript design tokens

LESSON

9:11 minutes

Use TailwindCSS with our design tokens

Styling React components with Tailwind CSS preset

LESSON

8:45 minutes

Testing components

4 lessons 8m total

Module 6 Introduction

What you will learn in module 6

LESSON

React Testing Library

Using React Testing Lirary to test React components

LESSON

4:01 minutes

Accessibility Testing

Finding accessibility issues using AXE with Jest

LESSON

4:16 minutes

Visual Testing

What is Visual Testing and how to use it

LESSON

CI, Changelogs and Publishing

3 lessons 4m total

Module 7 Introduction

What you will learn in module 7

LESSON

Changesets

What are changesets and how to use them

LESSON

4:09 minutes

Publish from our CI

How to test & publish our packages from CI (Github Actions)

LESSON

Summary

1 lesson

Your Instructors

Profile image for konsalex

Costa Alexoglou

Curr. Engineer @neo4j

Co-founder @loceye

👋 Hi! My name is Costa and I'm a Senior software engineer. Currently, I lead the design system at Neo4j, a system that is used by 8+ teams and more than 40 engineers.

I have been working with user interfaces and design for the last 5 years and have focused on shared front-end experience and tooling since 2020. I truly enjoy creating the best shared developer experiences possible, which inspired this course. In the course, you’ll not only get detailed instructions on how to create a complete company design system, you’ll also come to understand best practices that I acquired by building these systems from scratch previously at VisualEyes and Neo4j

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.

 
OrGet this course and every newline Book and Guide with a newline Pro subscription for just $20/mo

$39

$49

Build a Complete Company Design System

$39

$49