Build a Company Design System - Course Introduction

An introduction to the course

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

Table of Contents
  • |

Lesson Transcript

  • [00:00 - 00:08] Are you starting to create a design system library from scratch for your company? Or do you want to know more about design tokens, storybook, or third-component libraries?

  • [00:09 - 00:23] I'm Costa-Alexo-Glu, senior software engineer at Neo4j, and I will give you the tools you need to create flexible, enterprise-grade design systems that your co-workers will love. But why exactly are more and more companies creating their own design systems?

  • [00:24 - 00:32] First of all, it increases developers' productivity. Developers will stop trying to replicate the work that other teams have already done in their own codebase, but was never shared.

  • [00:33 - 00:42] Also, it creates consistency. And this is something enterprises or even smaller companies really care about as soon as they start having more than one user-facing application.

  • [00:43 - 00:53] And the last reason is that building velocities increased. With a design system in place, developers know where to find branding assets, and can grab components of the self and start building.

  • [00:54 - 01:24] This eventually leads to developers spending more time solving hard engineering problems, and less time styling things. In this course, we will learn how to create a yarn-monitor repo, how to create design tokens with style dictionary, create a component library from scratch with React, create a tail-wint CSS preset, test for accessibility issues with acts, conduct visual testing with Chromatic, and the last chapter will focus on how to publish our design system with change sets and GitHub actions.

  • [01:25 - 01:39] The only things you need to know before this course is basic knowledge of JavaScript, CSS, and the hands-on experience with any UI framework like React, which is the framework that we will use for the component library. That's a wrap, and let's get started building our own design system.

Are you starting to create a design system library from scratch for your company? Or do you want to know more about design tokens, storybook, or third-component libraries? I'm Costa-Alexo-Glu, senior software engineer at Neo4j, and I will give you the tools you need to create flexible, enterprise-grade design systems that your co-workers will love. But why exactly are more and more companies creating their own design systems? First of all, it increases developers' productivity. Developers will stop trying to replicate the work that other teams have already done in their own codebase, but was never shared. Also, it creates consistency. And this is something enterprises or even smaller companies really care about as soon as they start having more than one user-facing application. And the last reason is that building velocities increased. With a design system in place, developers know where to find branding assets, and can grab components of the self and start building. This eventually leads to developers spending more time solving hard engineering problems, and less time styling things. In this course, we will learn how to create a yarn-monitor repo, how to create design tokens with style dictionary, create a component library from scratch with React, create a tail-wint CSS preset, test for accessibility issues with acts, conduct visual testing with Chromatic, and the last chapter will focus on how to publish our design system with change sets and GitHub actions. The only things you need to know before this course is basic knowledge of JavaScript, CSS, and the hands-on experience with any UI framework like React, which is the framework that we will use for the component library. That's a wrap, and let's get started building our own design system.