
Introduction to the entire course. Pre-requisites and a little bit about me.
Learn the need, fundamentals and approach to creating a design system
Setup and tokenize design system in Figma
Setup development environment, add required dependencies.
Design and create components for the body section of Calendar Popup.
Design and create components for the header and footer section of the calendar popup.
Design and create components for the input/trigger for the calendar.
Create the skeleton for the calendar component.
Import required assets from design.
Add a centralized theme module for the calendar application.
Creating the visible component, which will be clicked by the user to show the calendar popup.
Making Popup and Trigger component to work in sync
Here you'll learn how to set up themes for dark mode. These principles can be applied to any theme-based UIs.
Who is this course meant for?
This course is meant for Senior Designers or Web Developers who are starting to build a Design System (DS) for their existing product. You are required to have a basic understanding of Figma and React JS.
What will be the outcome?
After taking this course, as a UX Designer, you'll be equipped with the knowledge of structuring a DS and creating a library of UI components that can scale. As a developer, you'll be able to ship your very first DS-driven application. For those, who already have a DS in place, which follows old methodologies, here you'll learn some sophisticated techniques to restructure your UI elements and scale them with ease.
Structure of this course -
In the first section, we'll learn the fundamentals of the Design System. And set up an environment for design and development.
Then we will move on to creating an example component based on a design system in Figma. Here you will insights to maintain UI at scale.
Next, we will take the design and implement the same using web technologies from scratch.
As an additional lesson, I'll show you how to add dark mode, or in that aspect any theme to your application.