Skip to content
UdemyFigmaPaid courseIntermediate levelCertificate

Building Design System in Figma from Scratch - UI UX Mastery (Udemy.com)

Step by Step guide about how to create all parts of Design System using Figma - Design Principles, Tokens and theming

Created by: Muhammad Ahsan Pervaiz

Last updated December 2022

icon
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

How it compares

Against the other 32 rated Udemy courses in Figma on CourseDuck:

  • Rating4.4 out of 5higher than 34% of them
  • Reviews1,054#12 of 33 by number of reviews
  • Length5.6 hourslonger than 50% of them
  • Last updatedDecember 2022earlier than 71% of them

icon
Course Description

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

icon
Udemy Discount

The discount is applied through our link. Open the course from here and Udemy's current promotional price is applied at checkout on most courses, no code to type.

Some courses are excluded from Udemy's promotions. If the price does not drop, clear your browser cookies and use the button again.

icon
Instructor Details

Muhammad Ahsan Pervaiz

Hi, I’m Muhammad Ahsan, a Senior UX/UI & Product Designer with 20 years of experience in UX design, product strategy, and design consultancy.

I started my journey from scratch and went on to work with FORTUNE 500 companies including Intel, Panasonic, and Coca-Cola, along with SaaS startups and ProductHunt launches. I’ve helped teams design user-centered products and UX onboarding systems, including a startup that ranked Top 3 Product of the Day on ProductHunt.

Currently, I work as a Lead UX Designer Consultant, where I design and scale dashboards, portals, and SaaS applications. For the past few years, I’ve been leading UX efforts for a U.S.-based weight loss healthcare company, LumiMeds, designing patient, provider, and admin portals used by real users daily.

Alongside client work, I’ve taught UX design to over 100,000+ students globally across multiple learning platforms. I also run a YouTube channel, LearnUXID, with 36,000+ subscribers, where I share practical UX, UI, and product design insights from real-world projects.

icon
More courses by Muhammad Ahsan Pervaiz

$13.99

$13.99

$89.99

$84.99

$69.99

$64.99

icon
More Figma courses

$124.99

$149.99

$109.99

$74.99

$69.99

Free

icon
Reviews

4.4

1,054 ratings on Udemy

Select a bar to show only those reviews.Select the bar again to show every rating.

By Rosmari Varela on 7/20/2026

Really nice to follow course, tutor has a lot of knowledge in the subject. Good pacing, understandable assignments, in general a very great way for creating your first design system and learn a thing or two about figma :)

By Janina Trapp on 11/29/2024

It was a very nice class with nice learnings and good explanations. The only thing is that figma has updated several times since this class was creates -> sometimes you have to look ups for newer tutorials in YouTube for specific things. But it's a really good and nice ordered guide through building a design system

By Ricardo Andrés Malavé Rodríguez on 9/5/2024

buena experiencia! a pesar de que se encuentra desactualizado, tiene muy buenos tips, buena gentión para iniciar un proyecto, es bastante organizado y se le puede sacar mucho provecho para iniciar en el mundo del UI o mejorar algunos procesos ya avanzados. Si estás buscando un curso para iniciar o para aprender ciertos tips sin afanes, te lo recomiendo.

By Raoul Flaminzeanu on 11/17/2023

First part of the course is a good introduction in Design Systems, and the second part is an applied tutorial of how to work in Figma. The course lacked clearer structure in the second half, becoming a "watching someone work in Figma" type of tutorial. I felt the course it lacked a wrap up also.

By Swathi Krishna on 1/4/2023

Great course for beginners, but not for intermediate/experts in creating design systems in Figma. The course is not up-to-date with the latest Figma features as of Jan 2023, which is annoying. Expected to learn more tips and tricks on how to efficiently build and structure components in Figma for design systems.

By Donald Yotay on 1/1/2023

Yes, the course is a very good match for me because I just got into product design and I've always known at the back of my mind that it is very essential to have a design system as building blocks before going into full throttle. The video about "purpose statement in design system" was a lovely eye opener.

By Steve Brown on 11/15/2022

This was a good course to understand the fundamentals of what a design system is, how to create one, and how to use it. Learning design systems is a very BIG topic, but this was a good jumping off point for your design system learning journey,

By Rahil Lathigara on 7/2/2022

I must say, the course was excellent. The tutor has brilliantly explained each and every aspect of the design system. I am a practicing ui/ux designer for 3+ years and this course was just to brush up my skills if I lack anything, and tbh really thankful to Muhammad Ahsan Pervaiz for such an easy explanation of every topic. Easy to understand and easy to implement! Will highly recommend this course to uiux freshers.

By Stas Smirnov on 5/2/2022

Thanks Muhammad for this nice course - it's easy to watch and everything is clear. I like the content i learned - especially, the cool Figma plugins references. It was very useful for me. Maybe i was expecting to learn more about components and page/component interaction - but, maybe i'm asking too much :D Btw, thank you Muhammad - you gave me a nice kickstart for start learning figma world

By Rebecca LeVine on 4/21/2022

I appreciate how thorough this course was - for me, a lot of the individual pieces were review, but I found it really useful as a whole. It made me realize that while I always plan out colors and typography in advance, there are other elements of design I end up doing on the fly, which results in more work/endless spot checking for inconsistencies. I feel like I have a very solid toolkit now for taking on a new project the right way.

Showing all 10 reviews on CourseDuck

Read all 1,054 reviews on Udemy

icon
Quality Score

No CourseDuck member has rated this course yet. Taken it? Give each part a thumbs up or down.

Content Quality
/
Video Quality
/
Qualified Instructor
/
Course Pace
/
Course Depth & Coverage
/

Overall Score : 88 / 100