Building Design System in Figma from Scratch – UI UX Mastery

People who design things for people like UI and UX will be out of date soon if they don’t use a Design System when they make them. When you take this Design System with Figma Class, you can improve your design skills to a new level. This class will show you how to start making a Design System step by step, and it will be very easy. Will show you how to do this in real life. What is the process of making one? The 7 steps: When and how you are going to get your teams to work together to come up with design rules.

There are many theories about Design Systems that you will learn about in this class, but you will also see real-world examples. What they look like and how they work are things you’ll learn about when you study them.

You will learn about them.

1. A look at some design principles and how to make them work.
2. The purpose statement in the Design System
3. A Design System should be made first so that you can start to design.
4. In the Design System, tokens, values, and how to use dark and light themes are all important.
5. Add scales and styles to your Color System to make it look better.
6. Type Scales and Styles can be used to make a Typography system.
7. There are three systems: the Icon System, the Grid System, and the Layout System.
8. Buttons, Chips, and Info Bars with Icons You Can Change
9. In Figma, learn how to use Auto Layout, Components, and Variants in a better way.
10. See how we use the Spacing System in Figma to make things look better.
11. Emojis and Hyperlinks can be used in Figma pages and files.

5 tasks for you to do and show me your Design System with Figma file links.

In this course, we’ll learn how to use Figma at a high level so that we can make our own design system and get our dream job as UX and UI Designer.