Building Design System in Figma from Scratch UI UX Mastery

Building Design System in Figma from Scratch – UI UX Mastery, available at $74.99, has an average rating of 4.22, with 37 lectures, 1 quizzes, based on 809 reviews, and has 4382 subscribers.

You will learn about Build your first Design system in Figma from scratch Design Principles + Purpose statement of your Design System Build Color System, Typography System, Layout/Grids and a lot more Create Buttons +Forms with their states along with Bigger Components Advance usage of Swap-able Components, Icons inside buttons and form This course is ideal for individuals who are UI Designer or UX Designer or Web Developer or Web Designer or Graphic Designer or Product Managers It is particularly useful for UI Designer or UX Designer or Web Developer or Web Designer or Graphic Designer or Product Managers.

Enroll now: Building Design System in Figma from Scratch – UI UX Mastery

Summary

Title: Building Design System in Figma from Scratch – UI UX Mastery

Price: $74.99

Average Rating: 4.22

Number of Lectures: 37

Number of Quizzes: 1

Number of Published Lectures: 37

Number of Published Quizzes: 1

Number of Curriculum Items: 44

Number of Published Curriculum Objects: 44

Original Price: $199.99

Quality Status: approved

Status: Live

What You Will Learn

Build your first Design system in Figma from scratch

Design Principles + Purpose statement of your Design System

Build Color System, Typography System, Layout/Grids and a lot more

Create Buttons +Forms with their states along with Bigger Components

Advance usage of Swap-able Components, Icons inside buttons and form

Who Should Attend

UI Designer

UX Designer

Web Developer

Web Designer

Graphic Designer

Product Managers

Target Audiences

UI Designer

UX Designer

Web Developer

Web Designer

Graphic Designer

Product Managers

If you are UI UX Designer and not using a Design System while designing, then you get outdated in a few years. Boost your design game to PRO LEVEL with this Design System with Figma Class.This class will help you step by step and will teach you practical examples of how to start creating a Design System. What are the 7 steps you need to take to create a Design System? How you are going to bring your design, development, marketing teams, and managers together to create design principles.

In this class, you will learn all the theories with practical examples about the Design Systems, their components, benefits, and outputs.

You will learn about

Design Principles and how to make them

Purpose Statement in Design System

Design first or create a Design System first

Tokens, Values and how to use theming dark and light in Design System

Generate Color System with color scales and color styles

Create Typography system with Type Scales and Styles

Icon System, Grids, and Layout System

Buttons, Chips, and Info bars with Swappable Icons

Advance usage of Auto layout, Components, and Variants in Figma

See how we use the Spacing System in Figma

Usage of Emojis and creating Hyperlinks inside Figma pages/files

5 Assignments for you to practice and show me your Design System using Figma file links

So let’s learn Pro-Level Figma skills to create a design system and get your dream job as a UX UI Designer

Course Curriculum

Chapter 1: Introduction to Design Systems

Lecture 1: Introduction to Design Systems, benefits and outputs of Design System

Lecture 2: What is Purpose Statement in Design System

Lecture 3: Design Principles and how to come up with them

Lecture 4: 7 Steps to Building your Design System

Lecture 5: How to Audit User Interface? Building a UI Inventory

Lecture 6: What are good Components in a Design System?

Lecture 7: Hierarchy of Components in Design System

Lecture 8: Download Design System Resources + PDF Notes

Chapter 2: Components of Design System

Lecture 1: Design Tokens, roles and their values in Design System

Lecture 2: Typography in your Design System

Lecture 3: Spacing System Vertical and Horizontal

Lecture 4: Color System and what you need to do about it

Lecture 5: Grid System and Layout – Whats the difference with examples

Lecture 6: How theming works and the level of theming in your Design System

Chapter 3: Build Design System in Figma – Step by Step

Lecture 1: Create Design Principles + Purpose Statement

Lecture 2: Figma Auto Layout and Variants Part 01

Lecture 3: Figma Auto Layout and Variants Part 02

Lecture 4: Creating Responsive Nav Bar in Figma with Auto Layout – Step by Step

Lecture 5: Responsive Modal Window in Figma – Advanced Auto Layouts

Lecture 6: Auto Layout and Resizing – Understand them well in Figma

Lecture 7: Typography System – Typography Scale and Type Styles in Figma 01

Lecture 8: Typography System – Typography Scale and Type Styles 02

Lecture 9: Color System – Create Color Scales and Styles to reuse in Figma 01

Lecture 10: Color System – Create Color Scales and Styles to reuse in Figma 02

Lecture 11: Buttons and Icons – How to Swap Icons inside button components 01

Lecture 12: Buttons and Icons – How to Swap Icons inside button components 02

Lecture 13: Define your Grid System in Figma

Lecture 14: Creating bigger Typography Components

Lecture 15: Using Icons in Form Input Fields 01

Lecture 16: Using Icons in Form Input Fields 02

Lecture 17: Creating Bigger Components in Figma 01

Lecture 18: Creating bigger components in Figma 02

Lecture 19: Building Spacing System in Figma 01

Lecture 20: Building Spacing System in Figma 02

Lecture 21: Navigation, links and linking pages in Figma

Lecture 22: Whats Next +Thank you

Lecture 23: BONUS LECTURE

Instructors

Muhammad Ahsan Pervaiz
Product Designer | UX Consultant | Web Developer

Rating Distribution

1 stars: 22 votes

2 stars: 39 votes

3 stars: 128 votes

4 stars: 268 votes

5 stars: 352 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!