Build your design system - Lesson 3 : Introduction to design systems
145K views · 2023-05-24
UI Design
Figma is free to use. Sign up here: https://bit.ly/3msp0OV
Habitz design system Community file: https://bit.ly/3BVcql4
Video course: https://bit.ly/3WwqzyI
Written course: https://bit.ly/3MvUvX1
In this lesson, we’ll join Kai and the Habitz team as they build their design system. We’ll focus on some core design system features in Figma: styles and components. As well as some tips for defining and organizing your system.
____________________________________________________
Resources:
Best Practices: Components, Styles, And Shared Libraries: https://bit.ly/433Zjdg
Figma Component Library Structure Twitter Thread: https://bit.ly/3orGCRS
Atomic Design by Brad Frost: https://bit.ly/43mZFvu
Best Practices: Component Architecture In Figma: https://bit.ly/3MyrwlH
Best Practices: Creating and Organizing Variants https://bit.ly/3BOips2
Figma Help Center: Auto Layout: https://bit.ly/4229f5K
Figma Help Center: Nudge Values: https://bit.ly/42itdcR
Figma Help Center: Styles: https://bit.ly/427hIoe
Figma Help Center: Components: https://bit.ly/3OuMLr4
Figma Help Center: Add Style And Component Descriptions: https://bit.ly/3OyQzr8
Figma Help Center: Component Properties: https://bit.ly/3WsTbJ8
Space Grotesk: https://bit.ly/3BOje46
DM Sans: https://bit.ly/3ouGtx6
Smooch Sans: https://bit.ly/3IDQ3Vg
Google Material Design: https://bit.ly/3IBbfuN
____________________________________________________
00:00 - Introduction
00:24 - Styles
01:02 - Components
01:33 - Libraries
03:23 - Set up the file
03:42 - Audit breakdown
04:15 - Atomic design
05:56 - Audit breakdown
6:50 - Spacing
07:19 - Creating styles: Layout grids
08:47 - Autolayout
09:11 - Nudge settings
09:25 - Creating styles: Colors
09:55 - Creating styles: Organizing colors
10:29 - Creating styles: Naming conventions
11:00 - Creating styles : Slash naming
11:30 - Creating styles: Typography
13:50 - Creating styles: Elevation
14:25 - Creating styles: Additional styles
15:08 - Creating styles: Create shadows
15:46 - Creating styles: Create shadow styles
16:18 - Create components: Icons
17:33 : Create components: Illustrations
19:14 - Create components: Day toggle
20:55 - Create components: Action presentation card
23:10 - Patterns
23:19 - Create patterns: Day selector
24:39 - Create patterns: Navigation
25:21 - Summary
____________________________________________________
Find us on ⬇️
Twitter: https://twitter.com/figma
Instagram: https://www.instagram.com/figma
LinkedIn: https://www.linkedin.com/company/figma
Figma forum: https://forum.figma.com/
____________________________________________________
#Figma #Config #FigJam #Tutorial #NothingGreatIsMadeAlone #design #tips #DesignSystems
Habitz design system Community file: https://bit.ly/3BVcql4
Video course: https://bit.ly/3WwqzyI
Written course: https://bit.ly/3MvUvX1
In this lesson, we’ll join Kai and the Habitz team as they build their design system. We’ll focus on some core design system features in Figma: styles and components. As well as some tips for defining and organizing your system.
____________________________________________________
Resources:
Best Practices: Components, Styles, And Shared Libraries: https://bit.ly/433Zjdg
Figma Component Library Structure Twitter Thread: https://bit.ly/3orGCRS
Atomic Design by Brad Frost: https://bit.ly/43mZFvu
Best Practices: Component Architecture In Figma: https://bit.ly/3MyrwlH
Best Practices: Creating and Organizing Variants https://bit.ly/3BOips2
Figma Help Center: Auto Layout: https://bit.ly/4229f5K
Figma Help Center: Nudge Values: https://bit.ly/42itdcR
Figma Help Center: Styles: https://bit.ly/427hIoe
Figma Help Center: Components: https://bit.ly/3OuMLr4
Figma Help Center: Add Style And Component Descriptions: https://bit.ly/3OyQzr8
Figma Help Center: Component Properties: https://bit.ly/3WsTbJ8
Space Grotesk: https://bit.ly/3BOje46
DM Sans: https://bit.ly/3ouGtx6
Smooch Sans: https://bit.ly/3IDQ3Vg
Google Material Design: https://bit.ly/3IBbfuN
____________________________________________________
00:00 - Introduction
00:24 - Styles
01:02 - Components
01:33 - Libraries
03:23 - Set up the file
03:42 - Audit breakdown
04:15 - Atomic design
05:56 - Audit breakdown
6:50 - Spacing
07:19 - Creating styles: Layout grids
08:47 - Autolayout
09:11 - Nudge settings
09:25 - Creating styles: Colors
09:55 - Creating styles: Organizing colors
10:29 - Creating styles: Naming conventions
11:00 - Creating styles : Slash naming
11:30 - Creating styles: Typography
13:50 - Creating styles: Elevation
14:25 - Creating styles: Additional styles
15:08 - Creating styles: Create shadows
15:46 - Creating styles: Create shadow styles
16:18 - Create components: Icons
17:33 : Create components: Illustrations
19:14 - Create components: Day toggle
20:55 - Create components: Action presentation card
23:10 - Patterns
23:19 - Create patterns: Day selector
24:39 - Create patterns: Navigation
25:21 - Summary
____________________________________________________
Find us on ⬇️
Twitter: https://twitter.com/figma
Instagram: https://www.instagram.com/figma
LinkedIn: https://www.linkedin.com/company/figma
Figma forum: https://forum.figma.com/
____________________________________________________
#Figma #Config #FigJam #Tutorial #NothingGreatIsMadeAlone #design #tips #DesignSystems