Define your design system's foundations - Lesson 2 part 2 : Introduction to design systems
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