Learn the advance technique to setup a design system and implement the same.
What you'll learn
- Define the essentials of design system as per your need
- Learn to setup a Design System in Figma
- Implement a Design System driven application from scratch
- Enable dark mode for your application
Requirements
- Basic skills to use Figma and React JS
Description
Who is this course meant for?This course is meant for Senior Designers or 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 designer, you'll be equipped with the knowledge of structuring a DS and create 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.
Who this course is for:
- User Experience Designer
- Frontend Developer
- Web Developer
- Application Developer
- UI Designer
- Product Designer
