Build Design System in Figma from Scratch - UI UX Master Class

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

• What you will learn in this Design System Class
• Intro To Design System, Benefits And Outputs Of Design System
• Purpose Statement in Design Systems
• Design Principles And How To Come Up With Them
• 7 Steps To Building Your Design System
• How To Audit UI Inventory?
• What Are Components Of Design System
• How Hierarchy of Components works in Design Systems
• Tokens, Roles Values in Design System
• Typography for you Design System
• Define Spacing System
• Color System and how to name it properly
• Grid System and Layout
• Theming in your Design System
• Design Principles and Purpose Statement
• Figma Auto Layout and Variants 01
• Figma Auto Layouts and Variants 02
• Auto layout Resizing done right
• Responsive Navbar in Figma using Auto Layouts
• Responsive box modal window in Figma
• Typography System - Scales and Styles 01
• Typography System - Scales and Styles 02
• Color Scales and Styles in Design System 01
• Color Scales and Styles in Design System 02
• Button Components and Icons System 01
• Button Components and Icons System 02
• Bigger Components 01
• Bigger Components 02
• Grid System and Layout System
• Creating type combo components
• Using Icon System in Input Fields 01
• Using Icon System in Input Fields 02
• Creating Spacing System 01
• Creating Spacing System 02
• Links and documentation in Figma - Linking pages and frames
• Color System Assignment
• Typography System - Scales and Styles
• Buttons and atoms assignment
• Icons illutrations and Grid System
• Class Project - Design System using Figma
• What's Next