Build a Company Design System - Course Introduction

Build a Company Design System - Course Overview

What are Design Systems and Why are They so Popular?

Pace Layering and Atomic Design System Mental Models

How to Turn a Figma Design System Into Code

Introduction

Module 2 Introduction

How to Structure a Design System Monorepo

Using Yarn Workspaces to Create a Monorepo

How to Build a Dynamic Design System With TypeScript

Create ESLint and Prettier Configs for a Design System

Design System Monorepo

Module 3 Introduction

How to Work With and Structure Design Tokens

A Guide to Transforming Design Tokens with Style Dictionary

Creating Tailwind CSS Presets With Design Tokens

Building the foundation

Foundation package

Module 4 Introduction

Setting Up A React Component Library for Design Systems

How to Write React Components for a Company Design System

React package

Module 5 Introduction

Setting Up Storybook for Company Design Systems

Creating Your First Stories in Storybook

Controls and A11y testing

Storybook package

Module 6 Introduction

How to Style React Components With Design Tokens

How to Use Tailwind CSS With JavaScript Design Tokens

Styling components

Module 7 Introduction

React Testing Library - Install and Write Your First Test

Using jest-axe to Find Accessibility Issues in React Components

What is Visual Testing and How Does it Work?

Testing components

Module 8 Introduction

What are Changesets and How Do They Manage Versioning?

How to Setup a CI/CD Pipeline in GitHub Actions

CI, Changelogs and Publishing

Thank you 🙏

Summary

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.

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.

Build a Complete Company Design System

Transform design tokens with Style Dictionary.

Manage an enterprise design system monorepo with Yarn workspaces.

How a simple monorepo works with Yarn workspaces

What design tokens are, and how to generate them with Styled-Dictionary

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

One final touch; we should "build" this package to be able to consume files from the lib folder,
and provide typings for JavaScript tokens and maybe for the Tailwind config file (though not needed at all).

---
title: Building the foundation
description: Using `tsc` to build the foundation package
---

## Building the foundation

One final touch; we should "build" this package to be able to consume files from the lib folder,
and provide typings for JavaScript tokens and maybe for the Tailwind config file (though not needed at all).

To do this, we can again extend the `tsconfig.json`

```json
{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "baseUrl": "./src",
    "outDir": "./lib"
  },
  "include": ["./src"]
}
```

Using `tsc` to build the foundation package

It seems like build-style-dictionary isn't a valid script?

hermano360

Thanks for finding this! Indeed this should be build-tokens will update the course. 

Costa Alexoglou

Both files, index.d.ts and index.ts, have the same content?

Alba Moreno

Hey Alba, in this example yes,  but as you move to the react package you will notice that the files will start to differ depending always on the content of the file

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?