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
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
