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 1 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 2 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 3 Introduction

Setting Up A React Component Library for Design Systems

How to Write React Components for a Company Design System

React package

Module 4 Introduction

Setting Up Storybook for Company Design Systems

Creating Your First Stories in Storybook

Controls and A11y testing

Storybook package

Module 5 Introduction

How to Style React Components With Design Tokens

How to Use Tailwind CSS With JavaScript Design Tokens

Styling components

Module 6 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 7 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

As you may have already noticed, Storybook reads 

 files to generate the stories. To start documenting our components from the 

Before doing this, you may want to delete the auto-generated files from Storybook CLI.

touch stories/Button.stories.tsx stories/IconButton.stories.tsx

---
title: Creating Your First Stories in Storybook
description: Using Storybook to document our component library
useMdx: true
privateVideoUrl: https://fullstack.wistia.com/medias/jkzo7jzu3j
---

import { ImageCaption } from "~/components/index.js";

## Create component stories

As you may have already noticed, Storybook reads `.stories.(js|jsx|ts|tsx)` files to generate the stories. To start documenting our components from the `react` package, we should create two stories.

Before doing this, you may want to delete the auto-generated files from Storybook CLI.

Now let's create two files in the `stories` directory:

```bash
touch stories/Button.stories.tsx stories/IconButton.stories.tsx
```

...and paste the following code inside `Button.stories.tsx`:

```tsx
import { Button } from '@newline-ds/react/src/Button';
import { ComponentMeta, ComponentStory } from '@storybook/react';

export default {
  title: 'Newline/Button',
  component: Button,
} as ComponentMeta<typeof Button>;

const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;

export const Default = Template.bind({});
Default.args = {
  children: 'Demo Button',
};
```

...and the following to `IconButton.stories.tsx`:

Using Storybook to document our component library

Hello, did you have this issue "src/Button.tsx: Support for the experimental syntax 'flow' isn't currently enabled" when you reference the button on the react workspace inside the storybook workspace ?

I suspect that you are using a different version of Storybook than the video, as at the time of shooting v6 was out, and in v7 Storybook changed a lot. I would advise you to join the discord community and check this message which might be related:https://discord.com/channels/621709887231229970/1055579389808611328/1143532443119398942

Costa Alexoglou

You're right! thanks for send the link of the discord channel! The issue was fixed!!

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 1 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:43)

Create ESLint and Prettier Configs for a Design System

Module 3: Foundation package

Lesson 1:

Module 2 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 3 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 4 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 5 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 6 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 7 Introduction

Lesson 2: (4:09)

What are Changesets and How Do They Manage Versioning?