Building a design system
Online course — 4 parts

Building a design system

Let's create a scalable design system for sharing UI components across multiple applications.

Description

What will you learn?

rocket Setting up front-end libraries from scratch
candy Sharing UI components and constants across applications
party-popper Creating a robust and scalable development environment

What can you expect?

  • Pre-recorded videos with walkthroughs, explanations and examples
  • Live online sessions with group discussions
  • Hands-on exercises followed by feedback and suggestions

What does the course consist of?

  • 4 parts
  • 4 practical exercises
  • 15+ pre-recorded videos

Visualization of a design system used for sharing UI components across multiple applicationsVisualization of a design system used for sharing UI components across multiple applications

Curriculum

Part 1

Understanding the context

Lessons
  • Understanding the context of design systems
  • Common problems, struggles and challenges
  • Introduction to the course challenge
Exercise
  • Creating a personal work plan using Miro
Collaboration
  • Overview of the plans
  • Sharing suggestions for improvement
  • Questions & answers
Part 2

Setting things up

Lessons
  • Reviewing the front-end setup
  • In-depth walkthrough of front-end libraries
  • Understanding development environments & tools
Exercise
  • Create an initial design system library and share code in Github
  • Document and share progress in Miro
Collaboration
  • Overview of the exercises
  • Sharing suggestions and feedback
  • Questions & answers
Part 3

Visualizing the system

Lessons
  • Creating a storybook application
  • Integrating the design system library
  • Overview of theming and customization
Exercise
  • Create a storybook application to visualize the design system and share code in Github
  • Document and share progress in Miro
Collaboration
  • Overview of the exercises
  • Sharing suggestions and feedback
  • Questions & answers
Part 4

Connecting the dots

Lessons
  • Creating a flexible test setup
  • Using the UI library across multiple applications
Exercise
  • Create a Design System shared library, use it in your application and share code in Github
  • Document and share progress in Miro
Collaboration
  • Overview of the exercises
  • Sharing suggestions and feedback
  • Questions & answers

Additional

This course is useful if you are:

hammer Working on separate applications
green-apple Building a project that is expected to scale
spider-web Struggling with a messy UI component setup

How to sign up?

Use the form below to fill out your contact details. You will receive an email with instructions and further steps if there will be a free spot available.


ReactStorybookNxPNPM