Building Design System in Figma from Scratch - UI UX Mastery

Building Design System in Figma from Scratch – UI UX Mastery

Step by step guide on how to make all of the parts of a Design System with Figma. This includes Design Principles, Tokens, and Themes.

What you’ll learn

Building Design System in Figma from Scratch – UI UX Mastery

• You can start from scratch and make your first design system in Figma from the ground up.
• Design principles and the goal of your Design System
• This includes making a color system, a type system, a layout or grid system, and a lot more!
• Create buttons and forms with their states, as well as bigger parts.
• Advance the use of Swap-able Components, Icons inside buttons and forms, and more.

Requirements

There are some basics about how to use the Figma App

Description

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.

• A look at some design principles and how to make them work.
• The purpose statement in the Design System
• A Design System should be made first so that you can start to design.
• In the Design System, tokens, values, and how to use dark and light themes are all important.
• Add scales and styles to your Color System to make it look better.
• Type Scales and Styles can be used to make a Typography system.
• There are three systems: the Icon System, the Grid System, and the Layout System.
• Buttons, Chips, and Info Bars with Icons You Can Change
• In Figma, learn how to use Auto Layout, Components, and Variants in a better way.
• See how we use the Spacing System in Figma to make things look better.
• 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.

Who this course is for:

UI Designer, UX Designer, Web Developer, Web Designer, and Graphic Designer are some of the people who work in these fields.

Good luck!