Define your design system's foundations - Lesson 2 part 2 : Introduction to design systems

Video Description

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/3Oz6nKH Foundations are the what of your design system. The building blocks you'll use to create product experiences, like visual styles, colors, typography, and components. As well as patterns, like structures, behaviors, and conventions. ____________________________________________________ Resources: Accessibility: The Book on Accessibility: https://bit.ly/3WC50gb Web Accessibility Checklist: Magenta a11y.com: https://bit.ly/3Ow00ru Color Blind Accessibility Manifesto.com: https://bit.ly/43oIuJO Adhoc Accessibility Playbook: https://bit.ly/3BP9eHR Universal Music: Creative Differences Handbook: https://bit.ly/424EM7g Stark's Public Library: https://bit.ly/3MuiUwf Book: Accessibility for Everyone: https://bit.ly/3q5KZm6 Fable: Accessible Usability Scale: https://bit.ly/45rZQHB Color: WCAG 1.4.1 Use Of Color: https://bit.ly/3OxeqaT WCAG 1.4.4 Color Contrast: https://bit.ly/3ODYyDp Figma Community: Plugins For Color Contrast: https://bit.ly/3MS5Kuo Nielsen Norman Group: Using Color To Enhance Your Designs: https://bit.ly/42TCARb Color From DesignSystems.com: https://bit.ly/42XuMhg Figma Community: Resources For Color Palettes: https://bit.ly/43hxP4h Hubspot’s Color Theory 101: https://bit.ly/3OxkDDx Type: Typescale by Sam Smith: https://bit.ly/3WsNmLM Scaaale by Nicolas Massi: https://bit.ly/3BXDXlP Kick Start Your Typographic System by Tom Lowry: https://bit.ly/45oGfYW Typescale.com: https://bit.ly/45upBr0 Other: A Complete Guide To Iconography: https://bit.ly/432HH1A Spacing. Grids, and Layouts: https://bit.ly/3ozKTCF ____________________________________________________ 00:00 - Introduction 00:08 - Foundations 00:35 - Accessibility 01:39 - Color 02:50 - Try it out 03:08 - 60 / 30 / 10 Rule 03:36 - Accessibility considerations for color 03:58 - Web Content Accessibility Guidelines 04:42 - Typography 05:01 - Choosing a font 05:42 - Type scale 06:32 - Typography grid tip 06:46 - Type scale hierarchy 07:43 - Limits to a type scale 08:19 - Try out an audit 8:43 - Elevation 9:12 - Elevation Tip 9:32 - Bonus elevation tip 9:45 - Iconography 10:01 - Icon system styles 10:37 - Testing an icon 11:12 Try out search terms for icons 11:36 - Icon size, container and padding 11:58 - Icon styles needs 12:15 - Icon grid 12:22 - Grids, layouts and spacing 12:51 - Layouts and breakpoints 14:13 - Responsive or fluid breakpoints 14:28 - Grids 14:39 - Column grids 15:20 - Baseline grids 16:05 - Modular grids 16:36 - Spacing 17:33 - Inconsistency 17:56 - Systematic thinking 18:10 - Patterns 19:14 - Wrap up ____________________________________________________ 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