Build a Complete Company Design System - Newline

This course is a thorough manual for publishing your most memorable component library and design assets using React, TypeScript, Storybook, Tailwind CSS, and Styled Dictionary. You'll make an adaptable, enterprise-grade design system library that your collaborators will really appreciate.

 

What You Will Learn

• How a simple monorepo functions with Yarn work areas
• What design tokens are, and how to create them with Styled-Dictionary
• Instructions to make a shared component library
• Automate testing for accessibility issues (Hatchet) and visual changes (Chromatic)
• Develop and document our design system with Storybook
• The most effective method to distribute with Github Actions and Changesets
• The most effective method to give a Tailwind configuration to different groups

 

In this course, we will jump into the universe of design systems. We will figure out how they can assist developers with increasing their efficiency, make consistency across a company's items, and eventually accelerate the development interaction.

We will begin by covering the basic ideas of design systems, then, at that point, continue on toward the architecture of a monorepo codebase. We will set up shared configurations for TypeScript, ESLint, and Prettier, and make an establishment package for hosting and distributing design tokens and assets.

Then, we will make a React package with demo components that are styled using our design system's style tokens. We will likewise make a Storybook package and gain proficiency with the prescribed procedures for developing and documenting components with TypeScript. We will zero in on styling our components in two different ways: using CSS-in-JS with styled-components and JavaScript design tokens, as well as Tailwind CSS classes.

Finally, we will figure out how to make tests for our React components using React Testing Library and Hatchet, and oversee discharges using changesets and set up a CI pipeline with GitHub Actions.

This course means to be a thorough aide, or a cookbook, to building a complete company design system without any preparation. Toward the finish of the course, you will have the information and abilities to make a reasonable and maintainable design system for any association.

 

Course Details

9 modules33 lessons1h 19m aggregate

Introduction

5 lessons11m all out

 

Course Introduction

An introduction to the course

INTRODUCTION

1:40 minutes

Outline

Which advancements we will use in this course

Illustration

 

Design systems are exploding

Why design systems are becoming famous

Illustration

1:57 minutes

 

Mental models for design systems

Step by step instructions to think of design systems and model them fittingly

Example

2:37 minutes

 

From Figma to Code

The most effective method to change over a Figma document to necessities

Illustration

4:54 minutes

Design System Monorepo

5 lessons18m all out

Module 1 Introduction

What you will realize in Module 1

Example

 

Monorepo Architecture

The most effective method to structure a design system monorepo

Example

1:19 minutes

 

Begin building the monorepo

Using yarn work area to make a monorepo

Illustration

6:29 minutes

 

TypeScript Configuration

Illustration

5:00 minutes

 

ESLint and Prettier Configs

Illustration

5:43 minutes

Establishment package

5 lessons8m all out

 

React package

3 lessons3m complete

 

Storybook package

4 lessons7m absolute

 

Styling components

3 lessons17m absolute

 

Testing components

4 lessons8m absolute

 

CI, Changelogs and Publishing

3 lessons4m absolute

 

Synopsis

1 example

 

Your Instructors

 

Costa Alexoglou

Curr. Engineer @neo4j

Fellow benefactor @loceye

blog.alexoglou.com

 

👋 Greetings! I am Costa and I'm a Senior programmer. As of now, I lead the design system at Neo4j, a system that is utilized by 8+ groups and in excess of 40 engineers.

I have been working with UIs and design throughout the previous 5 years and have zeroed in on shared front-end insight and tooling since 2020. I really appreciate creating the best shared developer encounters conceivable, which inspired this course. In the course, you'll not just get point by point instructions on the most proficient method to make a complete company design system, you'll likewise come to see best practices that I obtained by building these systems without any preparation beforehand at VisualEyes and Neo4j