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

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:

Color:

Type:

Other:

____________________________________________________

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 ⬇️

____________________________________________________

#Figma #Config #FigJam #Tutorial #NothingGreatIsMadeAlone #design #tips #DesignSystems

[ajuvinaju]

Yes we need more typography related videos please

[EugeneStadnichenko]

Thank you for sharing. I don't understand why so many people are 'frustrated' with some soft simple background music? I find nothing wrong with it. Videos without any soft background music can be dull.

[rexjoshua]

This entire course is an amazing eye-opener. I've watched all the lessons already, and this is my second watch! Thank you very much for creating a great solution (Figma) and going the extra mile to provide enough onboarding for professionals (users) to be great at what we do! As briefly highlighted in the video, it would be really nice to have a content-specific course on typography and then maybe at a later time add other elements like colors, patterns, and layouts.. 🙂. Thank you once again for this gem! You all at Figma are amazing!

[tayyabsohail]

Thanks figma for making such beautiful and knowledgeable playlist for us. There is lot of good information which I did not know and my misconception also resolved

[kavitasuri]

could you remove the or not add the background music in the coming videos?

[rodmm]

please change the music a bit. listening to many videos in a row with a 3o seconds loop is kind of killer for the brain

[smilepink]

Yess!! More typography content please <33

[sebastianordonez]

Yes, more typography content please! Thanks

[emmanueloyebiyi]

Great content, but please try not adding background musics to your videos. It can be frustrating at times.

[viktoriarehders]

Great! But can you please skip having music in the background?

[UkaszRoth]

Well made educational content.
Please dive deeper into typography please!

[DmitriiVolik]

Please, if you have more than 1 video in one playlist - change the music) I really TIRED SO MUCH listen same lofi hip hop more than 30 min(
It's killing me and my desire to watch a new video with the same music!

You have a great animation in your video, now please think about change the music. Thank you!)

[laiyenju]

expect more details about typography! can we have Rasmus Anderson do some sharing😎

[vanishingsides]

I would like a video about how to make an icon system, with consistent size in their container and padding please

[ricraw]

may i know is there any tutorial from scratch where they show u to design ?i am searching something similar tutorial like "petma" . I even followed "tripma" to understand responsive design. But the playlists are not complete or has missing part.

[YOGESHGARGOfficial]

Want to do a deep dive into typography!

[djashawe]

Thanks Figma. I like this Design System series A LOT! I have a question. Q: At around 6:36, I don't understand how the line height came to be 40=8*5. I get that 8 is due to an eight-point Baseline grid, but where did 4 come from? According to the WCAG, line heights should be 1.5x the font size, therefore, it should be 48=1.5*32? Also, I see many designers use 16 as the font size for a body copy, yet according to the WCAG 2.0, the minimum acceptable font size is 18pt. I'm so confused. I like 16 because it is a multiple of 8, but I'm not 100% sure if it's the right thing to do... 🤔

[guapshonen]

this covers majorly app design, I hope you guys do one on based on web design in the future

[mrbobcr]

Yes more about typography please. Speaking of it? Is it recommended to use non integer values in pixels for typography scale? Wouldn't those render differently across all browsers?

[nonen]

PLEASE WE WANT MORE DISCUSSION ON TYPOGRAPHY AND COLORS... sorry for the uppercase