1 00:00:00,150 --> 00:00:05,940 Everyone, and welcome back, so I know I've spent a lot of time talking about, you know, component's 2 00:00:05,940 --> 00:00:12,390 styles and all those different types of features that Fatema offers, but they play a much larger, 3 00:00:12,390 --> 00:00:14,850 important role when we're thinking about design systems. 4 00:00:15,210 --> 00:00:20,580 And I want to just talk briefly about what is a design system and why do we use one. 5 00:00:21,120 --> 00:00:26,040 So a lot of people give a different name to design systems like people like to call them UI toolkits. 6 00:00:26,040 --> 00:00:27,110 And that's OK. 7 00:00:27,120 --> 00:00:28,950 I mean, that's what they kind of are. 8 00:00:29,250 --> 00:00:33,000 A design system is more so involving your larger and broader team. 9 00:00:33,000 --> 00:00:37,710 You know, your development team is helping making those changes and implementing those systems that 10 00:00:37,710 --> 00:00:38,520 you've created. 11 00:00:38,910 --> 00:00:45,700 So what I want to show you is how I use a design system within Sigma and why it's important. 12 00:00:45,960 --> 00:00:50,450 So this is a design system I've created for our client called Habitual. 13 00:00:51,360 --> 00:00:58,980 Now, I separated it into if we look over to the left here, I separated into three different sections. 14 00:00:59,730 --> 00:01:03,210 Now, this isn't a full entire design system. 15 00:01:03,210 --> 00:01:05,760 There's much more you could possibly even add to this. 16 00:01:05,760 --> 00:01:10,620 But this is enough to definitely get you started and definitely get you creating a bunch of different 17 00:01:10,620 --> 00:01:11,160 pages. 18 00:01:11,940 --> 00:01:19,260 Now, what I've done here is there is this section called the Foundation, which houses all the styles 19 00:01:19,260 --> 00:01:25,040 that we're going to use throughout the application, including certain components which I'll get into. 20 00:01:25,500 --> 00:01:27,270 We have the component section. 21 00:01:27,840 --> 00:01:31,350 Think of the components section, like a section of like atoms. 22 00:01:32,190 --> 00:01:36,270 And when you build up atoms, they create larger components. 23 00:01:36,990 --> 00:01:44,250 This section, which I call recipe's now, the difference between all these different things is components 24 00:01:44,250 --> 00:01:50,820 we'll use of the foundation and recipe's will be more complex components that use a bunch more components 25 00:01:51,000 --> 00:01:51,630 together. 26 00:01:51,810 --> 00:01:53,910 It may be a bunch of cards together. 27 00:01:54,210 --> 00:01:56,220 It may be a bunch of like checkboxes. 28 00:01:56,220 --> 00:01:57,540 That's what I would call a recipe. 29 00:01:58,440 --> 00:02:03,060 And they also use things from the foundation to bring this all together. 30 00:02:03,600 --> 00:02:05,950 So let's get right into it. 31 00:02:05,970 --> 00:02:09,570 I'm going to show you some examples of foundation and components and recipes. 32 00:02:09,570 --> 00:02:13,880 In later, videos will go into how to create individual pieces for this design system. 33 00:02:14,280 --> 00:02:18,980 So your foundation will host things like colors and these are your main styles. 34 00:02:18,990 --> 00:02:22,170 So these are the colors for the application. 35 00:02:22,530 --> 00:02:28,380 You can see that I've broken them into different sections and if we go down to the right, we'll see 36 00:02:28,480 --> 00:02:29,610 our local styles. 37 00:02:29,610 --> 00:02:32,730 And these are color styles that's going to actually typography. 38 00:02:32,730 --> 00:02:36,120 We have typography and remember how we were creating that type system. 39 00:02:36,690 --> 00:02:38,910 This is just more fully fledged. 40 00:02:38,920 --> 00:02:41,820 We have different headings you can see here. 41 00:02:42,420 --> 00:02:45,600 We have different text options. 42 00:02:45,600 --> 00:02:52,520 So body large, small, regular labels, hence, which are displayed over here on the right. 43 00:02:53,010 --> 00:02:54,980 And these are all different styles. 44 00:02:55,380 --> 00:02:57,110 I have icons. 45 00:02:57,120 --> 00:03:00,360 Twenty four pixel and sixteen pixel variants. 46 00:03:01,350 --> 00:03:02,400 I have grids. 47 00:03:02,400 --> 00:03:05,310 Let's turn those on so you can see the different types of grids I'm using. 48 00:03:05,550 --> 00:03:12,450 Mostly these are just for the entire mobile screen and all these are used just so we can actually start 49 00:03:12,450 --> 00:03:13,740 building components as well. 50 00:03:13,750 --> 00:03:20,280 So if I go over to the component section, I have avatars and different versions of avatars. 51 00:03:20,280 --> 00:03:23,250 You'll see that there is a base layer here and I'll get into that later. 52 00:03:23,460 --> 00:03:26,370 There's different types of buttons that we will be using. 53 00:03:27,870 --> 00:03:31,290 There's cards over here, different types of cards that we have. 54 00:03:34,170 --> 00:03:35,640 Checkboxes. 55 00:03:37,170 --> 00:03:42,480 So as you can tell, there's so many different types of components that we're making and reusing even 56 00:03:42,480 --> 00:03:47,370 in our recipe section, if we take a look at something like carp, we have different types of karplus. 57 00:03:47,790 --> 00:03:49,920 We have different types of like footers. 58 00:03:50,460 --> 00:03:55,650 So these types of things are definitely ways to implement your recipes. 59 00:03:56,190 --> 00:04:02,250 So in our next video, we're going to go over how to work with different types of elements in the foundation 60 00:04:02,250 --> 00:04:03,420 of your design system.