Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Build a Design System from scratch (Full HD)
Rating: 4.1 out of 5(36 ratings)
275 students

Build a Design System from scratch (Full HD)

Learn the advance technique to setup a design system in Figma. Implement the same in ReactJS and Styled Components.
Created byGopal Ojha
Last updated 5/2022
English

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 using Web technologies
  • Learn the advance techniques to implement Design System in React JS
  • Enable dark mode for your application

Course content

4 sections21 lectures1h 21m total length
  • Introduction1:53

    Introduction to the entire course. Pre-requisites and a little bit about me.

  • Learn the fundamentals of Design System3:46

    Learn the need, fundamentals and approach to creating a design system

  • Setting up Design System in Figma3:01

    Setup and tokenize design system in Figma

  • Setting up the development environment1:38

    Setup development environment, add required dependencies.

Requirements

  • Basic skills to use Figma and React JS

Description

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 -

  1. In the first section, we'll learn the fundamentals of the Design System. And set up an environment for design and development.

  2. 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.

  3. Next, we will take the design and implement the same using web technologies from scratch.

  4. 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