Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Building Design System in Figma from Scratch - UI UX Mastery
Intro to Design System
Intro To Design System Benefits and Outputs of Design System (11:39)
Purpose Statement (3:34)
Design Principle and How to come up with them (5:21)
7 Steps to Building Your Design System (6:17)
How to Audit UI Inventory (4:28)
What are Components in Design System (10:26)
Hierarchy of Components (8:38)
Download PDF Notes
Download Figma source file
Parts of Design System
Tokens, Roles and Values (6:36)
Typography for your Design System (3:44)
Define Spacing System (5:41)
Color System (6:09)
Grid System and Layout (4:21)
Theming in your Design System (5:09)
Designing your First Design System in Figma
Design Principles and Purpose Statement (2:26)
Figma Auto Layout and Variants in Design System Part 01 (9:09)
Figma Auto Layout and Variants in Design System Part 02 (9:49)
Auto Layout Resizing Done Right (7:16)
Typography Scales and Text Styles Part 01 (10:03)
Typography Scales and Text Styles Part 02 (10:50)
Color Scales and Styles in Design System Part 01 (15:55)
Color Scales and Styles in Design System Part 02 (13:58)
Buttons and Icon System part 01 (22:05)
Buttons and Icons System Part 02 (18:36)
Bigger Components Part 01 (27:06)
Bigger Components Part 02 (16:18)
Grid System (4:12)
Creating Type Combo Components (9:35)
Using Icon System in Input Fields Part 01 (8:23)
Using Icon System in Input Fields Part 02 (10:28)
Creating Your Spacing System Part 01 (11:46)
Creating Your Spacing System Part 02 (10:01)
Links and Documentation in Figma - Linking Pages and Frames (8:34)
Assignments
Color System Assignment (1:28)
Typography System Assignment (2:25)
Buttons and Atoms Assignment (1:44)
Icons, Illustration and Grid Assignment (0:55)
Final Assigment Design System as a Whole (2:23)
Teach online with
Creating Type Combo Components
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock