Building Design System in Figma from Scratch - UI UX Mastery

Name: Building Design System in Figma from Scratch - UI UX Mastery
Rating: 4.3 (1040 reviews)

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

Created byMuhammad Ahsan Pervaiz

Last updated 12/2022

English

What you'll 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

Course content

3 sections • 37 lectures • 5h 37m total length

Introduction to Design Systems, benefits and outputs of Design System11:40
Introduction to what is Design System, what are its benefits to design and development team and what are the outputs of Design System
What is Purpose Statement in Design System3:34
What is Purpose statement in Design System and what questions we should ask before creating a Design System
Design Principles and how to come up with them5:21
How to gather your product team and hold a Design Principles meetup? Learn all about Design Principles in this lesson
7 Steps to Building your Design System6:17
What are the 7 Steps you take to build your Design System
How to Audit User Interface? Building a UI Inventory4:28
What are good Components in a Design System?10:27
What are components and what are good components in a Design System
Hierarchy of Components in Design System8:38
Which components define a brand in Design System? What is hierarchy of Components and how to arrange components
Download Design System Resources + PDF Notes0:04
Design System Resource files and PDF Notes
Lets test your knowledge about Design Systems

Design Tokens, roles and their values in Design System6:36
What are Design Tokens, their roles and how to assign values to create light and dark themes?
Typography in your Design System3:44
How to name typography scales properly in a Design System and how it works
Spacing System Vertical and Horizontal5:41
Spacing is very important to make any UI Design dense and airy. So this lesson will talk about Vertical and Horizontal spacing system in a Design system
Color System and what you need to do about it6:09
Color System with example of Google Material Design color system and how to name your colors and tokens properly
Grid System and Layout - What's the difference with examples4:21
How Grid System and layout works in a Design System with examples
How theming works and the level of theming in your Design System5:09
How theming works and how much independence you need to provide your design and dev teams

Create Design Principles + Purpose Statement2:26
Let's create Design Principles and Purpose Statement page in Figma
Assignment - Create Design Principles and Purpose Statement Document
Figma Auto Layout and Variants Part 019:09
How we use Auto Layout and Variants in Figma while creating a Design System?
Figma Auto Layout and Variants Part 029:50
How we use Auto Layout and Variants in Figma while creating a Design System?
Creating Responsive Nav Bar in Figma with Auto Layout - Step by Step8:56
How to use Figma to create a Responsive Navigation bar using Auto Layouts
Responsive Modal Window in Figma - Advanced Auto Layouts10:42
How to create an advanced auto-layout Modal Window using Figma?
Auto Layout and Resizing - Understand them well in Figma7:16
Understand Auto Layout and Resizing Options in Figma while creating a Design System?
Typography System - Typography Scale and Type Styles in Figma 0110:03
How to create Typography Scales with help of Figma Plugins and then quickly rename and generate text styles with another plugin
Typography System - Typography Scale and Type Styles 0210:50
How to create Typography Scales with help of Figma Plugins and then quickly rename and generate text styles with another plugin
Assignment - Create Typography System with Type Scale and Styles
Color System - Create Color Scales and Styles to reuse in Figma 0115:55
How to build your Color System with Color Scales and separating usage of Colors
Color System - Create Color Scales and Styles to reuse in Figma 0213:58
How to build your Color System with Color Scales and separating usage of Colors
Assignment - Create Color System with Color Scales and Styles
Buttons and Icons - How to Swap Icons inside button components 0122:05
How to create buttons with different states like hover, active and disabled. Also how to use Icons and swap them quicky inside buttons
Buttons and Icons - How to Swap Icons inside button components 0218:37
How to create buttons with different states like hover, active and disabled. Also how to use Icons and swap them quicky inside buttons
Assignment - Buttons, chips and smaller components
Define your Grid System in Figma4:12
How to define and use your Grid System in Figma while creating your Design System
Creating bigger Typography Components9:35
How to create bigger typography components like combining a heading with paragraph and more in Figma
Using Icons in Form Input Fields 018:23
Designing Fixed width input fields with Swap-able icons and how to have a no-icon input form field using Figma
Using Icons in Form Input Fields 0210:28
Designing Fixed width input fields with Swap-able icons and how to have a no-icon input form field using Figma
Creating Bigger Components in Figma 0127:06
How to create your bigger components in Figma
Creating bigger components in Figma 0216:18
How to create your bigger components in Figma
Assignment - Icons, Illustrations and Grid System
Building Spacing System in Figma 0111:46
Creating Vertical Rhythm and Spacing system for horizontal and Vertical spacing in your Design System using Figma
Building Spacing System in Figma 0210:02
Creating Vertical Rhythm and Spacing system for horizontal and Vertical spacing in your Design System using Figma
Navigation, links and linking pages in Figma8:34
Creating Vertical Rhythm and Spacing system for horizontal and Vertical spacing in your Design System using Figma
Assignment - Create a full Design System
Whats Next +Thank you0:27
What UI Design Skills you must learn next to improve your UI UX design career
BONUS LECTURE0:06
Bonus lesson

Requirements

Basics of using Figma App

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

Who this course is for:

UI Designer
UX Designer
Web Developer
Web Designer
Graphic Designer
Product Managers

Building Design System in Figma from Scratch - UI UX Mastery

What you'll learn

Explore related topics

Course content

Introduction to Design Systems8 lectures • 50min

Components of Design System6 lectures • 32min

Build Design System in Figma - Step by Step23 lectures • 4hr 7min

Requirements

Description

Who this course is for: