\newline Logo
Left arrow icon.
Go to Preview Lesson
Go to Preview Lesson
LESSON 8.1Module 8 Introduction
Course Thumbnail of Build a Complete Company Design System.Build a Complete Company Design System
  • MODULE 1
    Introduction
    • LESSON 1.1Build a Company Design System - Course Introduction
    • LESSON 1.2Build a Company Design System - Course Overview
    • LESSON 1.3What are Design Systems and Why are They so Popular?
    • LESSON 1.4Pace Layering and Atomic Design System Mental Models
    • LESSON 1.5How to Turn a Figma Design System Into Code
  • MODULE 2
    Design System Monorepo
    • LESSON 2.1Module 2 Introduction
    • LESSON 2.2How to Structure a Design System Monorepo
    • LESSON 2.3Using Yarn Workspaces to Create a Monorepo
    • LESSON 2.4How to Build a Dynamic Design System With TypeScript
    • LESSON 2.5Create ESLint and Prettier Configs for a Design System
  • MODULE 3
    Foundation package
    • LESSON 3.1Module 3 Introduction
    • LESSON 3.2How to Work With and Structure Design Tokens
    • LESSON 3.3A Guide to Transforming Design Tokens with Style Dictionary
    • LESSON 3.4Creating Tailwind CSS Presets With Design Tokens
    • LESSON 3.5Building the foundation
  • MODULE 4
    React package
    • LESSON 4.1Module 4 Introduction
    • LESSON 4.2Setting Up A React Component Library for Design Systems
    • LESSON 4.3How to Write React Components for a Company Design System
  • MODULE 5
    Storybook package
    • LESSON 5.1Module 5 Introduction
    • LESSON 5.2Setting Up Storybook for Company Design Systems
    • LESSON 5.3Creating Your First Stories in Storybook
    • LESSON 5.4Controls and A11y testing
  • MODULE 6
    Styling components
    • LESSON 6.1Module 6 Introduction
    • LESSON 6.2How to Style React Components With Design Tokens
    • LESSON 6.3How to Use Tailwind CSS With JavaScript Design Tokens
  • MODULE 7
    Testing components
    • LESSON 7.1Module 7 Introduction
    • LESSON 7.2React Testing Library - Install and Write Your First Test
    • LESSON 7.3Using jest-axe to Find Accessibility Issues in React Components
    • LESSON 7.4What is Visual Testing and How Does it Work?
  • MODULE 8
    CI, Changelogs and Publishing
    • LESSON 8.1Module 8 Introduction
    • LESSON 8.2What are Changesets and How Do They Manage Versioning?
    • LESSON 8.3How to Setup a CI/CD Pipeline in GitHub Actions
  • MODULE 9
    Summary
    • LESSON 9.1Thank you 🙏
Right arrow icon.
Go to Next Lesson
Go to Next Lesson
LESSON 8.3How to Setup a CI/CD Pipeline in GitHub Actions
  • Go Pro
  • Courses
  • Build a Complete Company Design System
  • What are Changesets and How Do They Manage Versioning?
  • Go To Previous Lesson
    Module 8 Introduction
    Module 8 Introduction

    What you will learn in module 8

  • Go To Next Lesson
    How to Setup a CI/CD Pipeline in GitHub Actions
    How to Setup a CI/CD Pipeline in GitHub Actions

    How to test & publish our packages from CI (Github Actions)