Build your design system - Lesson 3 : Introduction to design systems

26m Link to video
Tags Product demo Figma
Speakers Figma
Edit on GitHub

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