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.3 / 5 (44 ratings)
  • Published
  • Updated
On demand video

1 hr 20 mins

Video Lessons

21 Videos

Course Instructor
Avatar Image

Costa Alexoglou

Curr. Engineer @neo4j

Co-founder @loceye

How The Course Works

01Remote

You can take the course from anywhere in the world, as long as you have a computer and an internet connection.

02Self-Paced

Learn at your own pace, whenever it's convenient for you. With no rigid schedule to worry about, you can take the course on your own terms.

03Community

Join a vibrant community of other students who are also learning with Build a Complete Company Design System. Ask questions, get feedback and collaborate with others to take your skills to the next level.

04Structured

Learn in a cohesive fashion that's easy to follow. With a clear progression from basic principles to advanced techniques, you'll grow stronger and more skilled with each module.

Course Preview

What You Will Build In This Course

Course Overview

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.

Our students work at

  • salesforce-seeklogo.com.svgintuit-seeklogo.com.svgAdobe.svgDisney.svgheroku-seeklogo.com.svgAT_and_T.svgvmware-seeklogo.com.svgmicrosoft-seeklogo.com.svgamazon-seeklogo.com.svg

Sample Course Lessons

Course Syllabus and Content

Module 2

Design System Monorepo

5 Lessons 18 Minutes

Module 3

Foundation package

5 Lessons 8 Minutes

Module 4

React package

3 Lessons 3 Minutes

Module 5

Storybook package

4 Lessons 7 Minutes

Module 6

Styling components

3 Lessons 17 Minutes

Module 8

CI, Changelogs and Publishing

3 Lessons 4 Minutes

Module 9

Summary

1 Lesson

What Students are Saying

        Meet the Course Instructor

        Costa Alexoglou

        Costa Alexoglou

        šŸ‘‹ 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.

        Also I am the create of Design System Cookbooks šŸ“š, the biggest open-source collection of design system examples, and recipes to create scalable design systems.

        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

        Purchase the course today

        One-Time Purchase

        Get lifetime access to this course

        $39$49$10.00 off
        Build a Complete Company Design System
        • Discord Community Access
        • Full Transcripts
        • Money Back Guarantee

        newline Pro Subscription

        $18/MO

        Get unlimited access to the course, plus 60+ newline books, guides and courses. Learn More

        Build a Complete Company Design System

        Billed annually or $30/mo billed monthly. Free to cancel anytime.

        • Discord Community Access
        • Full Transcripts
        • Money Back Guarantee

        Plus:

        • Unlimited access to 60+ newline Books, Guides and Courses
        • Interactive, Live Project Demos for Every newline Book, Guide and Course
        • Complete Project Source Code for Every newline Book, Guide and Course
        • Best Value šŸ†

        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.

        Build a Complete Company Design System

        $39

        $49