Build your design system – Lesson 3 : Introduction to design systems
141K views on YouTube
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