Transcripts
1. Course intro: Hey, welcome to this course way. We're going to talk about the science system. We are going to learn what his real science system, how to use it. And at the same time, we will be learning Fichman to create our own design system In all the process, we will be learning how toe make layouts greet Help you choose Colores How to create your own palette? How toe pick a group typefaces as well. How to create a vertical rhythm. How to choose your typographical is key and off course We will be creating a lot off components or elements for your of the same system like tick boxes, radio battles, bottles off course Texan boost X areas, all that carnal stuff. I hope you're going to the class. My name is Bruno on. Do you accept you? I designer. I work for a big data company. I tried to make simple, difficult problems, so I hope to see you in the lesson on Let's get started with it
2. What is and why a design system: So, first of all, thank you for going to the course. I'm going to be a brief introduction about what our decency stems. Basically, the same system is a mix between you I components for designers and quoting components for developers in front end developers. So that makes that, usefully is combined is what makes a design system Imagine the component bottom. Okay, my meaning, No grand season that every time a designer cost a bullet, bottom has to make it by by himself or herself all over the lower again on the same thing applies to the to the Loper. Imagine every time the developer has to put a bottle in the page has to go and see the border radios they call. Or that that that they faces everything so that script time consuming and at the very end, it gives in consistency to them to the platform's or the problems you're building. So basically, the science systems are pretty good toe give consistency to all. Besides made easier to be sang with decision making. So everybody stays alive, a fences and better Worf lovely development teams, because if you have sir components, you are no, not the's gassing everyday kind of components you are doing and everybody talks the same language. Eso other very. And that makes the probably signed last longer because you make less mistakes. Every everything is more consistent. As I told you all things, to speak the same, the same language and at the very and this is but very important for their for the business and the company because or for yourself, because on the on the long run, it say it's safe. Money at the very end, can seem like something that you spend money on it and because maybe you will spend like a month doing it. And maybe you are not alone. You are working with a group of three or four people so that the reality a little bit of money risking, but at the very ending alone they're running, it's pretty good to the in other Marie in. The important thing is that you were going to make a better product. So this is why basically every commend toe toe make any sense system not oppose need it, uh, some roads, Yes, I just need, like, basic You like it some talking with from them guys, But um, mostly I recommended almost every time. So let's get started and see some decency stands up that I recommend to have a look. Okay, so let's go for it.
3. Figma interface: so welcome to this lesson. We are going toe, Leonard. It'll be fixed. My interface. If you already have, use Fichman before you can escape this lesson because maybe it's a little bit boring to you . But if is the first time you fired up fig MMA, Um, just the little reminder off water days victimize. Designing prototyping tool for me right now is one of the best tools out there. And and the cool thing about Fatemeh is that it's ah, it can be a desktop application, but as well. You can work on the browser on any fire so you can use it on any operating system like Mac windows liners, wherever you want. Toe toe the sign. Ah, you are good to go. So it's a fantastic tool because they were all theirs, that there are other tools pre cool, like Ah, it's get that only worked for Mac or well at all. X'd worked for my come PC, but if you are a Lena's user is going to be complicated. So anyway, let's get started and let's create out first. Ah, file. Here it seems I mean that they stop the application you will see now that I have these menu here, but anyway, everything can be done just inside this. Ah, inside this window. So we don't need this menu. Ah, here. When this is kind off our broad, it Speight and then I have, like, already one created. But I came press here in the plaice bottom and go to new fire. And the fantastic thing is, the file just, uh, open itself like a black campus. Now, if you click here, you can take the name. So we're going to rename these, ask you to share the science system, and we're going toe learn the base. It's the basic tools here. I won't go too deep because we will see it later as we a sui see, before we have these menu here, but the same functions, you're going to have them here too. So it's exactly the same menu appear down here. So while you can take that, there are a lot off things like you file you can import for from sketch. Um, you can play its emitters sport safe versions because FEMA has this school feature that you can, um, you have the person in system inside off it inside its core. So you don't have to depend on third party software and well, and let's go to the important thing here. Ah, we have here. They move on a scale tool. Here we have the frame on this life stools. And here we have our polio on Things are rectangle lines, arrows our opiate or shapes. And you have here like a shortcut to place your images. This is the four Vector this band. Yes. You know, just you can Yes, paint whatever you want. Pencil. Find indie it. I never use it part. If you are in a use a tablet for designing You're good to go with the pen or Yeah, if you are making Simon of straight centers now, the Tito it's obviously for text. And this is for comments to put comments inside your these signs. Um, I recommend, as you can see here, close to the Soviets, you can you can see here some letters like R l sift l. These are the circuits. A recommend just toe, um, remind the basics like rectangle, oval line and the frame. These are pretty useful. Oh, no. I don't want to put comments now, so I'm going to press F, and I'm going to be ableto put a frame if you are coming from a sketch, this gets called them are boars or their another self where they call them campuses. Ah, here. Feet. Michael Holden's frames. Okay, so this is in pre important to remember, because everything has to be the sign in frames in Sigma. Okay, so if we press, um, okay, if we press f a that works, that works as well A or F. So if you select the f ah kee or you go to frame, you can see here on this right side, Bart that you have like some presets for the phone for tablet for the desktop world's paper , social media, whatever. This pretty cool. So you don't have to, uh, get to a stress about what sizes, two twos and everything. If I'm descending for whips websites, I usually go with MacBook pro and someone my say, Why don't you go to desktop? All right? Because, as you can see, they have they served the same with I lied 1440 But the height it here is less height. And I find this pre cool or I like it more because when you are presenting something toe client with these the aspect ratio, it's a little bit to a square for my taste. Let's just give on example how all of them look. So we pressed f again and then we choose my who pro. And now you can you can see the difference here That is more like Is more squared like it? Yeah, it's, ah, 4/3 of something. And this is more like, you know, panoramic style for presentation is going to fit better and as well, When I'm designing for Web sites usefully, you re sign, you have to take into account that usually here comes a brochure. Ah, we have to assume these that the bruiser, the tops, the manuals, all the stuff and behind, probably we have something to the toolbar or something. So at the very end, this is going to sum up something like this. But I want to my designs to be bare ladies. So this is our frames where we can put our elements. I have Yes, press are to make a rectangle. Okay, so something interesting to when you, uh when you are putting opiates in your in your campus and you say, Let them is that you can see here on the side work that you can use like Elaine in that it aligns to the campus in the top on the middle. You know as well you can move it around here. You can move it around as well. We just selecting. But it might injure. Was the position here on 00 because he wanted on the top. Do just do it for Heather, for instance, something like this. It's going to be pretty straightforward. Sometimes you go something like these, you don't realize that you are, you know, like 18 peak sales before you suit. So that's prequel and all the things you can do here as well. Let's for me in a little bit here that you can do it with command or control, plus buttons that here you can change the border radios off our rectangle. If we zoom in here a little bit more, we we can see here as well that we can move around this counterpoints and sayings the border radio Sicily. Sometimes you may need, for instance, if you are designing like a car or something like a ticket, or you want to give this feeling that thes you want thes, um, borders to be with radios and these to be a square? Because if you do this, all of them are going to change. But there is this little icon here, independent corners. You can put them out, and then you can come here and yeah, you know, you can just run them up and a little bit. So in case you need this kind off play like car or something, you can do it. Okay, so, you know, um, here, Well, we will talk later about all these stuff. What? Yeah, well, no later we will talk later about it s so you just need to know that the tools that you need to design everything they are here, and and while something interesting is that you can change the Cold War here. Well, in this field final, but this is pretty much what you need. Toe beer started right now. So I see you and their next lesson
4. Some design systems: Hey, welcome back in these. Listen, we are going toe to see what are the main component? How was made? A. It sounds. Sees them I have here prepares home. If you're samples, all those are free, so you can you can just go low them. I will put their links so you can have a look at them and play around with them or modify them or whatever you want to do. As I said, they are Frito to look at them. Ah, if we see here the 1st 1 we can see that we in half in these pages, like Colores typography, icons, some assets board the radios pre important saddles as well greets why there's branding controls, which is primarily buttons in them forums and cars. Know that stuff then this this part as he has the component. Let's have a look at another one. As we can see, we have again colores typography than the components they have included here. Some frames, which includes some shadows. Ah, some y elements, something iconography to. But as you can see, it's kind off the same. Let's have a look to another one here that you start with a great pre important degree. Then they lay out for different devices. They have again the colores typography. I cones some assets like avatars, reported radios again someday by years. In Sadow is pretty important, too. And then the components here, like battles, form starts, cards this components, cetera, cetera. You can have a look here while they have built here some charts. So yeah, cards, this components. But the as you can see, there is kind off a foundation in all these, um, design systems that are coolers, typography, greets on layout and border radios and sad owes. And there is an important thing to that. It's go spacing the this heart of space you defined between the elements. But we are going to see and in the in depth, like in a in a minute or so. Then we can go to it with some websites where some companies they have put their design systems. There are some Web pages like design systems report or Adele. I will put the links to that where you can see some design systems here, and you can explore them. Just click on them. Have a look how how, um, these enterprises are are making it right. There are two that I really like. One of them. It's carbon. This is a decent system off IBM. Yeah, it's kind of an upper so open source, the same system and it's pretty pretty, pretty cool. It's pretty extensive. It's so extensive. That sometimes is overwhelming, is how how but But hey, what we need in this part it's ah toe. See, what are the common patterns between all the decent system so we can get the best off all of them and what to do at the beginning. So as we can see here, they are defined and agreed to the are using like a to pixel greed. They changed it because the other beginning that they were using their eight pixel great date. Then they went to four and now they realized they needed to pixel way to be more operate and to fulfill all their needs. So But as we can see, this is the important thing. They all goes in the same way. So they talk about the greed and layouts, the coal ore, the icons again the well, they took out a little bit about pictograms and motion, but this is not important for that. The same system Right now it's basing. That's where I was talking, like a minute ago. Like they defines different space space settings for different objects. So they so they have these kind off, um, spacings two different needs and as well. The good thing about the same systems is that what is called themes or fame ing is that you can customize it. You pick like a pre made the same system, changing a little parameters here like the colores like the typography. And maybe if you want to change the grieve a little bit or whatever, you have a different product and and you don't have to think too much. Too much things. Everything will just go in a cascade, you know? So if we change what is called tokens, thes tokens, our colores, the spacing typography and they call it global here. But it could be like the layout in some over variables. So yeah, let's see clarity, design as well. Clarity is sound there. Uh, he's hanging system called Italian sees them so you can see here It's ah from ah, MB where the's company and they are using, you know, that those stuff. If we go to the commendation, we have all these. But they called here, Butters. I would call them like, yeah, tokens or atoms. You name it. And they are defining here the colors. Right. So as we can see, all Brits do much the same. They have here the components the same way. Ah, they they have a hearing in carbon in the components top, he accordion. You can see that they have all these components really well documented and how to implement them in in code. So this is all about the science systems. So let's cut the crap and go to Yes, Goto our first approach toe design our design system. Okay, so the first part is going to be like how to choose colors. So let's go for it.
5. Colors: So we have previously here our campus or really made with a MacBook Pro one our war. That's a good one. Just a reminder. You can just set it here. So what we're going to do, it's how toe create our color palettes. Help to scholars and everything. Uh, sometimes Kohler thinning will be given to you. Like, um, yeah, I might end You're working for McDonald's or Coca Cola or some other brand, and they give you the color palettes because they already have, like, brand guidelines. So and then, if you are working for my donor some pretty sure your first color will be something around these and something around thes and the secondary call or will be like that yellow like something like these. Okay, so you are pretty much on their They're called by pretty fine. But if you are making like, product from the scratch or you are working with a client who doesn't really know what colors to put on on their website or application or their guy brand guidelines are pretty much close to known or 20 I'm going to show you how to create thescore palates. All right, so what I usually do is yes. Created a rectangle. Apply some call over here, so yeah, whatever. Cory doesn't really matter at the very beginning, I'm just going toe put a random call. What I usually do is he has to put it nice. I just go with some border radios. So later on, when you are presenting these to the client, it's pretty kind of nice while you can leave it on Syria, Of course. Um, I usually put here like a name like the This could be like the Yeah, my primary color. This is going to be my my primary and what we can do here, it's just duplicate these and this is going to be the second mericle, or okay. And then we will create Tom over colores like, let's say, ah on neutrals. Okay, so yeah, this is what we are going to do. I usually like to put like primary 100. We will see later on. Why is going to be our secondary 100 and neutral 100. Okay, but let's let's start to define our color. Let's imagine we want, like, a super blue color here kind, kind off climb blue. It could be whatever color you like, it doesn't really matter. You too sick or you like and off course. It's hard to be according to the brand and and the and the feeling it has to transmit to the client, right? So, yeah, let's let emitting we choose this color. So what I usually do if if I have the calorie mine, I just go with it. But if not what I usually do, it's I used these two tools. This is the color palette generator or thes these website name coolers dot Co. And it's This is pretty cool because if you press ah space of our here, it's going to generate random beautiful color. Palettes are mornings color palette. So and imagine you like this red for your application. You have some tools here. So what I usually do is imagine I like this red. But these old older course are pre I don't know so often bland. And I don't I don't want this kind off colores in my palette, but these I really like what? What I usually do is I press here the lock bottom you see Now it's locked and presents a space Morgan and while he generates it. Another pallet based on this color and this color, I really like it. So I'm going to lock these two colors because well, in this one as well. But this I'm not so sure about it. This kind of brown stuff I'm going to look for press the space bar again. And while I like this one So I looked it and I kind of sported toe as you be and then imported to mine. Yeah, we can import it to our to our campus so we can pick the colors. Okay, The reset. Another cool feature here that it's called alternative states. What it does is saying is the luminosity and yeah and the lat well, the other lightness. So as we can see, they are giving us the some, uh is the same color part with less light in these parts and with more light here. So all these all of these colors are going to be on the same band off course. So that's pretty. That's a pretty cool thing. But imagine we already have chosen our first caller with these days, and we want to obey the palate on these two. So what we do. It's okay. We click here again. We just unlock this. We guess we have Kobe their color before. Now we have it. Here we look, it looked it and we have to look, This one's so we can change them again. And now we press the space Where again? And we can see that we are generating this color. Fantastic call polit. Okay, So while these colors are pretty cool, like these ones, maybe these is too soft too. So let's see if there is another proposal that fits our needs. I like this kind of great thing for our neutrals. So, yes, I think we have some winners here. Maybe these Jill, so Colombian stuff. So let's go for another round that that's not so bad. So let's let's locate, okay? Like 64 days as we key again. I think we are going toe to boot here. Well designed system call or and that's all right. So we come back to fight MMA, and then we can go here to file Well, let's come here and go to file and place image. Or we can just go into the tools to in place, emit or We can just use the circuit Command saved K and sets for our fire. So we just click. And there here appears our color palette. Okay, so there is this nice feature here. When we click on the feel of an object that it's thes eyedropper. It's very common in in design tools. And I think we are going to choose this color for secondary color and for the neutral we are going to choose. I like this one. This is kind of green, so I like this one better. Well, it's in the green side, but if we do, this is going to be on the bluish. I So we are going to cope with these by Hicks. Well, uh, we'll see why now and what we're going to do. It's come again to our color palette, and then we are going toe going. I want to see that states of this. It's not so bad, actually, but I want to adjust a little because the hue I wanted blue, So Yeah, so now we go to states. Yeah, well, they're kind of grace, right? Is not so bad, actually. So I'm just going to make it a screen set off this and then I will try. I will bring it to Fichtner, like we told before. Like common safety. Okay. And that put our screenshot. Sometimes I preferred, yes. The world with the screenshots. So the arrowing the same folder, we will leave it for later. So these I'm going with the eyedropper. Come here. Appreciate it. We are good to go. So we have our main colors here. Our primary color for primary action. Secondary color for complementary Axiron secondary patterns. Something like these, depending on how we want to make it. And you toss for backgrounds. Obviously these black is too black for for background spot. Why? I usually like to do it. Create all these. Um yeah, all these states here. So these would be the neutron 90 because it's 90% off this color, and there's going to be a new trial 80. This is pretty stupid right now to put these names here, but you will see the point a little bit later. Okay? So you do this with all of them. So when someone someone until we get to their white, which is a color too. So I always recommend to put it out and what we're going to do here, it's make two versions of these primary colors. We can go here to the States. Polit and whoops. Go here. Yeah, to the States and make on a screen set off this and come here and see these states and make an excretion off these two or another trick we can do. It's kind. Come here to Fichman. And if we go to this color and we go here and we tend retained the color instead of hex toe eight years L this is hue, saturation and lightness. And what is cool about this is that we can state the lightness here, like in like in 10%. So if we get this lightness to zero is going to give us that that that black because he has no Linus. But we can go with these values. So I think going to be 30. It's pretty good. So we're going here too. 30 as we saw before, when we were here, it was 50. So what we can do here is put like Primary 50 and now we're going to create our light person of this So instead of 50 what we have to do it. Rise and rise the's little bit at 100 it will be white. But we want it. Like if this is 50 and this is 30 which is a 20 of difference, maybe 70 immunized, but I prefer something lighter. So we're going with Yeah, let's go with 90. So this is going to be our primary 90 okay? And we are going to do the same thing here. We're going toe to boot, like, 30 here. So we have the same values here are here corresponding to the scholar. So this is going to be 30 and this is going to be 90. What? All right. So this is going to be our secondary 90. We can call it 90 if we want to know the values or well, in this case, it wasn't 50. So we're going here a little bit clear, but okay, just for the sake of making everything like no American so you don't need toe. I mean, it's perfectly fine of you. Name here, Secondary 50. And this is going to be the here in the lightness. It has 44. I mean, we don't have to be so purist because it's just their reference. Um, some other people like to like it named in, like primary default in primary, dark and primary light. You can name, name them as you want. I do this. Yes, for the sake off knowing what kind off values are different to this one's OK. And for the neutrals, the same thing applies. We could be like making here, like teen, that we have Ciro value here. This would be then probably is going. Yeah, you can do it like 10. This is going to be It's called it like neutral zero. It's going for the sake of being consistent. You can name it. You can name them us as you really I want this could be, like 20. Well, they are kind off. Approximate so so on. So see you and I mean it with all these colors than Okay, Huh? So we have four ready all off colors. What I usually like to do here it's like boot like super soft. Maybe this great in the border. So we can see here that it's this white we could call the We could call it as well, like neutral 100. But Yeah, this is white. We could named. This has black but is not pure black. So we have our color palette created. There is Sometimes you would like to create colors depending if if you have notifications. So something like this, like if something was successful or wasan a roar. If you are going to apply this kind off notifications, you have to create three more colors, which are, like kind off something like these for the errors. Something green for the well, what you can do. It's just it's something I usually do is CS go with the red and you just move these on the green side. So you are You stay on the same kind off range. Yeah, that's green. It's shiny A little bit too much, but it's all right. And then we need, like, an or rent for days. Yeah, something around that. So that would be our, um critical or a roar color. They know our success core, and then our warning color. Some people likes to make another color called in folklore. You saw these kind off something like these? Yeah. This kind of blue like new travel. You you can do it if you need it on, what do you usually do? It's the same thing we did for this. We do. We do it for for our three to duplicate. I'm juicing. Yes, The key on die Presse as well deceived key so they don't move. If I only press, uh, the alky, I can move it freely. But if I want it in the same blind you Yes. Press the safety at the same time. And it's going toe only, uh, let you move vertically on the same marks or isn't like or recently, but they get perfectly of line. So just so you know, and we burst again, like all shift to duplicate these elements again. And we are going just to change them toe 30 and 90. And we're good to go on. This could be the 19. Yes, 90 40 days. Oh, dear. Well, it's the other way around. Sorry. So, yeah, we can do with same thing with thescore, So let's go with 13 19 30 19. Okay, well, we are just going to leave the critical error behind this Is this kindof import in four blue? Because we don't need right now and and this is pretty much off the how to create a color palette and how to choose them. If you are going for inspiration as well as we as we spoke, you can come here and praise the space bar. Let's recipes so we can see is the home page well to the generator. And, yeah, you can press here the Espace more and you can get so much inspiration as well. He has some cool features like you can. Um what, this? Yeah. Piccolo's Furman image. You can upload an image, and then the color palette will applied here. And as we always have these cool feature that you can tell take how your colors are going to perform with people that has some problem with with their view. And so you can relate how it's going to perform these colors for people who need some especial except civility. Um, thing right. So this is pretty cool. Tour these thes over one. I want to show you, like, superfast. They have, like, some premium color palettes with. They are super cool for he says, this is pre nice polit. And yeah, this is Senator What prequel One. So in this one as well. It's pretty nice. And you have already these neutrals here, so I think you can get here in space and you can go low them. You can just save them. And of course, you can just pick a color. We have pick a cork pretty similar to these. You can pay. They heads code here. Let's do it. Just for the sake. Off. See? Another tool. The express. Here, copy. We come here again. We based it. And we have this color here. So what we can do is press this button here and we have this Anna logic the's monochromatic and create and complementary and to trade random. Whatever we can go to random, it's pretty much the same, like person, the space bar before in the other tool. The good thing about these website is that you see how your colors are going to perform, right, So it with Whoa. If we two is Theis and press Khobar, we see this is pretty cool. And this is pretty nice too. Let's imagine we are going to with these analytics stuff. We can see how it be forms in different screens. And the good thing is amazing. we are tire so much bluish colors where we can do it's changed the color. So we're going to pick like a secondary color. We we picked for our up before something like that, and we can see how it's how that overall feeling is. So these are free. Cool, um, tools to two scholars, okay, and just finishing our colors. And we are going to talk about something really important here in Sigma In order to create a solely designed system, it's, Ah, FEMA has thes cooler styles. FEMA has color styles, have typography styles and has many kind off a style, so you can reuse them. They have, like, even if it's it's styles for the shadows and everything. So it's pretty important. Do are organized and inconsistent. So for that, what you usually do it you will hear to these four dots and what with With one object pressed, you come here and what do you do? It's ah in this Plus is signed its to create an A staff. All right, so this color we are going to name that to name it. Primary it flash 50. Okay, we can call it 50 default. So we are in the same page, okay? And we know what 50 means. So we put this name and give create a style. And now we can see when we see that this object that no longer we don't no longer have the ability to change it or the ability toe. Yeah, get confused about this card. It says the name of the layer off the court order style. We just created right the same thing. We are going to make it here with the With these primary 30 we are going to create another color style we are going to instead of 50. We are going toe put here 30 and this is going to be the dark version, okay? And we create another style. We do the same thing, this pretty repetitive, but it's kind off meditation when you are doing it. And you have told your colors the fine after, do your stress of the decide and if they are good enough or not, And this is going to be the light version, all right? And you will ask, why are you putting these instead off? I don't know, like just, um thes these. Ah, his lies or these does or whatever or another or death in a space or something. We are going to see it now. So I put on its last there. And we are going to do this with secondary as well so we can see why we are putting here our his glasses. All right, So instead of primary, this is going to be this secondary. Remember that? That you can name them as you want, but remember, this is last here. So this is going to be the secondary and going to copy again. You're so I don't have to write it down. Any time I'm going here to create another color style. Let's go with this is going to be the dark, and then we're going to create that light. All right, So not to the plus. There. Yes, here in the four dots. And this is going to be than 90 is going to be the light burst. Okay, so why did we put this last there? So when we have the cooler selector and we come here, as you can see now we have our coolers order like separated from primaries from the secondaries. If we don't put the glasses. We are going toe. Have them altogether not organized. They are going to be, Yes, one after the other. So this is last. What it does is like a container. So everything you put in in the first place before the year's last is going to create the name of the folder Later on over this, you see the full name. But hear this container. It's based on how we named our color our palates. All right, so if we take these two Yeah, we Yes, remove these last in these particular color we will see now that it's like free, it's not contained on anything. It should be hearing secondary. But we removed it and it's there. So for that, we just go and put here these last again. We come up here again and we can see it's already it's on on its group. All right, so we are going to do the rest for this and and we come back in a minute. Okay? So I'm going for it. Hey, if you sometimes made a mistake naming or something, what you can do is go here and select these heavy the style, these kind off settings button, and then you can think the name. Because here is not the fault. This is the dark. Burton told you can see the name here. Come back, and here you will see that it's already done. OK, so I'm going to keep like, adding names here like crazy and see you in a minute. - So we are finished. Uh, now is your turn toe. Make your color palette for your application in or website or but primarily for your design system. And, as you can see when you are, are not selecting any object that you have here your local styles. Now, on Lee, we have only our colors or color palette. Later on, when we are like typography styles and everything in sad owes and borders and everything, they will appear here. Okay, but now we have made our colors is now your turn. So go ahead and start to create your color palette. And why would you do it? You Or when you finish it, you can serve it in the in the comments and so we can see our Yeah, our color palettes we are creating. Okay, So see you in the next lesson on which is going to be about typography
6. Layouts and grids: new lesson in this lesson. We are going to talk about layout and we will see the difference. Ah, between layouts and grades so you can call them right? Sometimes I just things the names, Um, but, you know, we will see what what they are in these great article that Nick Babbitt or wrote on this massive magazine. It's pretty good that will lead. I will leave the link as well. Us. Um, that's something it It's interesting toe to read it. It makes like a brief history about what it's agreed or a layout. And as you can see, ah, greets and layouts. Are these divisions off the page or the campus or the Our board we're working with this has been like this for years for many centuries is not only for product design or website design, it's for website. Actually, it's kind off. Recent, before websites were made without any kind off. Ah, layout. They were kind of messy. Actually, I'm I'm referring to the the start of the whip. But as you can see in this article, uh, you know, like layouts that have bean here for for many, many years, right? There is a pre. This is pretty interesting article to read, but as you can see in making books and everything but off course, we want to talk about greats in Prodi. Sign in detail, pull descent. So these could be, like a good reference, Like what? Kindof layouts in in every device you can you can use right, For instance, as we can see here, um, well, basically layouts, they are made from columns. These these vertical stripes here, as you can see. Ah, there is these values that you can you can put here well, this adult X'd, but it doesn't matter. Later on, we will replicate it in Sikma and basically what we do, it's We split the screen into columns so we know where to place the element. OK, so it's not the same amount of columns what we will be doing or using for weapon for Web design when going to on iPhone or for mobile. The sign. The same applies to iPod. But I must say that ah, nobody is. Most of the signs are kind off website and then iPhone and making just little changes to wipe. But not so you don't design for iPod or tablets anymore for many reasons. Ah, but we will come back to that later. The important thing is to know that Ah, what we want. It's to make vertical divisions income. Divide the arbor in columns. So just go ahead to fig MMA and making over our border here as we made before. Yes, we too. Smart book pro. Well, this is way are going to Yes. Put that out. We don't need anymore. So in Fiqh Mile, what we can do here? Ah, if we select the arbor, you We have this this thing, this thing here that is called layout greed. And if we press plus agreed up years, this is agreed, agree vis a vertical and horizontal division. And it's based on the estimated value in these cases. 10 pixels. It could be 60 pixels. Wherever whatever you need eso greets are vertical and horizontal divisions. Okay, combine. But this is pretty fixed. We cannot, um we cannot make columns from these. Well, we could just come here and pick maybe these three columns and these although three columns , but it's kind of pretty rough. This is nice for making icons when you are making icons. What you do is just you put a great side of one pixel and then you and go with with super soon and do assuming and start to make the icons okay. But in this case, we are not going to use greets. In this case, where we are going to use doing here, Begin here is going to create columns. Okay, So since we are designing for a website in this case later on, we will make a great for phones in the in. This case is going to be for website What we want to do its put like 12 columns 12 columns is mostly the most used I am layup combination. Yeah, with columns is the most common column combination. You can think that cooler here if you prefer like something later Somebody like them blue So you can come here, send them to blue. What? You can do whatever you want here things the opacity here In case you want something harder I said yes to leave it like light. So you against the element you can too is the color you want. OK, it's fine. And then you have some options here. This is going to determine how the columns are situated. A stretch means that if I increase these arm or the columns are going to a stress with it, I don't usually use this s theft. If I'm going full screen. If you want to design for for the whole screen everything you can use this layout. But sometimes what you want is to control the They lay out a little bit. So what you do, it's you just put it in the center winning this case. As you can see, the columns are super tiny because the width of the column easy as one picks up. But let's increase this. And there is something interesting here with this called the gutter and the gutter. Is there space that is situated? Um, between the columns. Okay, offset. If ah, in this case, it doesn't apply. But if you, for instance, position the layout on the left, imagine we half. Ah, this kind of the science where you have, like, a sidebar here, then you don't want to count these space. And what you do is come here, come to your layout and you start to resign that, say, over there and then what? You can do is increase the with till you're satisfied with these settings, so you would start toe. You have decide where to become a sidebar off many applications for the money, and you have one. I come here and write down whatever and then do a start to design your that's bore or whatever you're designing here. Okay, so yeah, that's that's why that's That's the important thing about layout. So so you could position the elements like this. Okay, but in these cases, we don't have any side wire or are. We don't have the need to start from the left or from the right. Yes, going to start with the center and and in this case is way are going to make a little stop stopping here some some off some designers what they usually do. It's ah, use a big sell. Great most of the signers. And what a big seller grief means. It's the spaces that they left him here in the gutter, on the columns and everything is a multiple off some number some years ago. But from from some years ago, the typical pixel wave was the eight pixel with OK, so yeah, it was the typical thing, So everything was multiple off eight. So in this case, if you can hear, you have to check for some number that multiplies by eight. For instance 72 they got their good Be, for instance, 32. Andi thes could I could give you the, you know, the the configuration of your off your gutter and columns and everything. Okay, but this is kind of changing. People has realized that sometimes if you want toe, make some separations between Germans inviting, we have like a photo. And then we have, like, I don't know, really, really a little bit off copy text here like caption What is going to be hooch? But let's say this is like 14 pixels for text. And if they wanted to position here, Well, this is a pixel, and it's not so bad, but sometimes they need it like, oh, like four peak sales. And if you were attached to these eight pixels, grief and everything was like separated in multiples of faith. Like for instance, here it's a big source here. You had toe have, like, 16 because and then then it's separation. Good. Be like 24 So it was like, you know, it was good, but sometimes you needed less space between the elements. So that's why most of the people it's running out off a eight big self greed toe four or even to pick so sweet. Okay, I think that with four picks agree, we are good to go. It's pre pre ACA rate. You don't more. In most of the cases, I'm I mean 99% all the times You don't need another kind of big, silvery off course. You can use the big surgery that you want. Somebody uses the fight pixel. Great. I do see that work. So in the same system I used right now Ah, and I helped to the sign. We are super fine with five pixels with because it's pretty close to four and is this year to multiply by so use wherever it sweet sue best. I mean, you know, half because everybody's using for it doesn't mean that you have to use it. You can use any pixel greed or or yeah, or any number you like was somebody. Some people even doesn't care this they just defined there the grief by I or Yeah, that what they feel natural to them and then what they do, It's Ah, mega spacing. It's like by I as well they say. Okay, this is something I like these hand over one and then some space like this. Okay, you're good to go toe. I mean, big sell three are great to maintain consistency because he's easier to remember the different spacing you have to use. But it's up to you to use it or not. If you are starting, I said yes, you will start to work. We agreed self for pixel great or fight pixel Great. And learn the basics. And when you have your ah, your eyes trained and then, yeah, do it just by heart if you want. OK, But as I said, it's always a good practice toe. Ah, get a little bit that that's toe picture toe to agree because he's super easy to re sign with this. So in this case we have here are beetle are layout agreed Ah, for for these what we could do as well, it's make like another one formal ill. In this case, we are going to choose for form like an android. Basic android. We are not going to mess around too much. Okay, so the same thing applies here. We sell it the ARB or in these guys cool frame. And what we do is coming again here to like a great we go to the blast button again comes agreed. So we go ahead and put columns In this case, five columns could be good for columns as well. I mean, three columns, whatever mobile. It's more free if you want. It's Ah, since the they with you have here, it's ah not so bigots in their stop. We need less order here. We can be more messy, but as well Somebody doesn't like to resign with columns here in mobile persons. I really do. And I'm gonna show you why. So here we're going to do the same instead of stretch we don't want to go for with in this case. We want some margins here because we are going to design something faster So you can see in this case went going to go to the center. We're going toe apply again there. Um, someone people's off eight. So in this case could be, um, 64 Santa. You know what you can do as well. You can multiply here like something like this. And he is going to be Do the veil values, OK. And in there? Yeah, and they gather we want as well in multiple off eight. So they were going to go with 24 yeah, this scene said pretty good configuration. Maybe there is too much gutter for my taste. So in this case, we're going to you can guess, make over reasons. Here, let's put like miners eight. And this is where what we get. Maybe we have too much space now here. So we are going toe out eight. So yeah. So this is looking pretty good. So, for instance, imagine you are doing I don't know, this kind off application that has an avatar, and then you have here, like a text again. This is huge. Drop down this to 14 So yeah, you might way have here. Well, I'm going to Yeste called his Peruvian. I don't have it anymore, but anyway, you get the idea, right? So you are making this kind of the signs where you have, like, some avatars here. And so that's why you need these columns here, if I could. If I'm designing something different, maybe it's good to go with three columns. The pretty the cool thing about phlegm eyes that you just change it here and increasing with, you know, you are good to go. You just multiply again for eight or the pixels with you, you have decided, and you're good to go. Um, so, yeah, in this case, we're going back to our four column. Great. All right. And the same thing that we did with the color. So you remember that there was thes local styles. In this case, we're calling style. We can save our layer grief, the styles, what we do. It's a game president for dot Um But, um, here and we Yes, press created style in this case, what I like to do. It's 12 columns, and I just really put the values, but in this case, we don't need it because we are going Just a pilgrim value in this case is we could name this like website and then 12 columns inviting. We made different confused reasons not to come for a website like 12 columns. Another one with 10 columns. I don't I don't, I guess to do that. But you could. So, in this case, we are just naming like this, Okay? And in this case, we are going to name these, um, again, We person the four dots, and then we go here and we go to with more by and this is going to be for well, and this is going to be four. Call for columns. Right. Imagine we made another one here. Like, um, yeah, like we duplicate this and we want tohave Another screen? Yes. With, let's say, three columns, for instance, What we can do it, as you can see here, is attached our settings. We have now in our layout of styles website with two of columns and marble with four columns. But imagine we want to change this. Not they're not all off the styles, but just this. So what we do is yes. Let's detach it. So now we have again, just like our regular columns, properties and what we do, it's just change the count to three. And again we increase our with here. Okay? It's almost the same. So now what we do, it's come again to the four columns It's a story to before dots. And then again, press mobile slash and then three goal. This last is the same for the call So we can make these little folders here like this little separation so we could have, like, different, kind off settings for our layers. As I said, I don't say estate. I said Yes, that you maintain in old your mobile the signs the same ah, layout. That's that's what gives consistency and makes a design solid between Ammon. Other things. But these layouts are 11 off the most important things to make the signs. Ah, yeah, remain solid. Okay? And for the users that using the same layout transmit calm on the that everything is into place, and so maintaining their the layout is pretty important. Okay, so using that house doesn't have to be boring because you have multiple violations. You can just use two columns here, then go for some sex young here with all these columns, and then go go here with three columns and for instance, you can do these in the upper part on on the lower part, go with some design that it's yeah, something like this. So having layouts using layout today. It doesn't mean that he has to be boring. It's yes, That helps you to. The sign creates consistency. And it's It's pretty good toe designed this way. Okay, I want to sell your son some examples off greats here, for instance, I This is the guardian Paige. So, for instance, we can see that we have one column, two columns, three columns, four columns and five columns. I'm pretty sure these at the same time I d bodied by two. So in this case, they could be using, like, a 10 picks. A great Okay. So as you can see that you are using in these two columns, they here in this section, they are using, like, a photo with with two columns off off, off it the same for days kind of book here. Right? Let's see another example. For instance, sky scanner weapons and we can see here that they are using they could be using, like, a 12 column design. In this case, they are using, like, two columns here. Two columns here, probably. They are dosing, like, three here or yeah, Azaz. We can see. Ah, it could be using like? Yeah. Yeah, like 44 columns. Well, you get the idea. I mean, it doesn't be toe this website and find it boring. And then they are using Great. As you can see, they are making, like, three columns here. Down there they are making four and another four columns. You can perfectly see the grief here. There three columns, agrees here. And yet making a kind off weird use here using two columns four days and then using 24 days . OK, so as you can see, greats are everywhere in every design. Here I have another example for is that this is proud hunt dot com. It's a cool website. Toe discovered yourself. Where? From startups on. Yeah, whatever. And as you can see, this is a typical bloke configuration when we have a sidebar here that uses two or three columns in this game, but it makes us one column. And if this is one column here, what? We would coffees, another column and another column just They are good. They are occupying like this base of two columns. Okay, so, yeah, as you can see, retard everywhere you can see even here that everything is big sell. Perfect. This is why is the sign with Grethe on their background? Okay, even if it's invisible to us now, if you realize when you begin newspaper when you really book when you you know when you are doing anything, you can relate that they disagreed down there, even a you know, um, a window. Whatever you are using a you probably uses agrees in one where you're another. Okay. Like like this. Ah, just just our final thing. It's something called Rose. In the same way that we are making columns here. You can be super super accurate with your with your agree and what you can. What we can do here. It's here. Um, we are going to detach steers again because I want to show you something. What we can do if we want to be like pixel perfect grief. Perfect on everything way we can do, Rose. And I want to show you how we press again on the plus button. Grief again. This this is pretty tiring. What? We can do it. Sell it here, Rose and sees we are working within, in this case within a pixel grid where we are going to do. It's Put this on out, or then go on top. OK, top. Because if we go with a stretch, everything is going to be like this Because the Countess in auto, if we put the S three. What what it does is yes, stretches like just like the columns before it stretches vertically. But we want this put No, we don't go in an auto. Actually, we just want 12. For now, What we want is the margin to be eight pixels. The margin is going to be this space here. And they got there is going to be eight pixels to Okay? No, but we want to change these two top. So our grief, it starts here. Well, we can just get the offset to zero. The height is going to be eight big cells. They got three states big sell. So this is eight pixels. Disquiet the space with these, the gutter is going to be eight pixels. What we know we do now is yes. Rise the count. Deal weaker tire. And you will know why If we are descended him a while. Ah, person or something. And we don't put too much too many rows here. At some point you are descending a super huge mobile person, something maybe you get. Ah, there is a time that you don't have more roads. So that's why I say Don't be a scared yes, put here, I don't know three 100 rows and you are good to go. So you never end up like this. You know you can have it later, but it's free to what Rose? So what you could do here. It's like at another style. And this would be like, let's call it like mobile. Eight weeks agreed or something like this. So now we have, like, everything is multiple off eight and what we can do with this is super nice for design. And you you don't have to be measuring the distance between elements. If we are making this title here, well, it's out. I said, Go on, second line. This is too tight. But we will see in this lesson we talk about typography, but what you can do when designing, I guess he here that this is like sitting on the baseline, he's gonna call baseline these rose, the separations that court baselines. So you can see here you have. Ah, the separation. You Some designers, like toe Adidas this on the baseline, Some others, like just to a start. Here, use what you feel comfortable comfortable with. This, as you can see is 16 picks of separation. So we are on the eight pixels with We're going to put this on auto emerging. Now, we could put some text here introductory texts or whatever and yeah, we can guest leave it like these or we can just sit like this and we are good to go. Since it starts here, everything is going to have this kind of reading. So you don't have to worry too much if you put it on the baseline or pull it up Stirs. You are going. You are good. But this isn't it a nice place to sit elements. Ah, this kind off elements. Okay, I prefer you to put it on the baseline, actually, but it's up to you. Some designers don't do it all they do. I come from designing magazine as my arse in San newspapers and everything seats on the baseline. So for me, it's like a natural thing. OK, The only thing that doesn't go to the baseline is usually the titles and everything. But if we put like a body text, that is usually well, in this case is 14 pixels. Yeah, we got to go for something that seats here on there. You know, we put some more depots off off, eight for the for the line height, we will be on their on their pixel on the big celebrate. It would be a title, for instance. Let's say 16 and then go with. And now we can see this on our greats. Okay, this is too much. The we are talking already about typography, and now and we're going to talk about super deeply about typography on the next lesson. So So this is all about greats and see you on the ness less on. And we're going to talk about the topography. Burgard, Freedom. How did you fund? OK, so see you there
7. Typography: Welcome back to these new lesson in this case, we're going to talk about typography. This is going to be super interesting. I love typography. I think typography is one of the most important things when you are designing and because it's something sub toe. But typography gifts you it sends. There are typography. Is that gun make you feel like you are in a funny place in a funny website and a funny application. Others can inspire you confidence. Some of this can transpire like luxury and something expensive and everything and that mostly guns from coolers and typography, obviously photographs and graphics as well, but mostly it comes from typography. So that's why, if you realize, um, the luxury brands, huh usually has these guy and off especial de Borah fees with Sarah Reeves, with contrast, some of them are super condensed. You know they are stylish, you know, is something that you cannot see sometimes because most of the times even are set designers , we are not just sometimes we just look at letters. We are not realizing what what's behind the typography that's behind. But when you really focus on it, you are the very and half a sense off All these things that typography can trying to meet and communicate. Okay, so I'm in love with topography, and I'm going to show you the places that where I usually go for typography. I mean, for freedom. Biography. Some one of them is cool front. It's not a secret, you know, everybody. Ah, knows about it here. You cancer. 30 for a lot off free phones. They are good phones. And yeah, they have, like, super nice forms, like grew weak. Whatever. I mean, all the phones you can imagine for free are here to use for you. There is another one I really like because it has some phones that will form that half. It's called phone to school. Yeah, its search for it. So from the square is kind off. Kind of the same. You can You can here download like many, many phones. There are some phones that are as well in, well, phones, but some others doesn't. And as you can see it, they have a huge scatter Look off refunds to the other, the other other websites. I will leave you the links in the assets bait and yeah, we will have a look at it. I have fallen in love. We to typography is lately. One of them is called man rope, and I'm going to use this typography because it has some. Ah, it's a brick wall typography, but it has some between letters, spacing problems. So I even if it's not the better formed to use if you don't know how to use forms you. But it's a good fund to see what happens sometimes with with phones and how toe how to solve it, Monroe police say. As you can see, it's ah, sans serif. Yeah, geometric. Pretty straightforward. Kind off between a bet. Icka on circular and it's a pretty pretty nice formed. It has pretty cool numbers. As you can see, it's ah, it's a really good fun. Okay, so I'm going. Well, I think I have it stole already. If not, you can't come here to the load files anyway. You don't need to unload it. I would like to re sources eso You can download it from from there, but any anyhow, you can come here and don't load it. And yes, go here. We have it in Monroe. Go to phones. We since we are going to use it for for the stop we just go to the O t f Ah, yeah, you could be style the TDF the truth through tight formed But we're going to the opened iPhone because it has much features and has legal towers and hearts. More things. So we're going to open it with a phone book and we yes, press in style formed. Okay, so it's a really start. So we Yes. Quit from book? Yes. Quit this stuff. Come back to Fichman. And now we are ready to go. Okay? There are two approaches when when using formed. And because you can you can just choose your phones and any time you're going toe toe put Tex here something, you can do it. That's why I listen, Mahdi in Let's just start using man rope. Yeah, it's a super cool phone you're going to see so you can just go and put here 36. Or I could put whatever Yes, kind of run them. You know this or you can use the scale here, but sometimes some designers make it Run them. They put 48 then put 50 for another type for another ah, title on the other screen or whatever, but I like to keep my typefaces consistent in size. So we were going to talk in a minute about how to create, um, a type scale on. We will see how it works. Okay. Um well, we're going to see it now. Diapers case are basically a way off dealing with how much contrast half how to have the the typefaces between one title and a little title on the body on the body. Copy. As you can see. Ah, this time this time, programs usually cast this thesis scale here, and it's a nice scale. You can use it so you don't have to break your mind. And, for instance, if you want like a big title, you could use 48. You can go with 64 if you are using, like a short title like we are the best. Something like this. Well, for me, even even if it's short, this is too big. Let's see my idea. Let's Let's he signed something with with our grief and and let's use this blogging called honest plus yes to enter to insert a random photo off nature Do you like nature? I do, but I don't like this foot too much. I hope this is better. Well, not so, but But Well, then as one is going to be the one. Jesus Christ, I don't know. Anyway, let's use this. I'm going to create another written angle here, and I'm going toe put it with black in a little bit of blue. So we are going to come to this part and what I'm going to do. It's make some capacity here to create this cool effect, as you can see. And now we're We are going to select these and send to back so we can select our text here intended to white so we can see what we're talking about. So imagine we have these kind off hero we might This kind off opening images are called heroes. Um, they are going on. They they are, like disappearing. Ah, instead, off more clear interfaces like yes, were with die face here with a core. And, you know, like something like these and then Ah, nice illustration like organic illustration here and you know you know You know what I'm talking about? All more. Nobody is most of the websites are pretty similar to each other. So So we are going again toe, bring our greats here. These you can do it with control. L know. Sorry, Control. G. So this is how you bring your your grief toe debut? Okay? How to activate. Okay, so we have this title and then imagine we have a text here. You know, we are the best and how to the, uh, with shapes that are riddle. And I think we are making, like, a website for in a start up something like this. And we want to Yes, these adjusted to our great this is going to be adjusted as well toe In this case, five columns with good be kind off were, But we can do it. And in this case, we're going toe. We could use select here some rental number, like 20 or something like this and we can see it's a nice contrast. Instead, this being both let's go and check to regular. Maybe this is too little until be tinier. Let Why don't we try with 24? What, 24 actually is not so bad for our purposes, but instead off having to, you know, to decide on the fly Why I use here, like 24 or 20 or something like this. There is something called like, um, vertical vertical rhythm. What is that? These and what we want to work with. It's, um, what we work toward with is instead of selecting all like, random numbers here, that feel goto our I to use like it's called, like a type of scale type of scales we can see here. Okay, we can see here that the type of scale is something that is calculated based on on a factor in this case is 1.250 This is Kelly school. May your third, and what it does is to start with a base number. In this case is 16 picks is and what it does is multiplied by 1.25 and then then, as one is multiplied by 1 25 them again, so and so on. So once I want so what it does. It's making a on a scale that is proportional. But if we multiply, um, A. So you can see these. It's much bigger than than multiplying by. You know, it's it's like on a scale that it goes like No, I read them or something. It's not reveler in this case seems to me pretty regular. So let's go with something more stream. As you can see here, the steps between one tie faith 11 pixel, one Messer on another, it's far superior. And you know what? I like this a scale. So that's why that's what we are going to use. As you can see, we have the pixel values here, and you have em values here, Ayman Rams that those are the values that developers are going to use in your design. But we are going to work with this escape. Okay, so I have taken a screen set off this so I don't have to write the values down or whatever . We are going to bring the screen salt we just made. So we can just Well, that was a mistake. If you ah, import the photo and select the shape is going to import it inside of it in disgrace. In this case, what we need are the values off these the scale here. So we are going just toe do something. We are going to religious. This was pretty cool, but we don't no longer need it. So what we're going to do, it's create all these values we have here. This is war were interested for and we are going. I'm going to do this horrible while I'm going to choose a nicer core and I'm going yes, toe, multiply it. So this is how are these are the values that we want two years? What is actually coral? It's burning. My eyes told these much spit. So what we do here? It's going here and we are going to just put this into 16. Is going our 16 pixels. That's one is 21.33. What we want to what we can do it goto 1 21 Just put, like, you know, rounded values. Because 0.33 it's it doesn't. There are no point. 33 picks is no one day. So So now we're going to put here like 28 which is the next one. Will this a scale actually spree pre heavy? Their steps are huge. Anyway, we are going with it since we don't have fear off failing. So we are going with it. We're going. So this is 38 right? And this one is going to be 50 way We would go away 51 But I prefer around the numbers. So let's go with 50. Okay, let's make these. Okay. So it's OK. And then as one which is impossible to use in the rial wall, so is 68. It's uses. It's super weak. So this is our scale. You can tell you can come back here and you say Okay, this is too much for for me or I need more values or yeah, you know, sometimes you Mamie's something around 14. 13 picks sales. So you might say, OK, I come back to my mayor third, It lacks as well some steps here, so you can come back here and say, OK, this is 30 16 13 11. This case in gave me a little bit more. Yeah, You know, maybe sometimes you want to use something like this, which goes from 16 14 12 pixels. This is something more natural and as well you can use the pretty fine Ah, people, Rafic, a scale that comes here, which is pretty cool. I mean, there's pretty good. This is their regular typographical scale. It's ah super. What happens that nobody is most off the website do 16 pixels on here. 16 pixels are missed because they this scale is based on ah, how to say graphic design and kind off all the sign of books and newspaper designs. So, in newspapers and books usefully the typographical scale, it started at eight pixels. Well, they were called 80.8 points or nine points. 10 points. So that's why this is a typographical scale. Has these supped elaborations here from 9 10 11 12 13 14 And then yes, it starts to rise and half huge steps. So that's why the reason why the scale is kind of weird at the very beginning in just one picture and you say, why fix it so thes pics is some little pixels because no one racing website or mobile applications without uses a scale anymore. Maybe you start a war with 12 pig cells. So 14 pixels super weird to go down to 11 10 9 These in these times. Okay, so well, maybe this is too big, but we can go with it. So what? I'm going to do its duplicate this the s these? Ah, yeah. These all these elements we have here and we I'm going to apply the bolt well, in this case and going to apply the EC's trouble. But because I want to have, like, a regular four texts. I like this typeface for for text regular text. And I like this for titles. But I started to see some problems here with this type of roughy. And as you can feel, this is kind off two separated between letters. You can see this is a letter spacing. Some others call them tracking, you know, But I I feel that this could be better and more relatable and more appealing if we apply some negative letters. Spacing like 3% something around that maybe let's go for Yeah, I like this. You see the difference if we put this to the default values of the die face, this is kind off to Yeah, it's to lose. I mean, for title. It doesn't have question. It s 1/2 the glue. It needs to be a title, that punchy title. So, yeah, I like this more So what? We're going to do it supply like miners. Three. Here Yeah, that's much better. Ah, it happens. Something with typography there, for instance, as you can see in these sizes. Ah, it's fine. The letter spacing. Even if its zero it's fine if we go like menace minus 3%. Maybe it's too tight. So you have toe. Remember this When you are going with big, super big, um, sizes on Thai faces, probably you have tow tight a little bit, the letter spacing. You can tied it all that you want, but you know, to something illegible. This would be acceptable. And even it's like cool for, you know, for a designer studio, something like these. If it's for product of something, you can just pump this a little bit up. But in the default value off zero, I find this to be. I don't know that something is broken with the typeface. So yes, bump these down a little so you can make it a little bit more A 1,000,000,000. I'm going to raise down this to four again. This is cool on three. This go round three to isn't too. This is good. Maybe a little bit too separated. So let's see what manners one and this in zero. It's pretty good to go. So we have arthritis here in what I usually like to do. Um, it's Ah. You know, I usually like to do this. I press enter and you know why it happens. So I like to do this like, ah, toe this break here so we can see how it works between two lines. Because we have these, uh, lying hate here in these separation. You can do it by big cells like like this increasing articulates until you are comfortable with it. Or you can go with percentage valued, like 80 light, 180%. And as you can see, this is too much. So we can go like I don't know, 100. Yeah. Why is that? Because if we go with big cells, let's say we put here, like 72 big cells or 74. Okay, When we do the same to this title here, we have to be guessing how much we want to put here. Okay. Like this maybe is too much and go here, go to 60. It's more or less, but you can do as well put here 100 percent and you're good to go and you have one. So I want 100 10% here. So instead off applying different lying heights, toe all of them what you can do. It's put the same nine height toe, all of them like 100% because these 100% it's based on the size off your typeface. So in this case, 38% What what 38 pixels is translated in these like 100% off 38. It could be like 42 or something like this. If you feel it's some kind off tight in this kind off, you can increase it. It's OK. You can put like 120. It's good to go. And when you are in in tinier values in a smaller text, it's nice toe rice it up a little bit more like 1 30 the same side, the same thing that before we needed toe lower down. This in higher sizes. Typography next. Here. We need to do that as the opposite really leaves the letter spacing on a zero, or sometimes ever even put some positive values here on the letter spacing. But on the other hand, what we need is to leave more lying height to this text, and here they are, slim it down like we could even go to 100%. Okay, so that's something that works not only for this typography. It works on all typography is you have to look at the SNC how it feels. Most of the typography doesn't need so much tweaking. Assist us this type of ref in it. But I thought that this would be a nice tiefest too. So you because it needs a lot off tweaks here when it speaks and even on, uh, normal or regular sizes like 21. It needs some kind off little adjustment here in the letter spacing. Okay, So let's go to create our Texas tiles. Something I want to show you here, talking about fake my little bit. It's in this test configuration A so we can see if we do this, the text are kind of making were things That's because the boxes are adapting and the year kind of fixed. There is like they have, like a box fixing height and with and what we want here is just get this lines that increase with the text so in this case, what happened is that yes, I just make, like, a break with Angel. So we're going just to remove it. And if I keep writing here, it goes for it goes home forever. Okay, but if I do this, then there this boss is kind off close that it's kind of fix some with. But if I write, it increases on on size. Is this second part here? This is, like fits with without the height. This would be fixed site if I keep on writing here. As you can see, these blue books, it doesn't ah, rise anymore that it's Ah. So this is kind off own nowhere inside the box. So But for this case, we want them on out with it doesn't really murder. We could be without or with. Sound fits with here, but for our purposes. Good to go. Okay, so let's tidy up this a little bit and just decrease the this prequel fitter. So we have the same separation here. We are working in that eight weeks of read, so it's put 24. We are going to the same here. Just we go here out of with, um interesting We didn't do their lying height here, but I'm going just to put 100 10 for all of them. It doesn't really matter, because this is for just a test. Later on, if we want toe change it, we can I suggest that that you do it one by why I'm perfectly done. But this is just for to see for you to rent a house, how it works. But I don't want toe to make this tool toe borrowing to you. So I'm going toe go here with it serves to tidy up. The idea of what it does is ah, you know, finds the it divides the space between the elements and then we can come here and and cut and do these, like, manually. Or we can come here and just press this and it is going toe leave. Leave the same space between the elements. 24 on all this. All the separated. Okay, this prequel toe, um, organized things. So let's go to the funny part. Well, actually, is the boring part. But what? What? We are going to do it at these layer styles toe texas tiles, toe are styles. Okay, So what I usually do it. Let's create in a style. In this case, we are going to apply the same thing with this lass. We are coiled this regular, and this is going to be the 16 pixels. Some people, like Stevie likes to put names like body copy like each one is to a three. That's pretty cool to you can do it. If you are working in ah little website or something like this, you can do it or well in me, even if you are working for a big company. But you're probably it's super super contained And do you know have too many debts? Texas styles? You can do it. But if I have find that I have found that sometimes what I what? It works better for me instead of putting names that can be confusing for some, I prefer to push the as the values that ah, that that is using this typeface in this case is using 21. So we are going to call these rebel are 21. I'm not going to use the big sellers anymore, so So I go faster this 28 and I'm just going to copy this So it's this your later. So this is 28. This is how much was it for? What? Sorry. So this is 38. So this is going to be 38 and this is 50. Same thing in this 68. We based 68. Okay, we have it. And for these were going to make the same, but with Bolt. So we're going toe put here bolt than a slash and there's going to be 16. We are going to complete this text, so it's easier for based in this is 21. These he's I forgot again. Uses to date. Okay. And this is 38 these years 50. And these is 68. Okay, okay. So now if we click outside, we don't have anything selected. We can see here Our Texas styles ready to use, really toe Go to production. You see, I have the's big cells here and I want to with it. So I go here, I click these kind off settings. I can't and then I can go here and just remove the big cells. Press intro. Just come back. IHS Yeah, we have it set up. So we have learned in this lesson How toe where more how to pick typography is not really but how to go and don't load some typography, how to load it to your system and how to use it How to to say typographical scale I will send you as well these all these ah addresses and some over resource is about typography too. So you can learn a little bit more if you are interested. But with this basic, we are good to go to a start designing our products because we have we already have colors . We have our layouts, we have our text. So we are going to the next station, which is pretty cool. So see you in the next lesson. I think it's going to be interesting. See you later.
8. Buttons: welcome back S o in these new lesson, we are going to start with our components. I think it's, ah, the most interesting part off off for making their the sciences them on or in this case, these kind off You, you I kid user interface kit. So is the moment where you start to create all the battles the import feels that takes arias drop down. You have to define a lot of things the and it's pretty interesting toe to make them from scratch. So you know how they are made, what things they have in common, what they don't have in common and everything. So let's get started. Because this I think I love this part to make this part. So I hope you Sarah is feeling too. So what we're going to do is press Ault and duplicate this our board and we're going to just drug around and delete this and this is going to be our component san off our components pate way are living this kind off messy and ugly and everything. But at the Berrien, we are going to put everything super nice and clean to give it to a client or to use it on your business or to use a known your startup or using it for you audio so you can put it on dribble or put it on behinds or yes, So it to your family or whatever you want to do it. But yeah, now we are just putting their rough stuff, and then we can just making as beautiful as this with this heaters and with this kind off sex soon's all that stuff. So that's come later, toe. Make something beautiful of it. Now we're doing just the core off the design system. Okay, So what, I usually like to do it, Um, in this case, I forgot to do something that I like to do, which is making like a Sweded here for the mobile phone to put some rows so we can stick to our grief. So what I'm going to do, It's break this so we no longer half this website 12 column style attached, and I'm going toe here grows again with the grid. This is namer. So the's count. I'm going to raise it, Teoh, I don't know, 500 and then the type is going to be on the top. So we have our greets tight there, and the other is going to be eight pixels. So they separation between this and that is going to be eight big cells on the height off. Their role is going to be a pixels to. So everything we have on site on the vertical side off things is going to be eight pixels. Okay, so now what we are going to do, it's this configuration. This set up us another style, and this is going to be website. Uh, let's call it a picture. Greet the same us here. Okay, so this is going to be website a pixel. Great. Well, may pick. So Yeah, great. All right, so this school, because if you need this eight pixel grief for the Sinus Pretty cool. But if you are tired off so many things from here, you can just go here and you have the columns. You want the degree you have it here. Okay, so for me is how I like to be signed and it's good to go. So we are going to press are key to make a rectangle or we can we just come here and go toe Rick Tango and we are going toe paint or position or whatever. If 40 big so height rectangle, I like 40 because you can go with 48. If you are designing things Super Beak on Lee for websites or you don't have too many content or I mean you are you want something super super accessible for people who have some disabilities or something or you ha, you want a super usability that it's easier to click a button, Do you just do it? And but I usually go here with 40. For me, it's perfectly fine. 40 pixels for something, and in this case, I'm going to start to be signed. Like, um, I'm going to fix, like the hot this ape off our our bottoms. Okay, that's amazing. We want if we if we wanted, like, something like this, we could go with this. But I'm not so sure off off these off this thing. So for bottoms and going to start yes, within eight weeks off, let's see how it goes. It's kind of cheesy. Let's drop down this 24 and I'm going to do something. It's sport. I am. We are going to use our beautiful color styles. So we are not guessing here. What kind off? Louis chose the first time. Whatever. So we come here, we person primary and we have our button shaped And with the primary color, this prequel. So yes. And now I'm going to apply one off our text. In this case, I don't want in both. I just want a regular and maybe 16. I don't know if 16 of 21 let's go with 21 and just put this the court button. Just the feel is going to be white. We can go with white, or we can go here and select our neutral 100 white. Okay, you see it here? So, yeah, this could be our first button, but we want to reuse these elements later so we could be like, duplicating them. And if I take thes, it doesn't doesn't increase its size. And if later on tomorrow, entire of this color And I said okay, I want my buttons off this color, they remain the same here and there. So they are not. They are copies, but they are independent copies on. We don't want that because we want to be consistent and we want to be like, ah, superfast while designing and making decisions. And if we want that if we change these bottom because his our main button, we want everything toe spread Toby Toby changing escape so we don't have to put so much before. And for that fig Maha say super cool feature called out Ally out Well, not out. Try out by itself. But let's let's make this like a component. What we can do Oh, it's Ah align these on the horizontal center. Somebody likes to this all I need to the vertical center to is this here and what we do that we select both off this you cannot will select it with you. Select the text them press shift and then select this. And as you can see here, both layers accelerator and then come here to these weird icon in a press create component . So you say OK, nothing has changed here, but yes, it did. Before when we had these elements selected were blue and now this is kind off purple cooler and as you can see here, it says component of one. Okay, so in this gaze, I'm just going to call it bottom because we are going toe Remake it and you will see why. But this is the way how you make a component. And why are components cool? Because let's press old and duplicate this or do yes, press command D or control the If you are in Passaic and you can create as many copies as you want. And what is this school about? This is if this is our master component, as you can see, you can see because this is the, like, four dots here, fool off purple. And these are kind off. Yeah, this kind off tangles diamonds like empty diamond. This is this means they are instances off these master component, so they seem the same. But they are not, because if I change the background in these, all remained the same. But if we go to our mustard component to this button and we select the re tango and we change the color, everything changes. So this pretty cool. This is the magic about using components or right, So if you have a good based on component later on, if you want to make changes on your design is going to be faster, easier. Everything is going to be ah, synchronized. And it's going to be much, much better. But what happens with these bottom? You say this button is perfectly cool? Yeah, well, not so cool. I mean, it's nice because it seems nice. And I can do these and somehow is going toe. Yeah, do what it's supposed to do what is increased its size when I'm writing, but components by itself, they don't They don't get wider or get increase. Or, um yeah, and they rise because you put some text on it because we didn't say to the tool that this has to be responsive about the tastic it contains. So what, We're going to do it? Select this mustard component. We are going just to ah, make a copy of it. Then delete the master component. We don't need it anymore. You will see why. Now we have an instance off a master component. That is, that is gone because we have deescalated. We could restore the master component. But if we do that, yeah, As you can see, a master component is created again. But we don't We don't need to do that now. What we want is just to press here. Like with the right click, and then go and detach Eastern's. What it does is make this component. This is not a component. This symbol these Yeah, group of audits independent from there, master component that it was OK, so as you can see, we don't have, um here, this triangle. Empty triangle symbol anymore. Diamond symbol. Now we have a frame symbol us as MacBook Pro. You know, as the symbol. This is now a frame and frames. Somehow they are kind of groups, so we can on group this frame. Okay, So if we go here and say on group, the frame is going to disappear, have you seen it? So what we want here, it's we are going to put again button. So we have normal text on it and what we want here it's to select the text and the on in the background. And there is a feature here and feet Michael out. Try out. This is magic. And you will see how if I pressed the glass bottom everything Seems that the same. Okay, something has happened to the bottom. We don't really know what, uh, asses we can see we are going to undo. Now Our background was 40 pixels high it And when I select this or if I group it it says is 40 pixels in height. And now if I come here and press these without tryout now it says 39 is disabled on the width is disabled to Why is that why I cannot come here and change this? And as you can see if if you come here, the symbol has changed. We no longer HASA Bagram. And now the background is contained by the frame. The background is the frame itself. This is, ah, behavior. Fichman has that frames can act as backgrounds to and how sport the radios and everything. Okay, so you have tow. Keep that in mind. Because when I make the, um the immigration from this gets Tofig mama, or if you are doing the immigration from a double X T Tofik Matt, this is came Be pretty confusing. So you have to get used to it. This kind of frame behavior. But what? It's magic about these. Um, I'll tell I out component we have here is that if I want this to be. I'm going to just put this text into the center. If we just go here and we press primary this Wow, it's it makes bigger itself while while writing this is amazing, right? But you say OK, but what happened? How do we change this space or do this space? Or now is 39 picks of this pretty weird. I want some kind off tuning here to some milk customization. Well, you have it if you are playing with with their eight weeks of great Okay, You say I want 24 big cells here on the right, and here on the left, and this is what it does. This thing here is the margins or the putting the bottle house here, so is 24 pixels. The same thing applies to the vertical parting. We can just increase these and go there. So this can be tricky to really get you into the 40 because it depends a little bit, and I type tonight on our typeface. But there is something we can do here that it's instead of being light out of height, we can just go toe fits height. And now yes, we are able to put 40. I mean, this is for going out of pilot or right there out of height. But without a height, you lose the control toe, be on the grid because they hide this disabled. So, for this case, for this, um, yeah, for these components what? We want it. All of them to be consistent. In Hyatt, if you have our text on input text Oris drop down or something you want. If you possess any bhutan close to the other element, you want them to be same height. So for this, we have toe, disable the outer height, go to the feets, high it and then go and put this on 40. All right, That's the way you are going to be consistent about it. Okay, so we have done our first bottom. But what happens if I duplicate this and I change this color? What would happen? Nothing happens, all right, because this has outlying out. But it's not a component yet. Okay, So what we have to do its press create component. And as you can see, the frame disappears once again. Remember that we lost our background instead off an outer layout thing, then our outer layout thing that was a frame has become a component. That's pretty cool, because we still have the Contras off our out. Try out here. This is the most important on most confusing thing about Fatemeh how these frames are disappearance instead off the new parent, you know? So the background goes to the outlying out frame. Then the friend disappears and converts itself in the in the parent component. Okay, so this is going to be our battle primary a slash. We are. We are putting this last year because here is super important, these losses again. This is going to create this kind of separations on. This is going to be the default. Somebody call them active. I just go wait Default. Bye for now. And what we are going to what I usually like to do its toe. Yeah, what I usually like to do, it's duplicate this and you say OK, but if you duplicate it, you're going to create an Eastern's And any fights, chances? Yeah, changes. That's recall, But we want something. We need something different now. What we want here, it's to make a kind, different kind of bottom. Okay, so we want another component, because what we are going to create What? Sorry, What we are going to create. It's, um we want the darker person off this. Like when we are harboring this button, we want toe be hey, toe convert itself to this. So we are going to create our Khobar button. But what happened with this? If if I create an instance and I think the color here, it's not going to change because this is not a component. This is an instance. So what we are going to do, it's Yeah, we have to change the background and what we do now. It's right. Click, uh, the touch, the instance from its parent. And now we have again, like the outlying out configuration. And now, since we have changed the color already, we create there component in again. So now this is going to be our homer bottom. Okay, so we just need to rename this to Khobar. Okay, so we have our primary in our our bottom. We're going to do the same thing we just duplicated. We are going to create now our disabled button, our but primary battle, but disabled And in this case, I'm going to press right click on going to detach the instance on going to press on the art of war background with the common selector. Because if I just do this, I select the whole. They hold the whole component. Let's say the whole object. But I want just the background. Let's say that this part off this upper part So I just click the common key. And as you can see now, I have this color here. Well, and what I'm going to do, It's, um ah, big there, primary life. So these button is going to be our disabled bottom. Okay. And what now? This is not and is not an Ibsen, and Eastern is not ah is not a component. So we're going to create a component again, and we are going to change the name to these able. Okay. All right. We can name them here. I No way Can you hear the name if we want to. It's perfectly fine. Okay, so we have our free first component in a sigh. A sigh I told you before, there is Lasses here are important because if we go here to us, it assets are the components you have created. You can see that we have here local components. We concert when we have a lot off components created. But now we have here these three components ready to use. OK, so as you can see, this is pretty cool because we can drop it in mining. We are designing a huge ah website and we have like, we are in screen in whatever screen we are we are designing we A we need a bottle. Primary button. Do us go here. Come here. Search for it and you are good to go. Then you, um go here, apply the layout. Read Let's go with 12 columns. So you say Ok, yes. We want our button there, you see. So it's prequel, the components ing And the good thing is that we are tired off this loop. We can just tended to hear on as you can see the call or changes here too. So this is the magical components. Well, way we could think the color we could say is the text is the same thing. If we change the text and we'll hear and then we changing toe white as you can see the text changes to So this is the first part off creating components. We have learned a lot of things, even if you don't think so. But we have, uh, how to create our component or first components. How toe make, uh, these funny bottles that increase their size with with their test. So we have learnt about outer layout to this is pretty cool. How to control. Try out how to fix the height off the bottoms So they stay on our on our on our grief. In this case, we haven't put in in the great, but now we are doing it. So as you can see, it's all super tidy. I am too are columns and toe our roads. So this is magnificent. So to you. And then it's lesson and we are going to continue to make our bottles. All right, I'm going to put this into group because if not, it is going to be Look, there's going to look a little bit. We're okay. So we'll see you on this on their next listen
9. Finishing buttons: Hey, welcome back. We are going to continue with our buttons. Ah, I have here some examples on how other design systems create their their bottles. They go with the primary as we did with some Khobar and disabled, Then create a secondary bottle, which is kind of weird because his super tiny compared with this and they don't have anything to do. I mean, the border radios is kind of different between this and that. This type the sizes, this is super big, and this is kind off super tiny, and everything is kind off weird in this India's, you know, the science system, something interesting here. They have included, like I would say, like I like only a link, which is cool. But then here is kind of weird. Maybe this is kind of black. If we remove this now, it's only the text. Then it's cool, but well, the it's I think it works for a particle. Our website. But it wouldn't be so, um recommend diable for everybody. So there is an alert one here, the explore and they have our primary battle. They call them default. They have the ghost. What? We are usually called secondary, but you can call it goes to and then include some icons on the left. Or you can include some Michaels on the right. As you can see, they have the large on a small persons off it. Let's see what brainstorming Thus they have normal large with can be just ah, adjusted on the with they call him again the secondary bottoms like ghost The this true that they are called goes bottoms when they only have like these board there and we'll have toe make a point here it depends if they are transparent, they are called. If we don't have this, they are cold goes bottles. But for me, if they have ah, background, if they are not transparent, they have ah, white background. Then for me, it's a secondary button. Because if I put these in ah, with a background, let's say something like these and then I bring this forward. That's okay. If I put this is not is not really a ghost button, I'm going to pick their cores. This is not really a ghost button. This is a secondary bottom. If we remove this, yes, it's a ghost because it's kind off you know, missed when the with, uh, with the background again. I don't want this. I just want to change their That's this color and pretty hard. Doesn't have a feel anymore. Yeah, that's for me. It goes button. That's just so you know. Anyway, it's cool that, you know that, um uh, that this hour Ah, we have all these kind of buttons and as well, they say, normal. A small, maybe because they are fitting the test instead, off being like maybe three columns or four columns of whatever, we will do it too. We will do as well. Some icons that are just, um uh here in these in these bottles. And I have seen I have here another example off these free resource about that Sergei, I'll keep off, mate. But for me, it's Brickell because he has included text battles with usually we call links. But when they are, they go alone. They are like tertiary bottles, like links. You cannot see the button outside, but it's there. We will see how these bottles are made. Induce. Really, In most of the design systems, there are different sizes for it Here. As you can see, Hey, said Destiny to the apex of Great. He's making the 40 pixels button like the regular button, then could be their small 1 to 32 pixels in the large to 48 pixels. So you can do that in in your design system. Ah, now us. In these tutorial, we are going just to make one size. We are going to make the roller with this is going to be 40. Okay, so So it's going to be fine anyway, just realizing that my test 21 it's pretty big, actually. But as you can see scenes, we put these in tow feet, height mode, and our bottoms remain on their 40 big cells side off life. So now we are going to make our secondary battles for that. I'm just going to duplicate these buttons for the sake off being a little bit lazy and, well, to be faster. Why not to say it? So to do this, what I'm going to do is instead off I'm going toe press here in layers again. So we know what we have here. Now we have instances off these buttons and what we want. It's did that all these Eastern says from the Masters. OK, so we just detach. And now we have Flike again, our outlying out life. We don't have the component like this anymore or birds Yemen or instance. And now we're going to change this. Okay, so what we want for our secondary bottoms are instead of having this color in the background, we want the border to be like that. So what we do for that is go to stroke. We press here and we set out primary color. Okay, It's good practice to put it on inside because this is going to be better for development later if I put it on the outside. As you can see, we have height off 40. But if we really so mean to this toe or toe our layout, great, we can see it's coming out is popping out. So at the very end, these even if it's saying 40 pixels is having one pick self here and won't be so there. So is 42 in height and we don't want that. All right, so we want always there strokes on the inside. Get so you know. And we are going to taint this color toe blue to our beautiful primary color. And then our background It's going to be white. In this case, we can make this white, okay? And so for the Helber we have, we're going to make the same operates Young. We're going to put the a stroke on the Khobar. We are going to put these coal or like white, and then we're going to put our color into this Khobar one, and then these is going to be pretty straightforward. Um, we go to Stoke again, we go here. Um, well, in this case, we can talk about usability a little bit. Somebody lies to likes, toe. Leave it this way. In this case, what we're going to do is put it on white as well. And this we're going to choose our semi blue purple being think color and what we're going to do A cool feet, er, FEMA has is instead of going here impressing create component than going here, you can sell it, three of them click here and create multiple components. Did that will make separate components. So now we have it here. And what we're going to do, it's one by one. Renamed them to battle primary instead of primary is going to be secondary. Well, sorry. It's going to be a secondary and going just a GOP secondary. So and then we are going to select this one. And this is the whole where those who that same. The name and this is the disabled. We best secondary. So we have three more buttons here. Um, we can make Let's make the link button. Okay, let's do the same operation here. Just copy. Well, duplicate detest the Stans. And in this case, what we are going to do, It's, um we are going to remove everything. We are going to remove the background. Well, now, I'm not going to leave the white. Actually, you will. Now, you see why in this case I'm going to remove this stroke again because we don't need this talk anymore. And in this case, we're going to remove this as well a stroke. All right, so we have our primary battles, But in this case, I want something else. I want toe live a little bit off Ponti thing to these bottom. So when we click here, we have, like, this kind off, uh, Google drive stuff buttons. They are. They don't have background. But when you are positioning yourself on the whole our estate, they have, like a gray, um, background on their on all their clickable part. Okay, so we have our link bottoms. I could name them. So what we are going to do is same stuff. Press here and components create multiple components. And then instead of secondary, let's collect link you. This is, uh this is my convention. You can name me. There are many conventions out there. There are many ways off, even created components people. Some people try to make super complicated the stuff in orderto ah, they create like a background. And this background is inserted in all the components. Or if I change the these master component, it changes and express all of them. But I have worked with many design systems and trying to make eso complicated things. I mean, trying to save work later, it gets things so complicated to use that at the very end, it's it's a namer toward toe work with it or make a change or your components get super complicated. Are components here? As you can see, they're pretty simple. They Yes. Have a background. Which is this? And then we have a text. Nothing else. Um I have tried other methods more complicated tryingto make ah, like a super automatic eyes thing and didn't work for me And the there were for the team on working with and anything worked. So I recommend you to follow these to follow these methods. Anyway, there are many articles there, no medium. You can read about them and see all over different or their methods off working with this. Anyway, later on, we are going to make another method when we are working with input so we can save some time bomb. But for but for buttons, I think it's better to make them kind off independent, one off each other. OK, so, yes, we have our bottoms here. And let's make some cool bottoms here. That has some I concentrate. OK, so for these I have yes, duplicated this, um in this case, what I want to do, It's I have a plugging called feather icons. You can important improving any any icon you want as we keep icons or very similar cool. Pluie and I used a lot, which is called Connie Fire. It gives you access to hundreds, hundreds off icons you can make a search here for, I don't know, even trash, for instance. Or you have many icons here or your You have a lot off. Um, you see, you have all these icon set. So, for instance, you want, I don't know, go with material icons, us press here and let's yeah, and this could be the will material icons with these tax and everything. So you have all them available here and pretty, Yes, Do you just do it and import icon and it's on the page already. So it's pretty. It's a pretty cool blagging, you know, And, well, this is pretty basic. They will material, but we have feather as well. But you guys, I am Icahn's eight for Windows 10 Foundation flat icons. A lot off a lot off supercool icons and depo icons are pretty cool, too. Anyway, I used this flag in because on Lee has Fred Reichel's, which I like a lot. So that's what I use. And let's insert a narrow that's inviting. We want to put a narrow here in a bottle, so, uh, you can see here that we're trying to do is something here. It doesn't work Trying to insert it here. Um so that's why that's it Because it has thes as you can see when you import on icon from from ah, for feather icon Sorry, Quantified. They come with a with this frame. So what I usually like is toe on group this with a common safety G and then press command Z to make a group again. You can do it here like group selection. As you can see, it's common D or for for PC would be like Contrave. So do you just lend the circuits toe, get you into a speed? And as you can see, I'm tryingto feed these here and it's kind off Impossible. I'm goingto bring it here into MacBook pro three and I'm going to do it again trying to insert it here. But it's not working. Eso Why is that? Yeah, As you can see, it's not letting me put this. I can't hear. Well, actually, I'm going to change. Well, not not not yet. I want to change the color here, so it's white, but why is not letting me to insert days here? um because it should. Why is that? It's because it's an instance off these all the buttons. So we are going to eat. That's them again. And now we're going to bring this thing way you're seeing. Now we have here like a blue thing, like a blue stroke there. And if Walla it's inside So we are going to apply for these A stroke The white and as you can see we have now are icon and we can control it again. Like Imagine. We want less separation. All that's emerging. We want more separation on everything. I think this icon, it's for the Reagans has thes two pixels strokes. This for me, is too much. But as you can see, we have now these iconic we can control it with this This saw for the sake of consistency, let's say 24 or we can go with 16. Maybe spirit are 16. Our eight speaks it great. OK, But I think maybe something Yeah, something around up 24 again. Yeah, I think it's better. So we're going toe. Just copy this thing. This icon based it again. As you can see, this increases a lot, So we are going just to put it here into the Khobar State, as you can see, is making a weird thing. As you can see it. Positions up there on there There is a cool feet. Er here. I'm going just to put it there again. There is something interesting when you are working without a layouts and some and you have one item selected. Is that here? The alliance? Um, pilot, it's working. As you can see, if I select in the middle is going toe aligned to the middle. If I I need to the bottom is aligning their if I want to align them. This is a straight in to a top on the bottom. I don't recommend to do that, but you can do it thesis cool for photos and everything. So they you stretch, you know when when you have they are kind of responsive that that's great for when you have photos inside and out early, out or on about our something like this. But for these particular problem or button, we are just leaving like that. In this case, we're going toe out here. They all try it as well to 40 24 like the party between the text on the icon and we are going to make the same thing here, and we are going to put here like 24. As you can see, here are icon. It's on the top line until the top. So we're going to on and align it there. Uh, here you can do something or imagine you want the bottom before the sorry, the icon before the text, you have two options. What I usually like to do for this particular button is to duplicate the symbol and put it there, duplicate this one, put it there and put this symbol and putting their And you would say, Why is that? Why don't do create another bottle with just the, um with the with the icon on the left and another button for the icon on the right. I don't want to have so many components here. Later on, the assets and feet, my house a prequel feet er we are going to see it now in action. So we're going to select again this and we are going to create multiple components, one component off it, and we are going to rename it this to bottom primary. Jesus, I made a mistake, but we're going to make this icon. Okay, Primary icon. I made a mistake renaming, naming them, but it doesn't matter. It's good to go. So we are including here life. The icon. So I was telling This is cool and I will show you how and why we make Aniston off this component. And let's say we only want there. Let's say thes cycle. So I don't want this icon anymore. We can double click on here. We see that it's called Group. I think I'm going to do something. And it's renaming this kind off group toe icon because group it doesn't mean, really. I come right. Okay. And this is going to be icon left and then going to do the same I suit have down the thieves before, so I don't have to do it now on good. Be easier. And this is all right. Go left. This is why you have to think how to make um yeah, thes was her right going right. That's why the same systems when you are making them. Ah, they are. You have to think a little bit about what you're doing in these cases. I wasn't thinking too much about what I was doing. So that school, Because if you say, is the name here, your, um, instances going to inherit the change off names, too. So in this case, when you are double clicking here, you can see that we have icon left there. And if you press delete or you press these I button, as you can see, our bottom rece ices and I can't disappear so I can do the same thing with this and we could have thes bottom. But this is going to be used. Primary use is going to be used mostly. So I have to be turning on. And turning off the icons is going to be a pain in the S. But if if when we want a bottom with some icons, we just drop down this and then just remove what we don't want, Asai said, you can click. You can click on the I, or with this I can left selected, you press delete and instead off the leading you have it here, but or sorry. No, because I made it on their Sorry, I made it here, but these you press here on double click and press delete. As you can see, what it does is Yeste. It said it is down, but it's not the eating, the the the icons. Okay, so that's how I like to make my icon about things. We could do the same for the secondary ones. This is going to be much faster because since we already have thes bottoms here named on everything is going to be pretty straightforward again. The touch these ones and then guest bring these here and with the old key so it gets duplicated and these want here and now what we do, it's ah, we select here the color. So he's going to change. And this is going to sayings as well on as we can see here. These bottom doesn't have the 24 big cells here. Uh, let's put here 24 when we pace our icons here they are good enough. So as you can see, they are lying to a top. So we are lying to the middle saying thing here and now we're going just to with the al button, select the arrow first and then yes, drug it here, then we are going to select this too. We are going toe onto the middle again. We need to change the color of them to much. The Khobar estate and same thing applies to these disable battle. And then we said that this too. We press here and again, we go to the disabled state. Okay, So we are going to create components again, create more depot components, and this is going to be the secondary icon. Could be the text. So it seems you're here. Okay. And these one, So as you can see, um, I'll try out. It's pretty cool. We can do the same thing here. I will do it on my own. I don't want to again making the demonstration. But the way have learned in these in these super Forest Ah, lesson how toe first, how toe create icons will not not create, but how to import icons and and yeah, and how toe make them life with the al tryout. So I see you. I finish this and see you on the next lesson. All right,
10. Inputs: so we'll come back and listen. Start these new Listen, this is going to be interesting. What we are going to do now it's We have a look toe, other descent systems. Ah, second thing they do after the battles is the forms they call. They call it forms for me at input radio button checked boxes, select andro downs, Rain Select. We can have here day pickers a lot of stuff, right? And I find it pretty cool because this kindof components share some things that are pretty equal between them. Even if they are different, for instance, we can see we're here. They say these background, it's all the same for for all of them, even the drop down. I mean, the difference is yes, that they have like an icon on the right or an icon on the left. So they are pretty much the same. Right? Then we will make the check boxes really buttons, etcetera. But let's start that. See what bright bring storming is? Doing here with the inputs is the same as you can see. So we are going toe bill are our text components our four components? Okay, so we come back here, we can create another compass. So later on it is here. Toe. Yeah, to do all our stuff. That's for a Sekoff speed. I'm just going to duplicate this button. So it has already these 40 and hate fixed. And it has outlying out in this case, what I'm going to do. It's detached this so it doesn't taken anything from from its parent. And I'm going just to remove out, try out because usually, um, import sell its and they are fixed. They don't If you are right in a password alone password The this IRA doesn't move or doesn't resize itself. Depending on the content, they are kind off fixed. And if we have a look at, then basic Ah, uh, basic destructor off fan input feel or select or right radio battle. They, sir, some parts in common. We cannot see here because these design systems are kind off their their I'm not say they are pretty cool outside, but when you are trying to apply them, they fail sometimes in some things. And I want you to make a pretty good design system that it consistent across elements on it can be used without a struggling later. Okay, Restore Mean happens a little bit the same, but yeah, they have. It's a pretty much it's the best of the those three we have. We have seen off those this design plus code and explore Princeton Minutes pre Must the the best of them? Why is that? Because it's the most complete. They have put the label here. They have the these hint miss it, or can be for success methods, usually not when it's accesses success. And it's all right. They usually market with a check here or when I called or something like there's no with a message, but he has the ever notification. When you are writing something, my password that doesn't match with the upper password input, fear or or you have to insert an email and you haven't put the door. So that thing, that kind of thing that keeps error. So if you can see the structure, its label ah, an input with that border than a placeholder, which is pretty important sometimes, depending on how you decide to do this, these kind of the science and and then a hint message or a critical message. Aero message here so we are going to focus on making these first. Okay? And that's why what we're going to do. So, for these, we almost half hour our input Tex here. What I'm going to do is duplicate this because it's easier than to create another text. And we're going just to duplicate this one as well and put it here. Okay, Um, what we're going to do, it's Ah, I'm going just to said there layout down because it's a little bit annoying. Ah, for instance, here we can check and put it to our picks. Agrees is going to be on 16. And what else? What else? What else? I'm going to put this in outer moat like, I don't want this to increase like here. I want to to be like that. Yes, because I liked my texts known to be fixed, but in these situations, it doesn't really matter. But it took a in case it that in case it goes over there, I will see what I do. But eso that doesn't a struggle. Or if I right there a long test, it doesn't toe make two lines. You see, e don't like that. So I prefer toe leave for my text. Free with this. Out with Peter. Okay, so now we're going to create the border for days. Usually it's, ah, neutral. The color you use for this and as well. It's a new truck or what? We use what we use for placeholders, placeholders Armento make like a re informant. Reinforcement off the message you want to send, for instance, insert your email in case this is an email. The ah, we're going Just tickle it label, and this is going to get called placeholder. Why is that why I could put here like an example already, But I like to put this text because here the text that takes the the text you Ah, you put here. So if I tense these two email and later on, I'm having these tow these. I made the component off these which decided the idea. And then I make an instance of it. It's going to appear a mere email instead off label, so I prefer to name them with their four posts. So in this case is a label in this case is hint message and in this case is usually smaller . But we don't have any a smaller. So I think we're going to create it. You know, something I forgot to do before. But that's the greatness off design systems that, uh, you can amplify them or make them bigger and increase them while since you have like, ah, system for it. So I'm going to take if I half I just I had, like, that's why I like to make a screen sort for things because I come here to screen shot and I have my Buswell a scale and we see here that we have in our basal a scale 12 points to a total speak. So So we are going to put here toe off If this is pre pre pre, pre small So MM, 14 is to be well, in this case, have my visually scale. It's going to be off the grief a little bit, so it depends as well on the typography in this typography maybe 12 pixels were swell, but in our type of roughy doesn't were well, so you just raise your eye and say OK, 13 is good enough. So we create like our regular 13 a style. Okay, so we're good to go and What what we do here. It's go to the king's message Press the rebel are 16 and we go to rebel ar 15. I like my things or there. And in this case, as you can see here when I go to search for 13 is not at the beginning. It's at the end because I created the latest. So what we do is yes. We press, we click outside, we don't select anything. And what we can do is there select their regular 13 and bring it up. So that's how do you are there these things. Okay, so and I'm going to do the same with the label is all right at 16 pig cells. We could make it a smaller if you want. In some cases, they are smaller. Um, I like it this way. So what I'm going to do is I'm going to apply, like, a neutral, harder neutron neutral 30 for maybe for the label. Okay. And there is something interesting I can do here, since we don't want this to toe resize itself. When we are writing here, this is going to be fixed and actually and goingto bring my layout out and I'm going to put this into four columns because usually when we designed with 12 columns what we make like we use like this part, like this kind of divisions. So we make, like, three riel columns in content. Okay, so this could take, like, four columns, but at the very end is yes, like one. And we can do something here that it would be the easier part that's that is going here and create a component that would be a right. But if later on I decide to delete this and delete that, as you can see, my component is a steal. Um, I don't know. It's ah kind off. Yeah. I mean, the component. It's a smaller and everything. It's like it has a bounding box that is huge. So what I like to do instead off making a component here, Let's just on do this and eliminate Delete the component. I have to wonder. Underway lot. Sorry. So come on, component one. Break yourself. Rake it. All right. Now, um, something that I like to do its select this and bring my out Try out stuff. What's going on? Yeah. Bring my out. Tory out here and, as you can see again, handle these. So we are a pixel really is good to go. And now we select the label and we have out early out to and we put this into, uh, eight weeks. So grief again. Okay, Streaking. Okay, let's go with the numbers. So now our I'll tell you how it is working a suspect. Er so it's everything is at eight pixels. And as you can see, this is working pretty good. I don't know what this white, this place holder is so weird. So there is something interesting here in a range. When you see these kind off decimals here, we want to round two big cells, and I want I wanted these to be, but 16 is what we I said before. I don't know why it went, missy. So yeah, in this case, yeah, we're going to do that on this case. That means to take something. It's all right. Okay. I know what's going on here. Um, it's OK. Yeah, we have a frame. Vertical. Yeah, No. All right. So we are going to create this component, and this component is going to be called input import next on default. Okay, So what happened If I want Yeste, um, the placeholder and the label, but not the heat message. No worries. You have Click on the hidden message and you just delete it. And this is automatically rece ice, as you can see. Okay. Or if you don't want the label you deleted as well and you have a placeholder off 50 off 40 pixels. If you want everything back, you don't have to put everything again in the ah, you don't have to bring another another element. Ah, you just press on the eyes and and you Yes, turn it on. So we have offer. I'm going to just delete put out the belly out in this moment. And there was something There's something I have done that I must say it's not so well done . And I'm going to tell you what that is. It's ah, imagine, um, in these particular case, I because I was like, coping the bottle and everything. I have thes part instead of a background for this part. I have, like, these frame, as you can see, right? So I'm just going to wreck this. I don't need it anymore, but um there is something that I would like to do its toe have these component, like separated and like a master component, you are going to see what I mean. Right now it's what I really want to do with this. It's make like a background with a board there. So later on, we retained it. When? When its focus and everything. I only has to create, um I can't replicate it in many, many, many places. OK, so that's I don't know if I'm explaining myself well, but what we're going to do, it's great this and insert it in every in every element we and and every component we are going to create. And this is going toe make things easier later on, where you will see what I mean while while we are doing it. Okay, So let me yes, create these and I'm going to create. I'm going to one group this because he said frame right now and I want it to be a rectangle . Okay. Whoa, it doesn't matter. Uh, what I can do here is create a component and I'm going toe call this master input. Ah, Default. Okay, so this is going to be our muster input default. Um, background here, and I'm going to compete his name, and this is going to be our master input. Ah, holder. Well, not Hubbard. This is going to be, like, why focused state? That's why when we are typing or we have the input selected this good, this is going to be our input everywhere. Well, and then that's it for now. What we want to do here, it's instead of having this frame, I'm going just to, um, group it and a So you can see we are losing our, uh, our all the Espace here. I'm going to try to put this here into the placeholder, and I'm going to try to put it here. All right. I think it's pretty messy. Pretty messy what I'm doing. But you will get the point and actually, and going to do something, I'm just going to duplicate this. Did did that ship, and I'm going to do in from from a scratch. All right. Okay. So this is our, um are missing things around. Just let me on do everything and come back toe. Yeah, to his part. Okay. Sorry for the mistake, but so you can lend where I'm doing wrong. You can lend better and faster. Ah, from the very beginning. Okay, so we have here three master stuff. Three components. That doesn't mean anything. They are just squares with some colors applied on it. And what I'm going to do, it's Ah, duplicate this. Detach this Eastern's delete this ongoing toe on group this. I don't want any frame. I don't go on anything. I want just the label on the placeholder and the hidden message. Okay, so we're going to build are uncommitted in east turns off these master component, as you can see here, these one? Yes, these has this diamond empty. So it's an instance. And where we're going to do, It's put this are at Hear us out. Input field. Okay, so we are going just to align this as we have before we are going to create a group with this is going to be the input and we have our level and Arkin message in this case and going just to put them all the rare the way around and what we're going to do is select the label on the placeholder and goto outlying out. Okay. And now we have eight here and then our him miss it and out. And we pick this group this out, try out frame with it. Let's call it import Loville plus input here. It's important to name things I sometimes forget later on. I have to do it because the science system has to be pre clear and everything has to be a name. Okay, so and now we sell it. This group with this is already and now totally out, as you can see. And then we select him message with the safety, and then we apply another out. Try out. Okay, so we have a couple of factory out what this gives. So give us the freedom toe. Really? Move the hint. If later on we decide we want these existing pixels. But the label is they're fine. It's better toe make to out Tory out instead off putting everything in one out to lay out. Because maybe you want different separations between them. OK, you can do it if you want part. And now we're going toe toe make. This has a component. This is good to go. So this is going to be an import text default. Okay, so we have it. And if we create again, um, like an eastern off this and we, um, hide the label on the him miss it, we can bring them up and then down and over and you know you know what I mean. Okay, so this is on an important thing, and there is another important thing. It's that when elements are named Ah, Now, if you can see here, we have an eastern on Eastern off these component. What's cool about these ihsaa? Imagine you want, um, like a focus ST of these. You don't have to create another input for these. What you can do is yes. Select these mustering put default and hear in the distance. You can override them like things in front for from the focus one and these one saying sit for an error one. This is pretty cool. And it's super fast to do. And you don't have to create so many components. We can create them now. I mean, we can detach this and create again a component for instead of the fourth weekend things. And I'm here for typing or focused. I prefer focused. Okay, and these we can detach it from this in name. Eat, um, and create the component again and change it to error. That's cool. Because here, as you can see, if I create an Aniston of these now, I can go here and change it toe error or too focused because we have created, um, components with the same instructor name and them. Ah, Fichman. Lest you override between your in protest default, your input tests focused and your input text error because they are in the same kind of folder the same way. If I create a component in the stands off this, it will left, it will let me change between these three because they are in the same folder as you can see, it contains toe Where or or I contest to focus. OK, so it's up to you in this in this particular case is up to you. If you want to create, yes one component and change here, the estate so focused or well, in this case, I'm going to leave it like that. But Or, if you prefer toe, create three components like one for like the default, like focused or error usually what What? Um, it's usually in the science systems what you do, it's you create a component for it. So later on, what do we owe to us it and come here And you come here into input texts. If you want on a road, you go for an error. Okay, But I have found that when I'm designing a lot of times, I have some texts already here. I mean, you might think I'm making an interaction and I have to put a here. My email and I'm going here. My email, uh dot gmail dot com Something is going again. The text. That's the only pain that when you make a change, you have to make the change everywhere. So in this case, and I changed the what's going What's going on? It's like searching here. It's kind of weird. I want here to Yeah, and I want to change these new draw to the ISS. Well, he might. Did you have it already field and imagine in the next screen or interaction the reason ever , instead of putting this again what? I think it's faster to go here and put this like an error and the king message come here intended to. Critical. And you don't have to bring another stuff here, you know? So for me, it's Ah, It's like easier toe sometimes change it on the flight. But it's a good practice toe. Have all the elements separated, even though later on what you are working, you just make the overwrites over the main piece. Okay, so it's up to you How to you on how you want to do it. Um, completely, completely up to you. So in this case, yes, for the sake. Off having all the elements. Ah, like like really well, a structure. And everything is going to be our test focused. This is where was. However, I think I just delete it. So in this case, I'm going to make this a component. And this is going to be D text input error. This is our focus. This is hard test default. This is our field. When when I when an input is field, we call them field. So is going to be like that. So, yes, this is going pretty good. The good thing about this is yeah. I wanted to show you this. You find make a copy of this and then I create like a component. If I make it change here, all of them will change. Or if I make like a change India's, um in this particular case, I'd seen thes, so this could be like the master component off all of them. So in this case, I want this to be primary because it's focused and we are typing. Okay, but this is kind off a master component to what? With what usually people do. It's renamed this to Master because he's our master component, must very important text default. And this is going to be a just on input are really in protest. Default. And what we do is yes, create again, a component what we're doing. It's making a component, often Eastern's. So what we are doing is making a component with some changes. As you can see here in this case, you can see that there is thes symbol that indicates that this an instance off this one, as you can see the visa. Sir, this is a master. This is, um oh, here. This is a master component. And then now this is a master component to but includes thesis component inside of it. It has input. Text default within the in this case could be these one. Okay, but it doesn't really matter. I mean, we will hear. We can see here the master input this default. It has these included on this. And we have made some overwrites and changes. This pretty cool because as we were saying, if we are making changes here, everything changes. Or we decide that our label has to house bigger label and bold and everything. Everything changes. Okay, so this is the only thing that I think that it's great to do. Ah, like with some kind off complication. Like nesting symbols. This is ah, where is nesting symbols? Or it's called nesting component. And this is a critical technique. And I hope you find it interesting. We in the next lesson, we are going to keep on making our the rest of the components with icons. We drop downs, etcetera. So see you on this now and then is less on
11. Mistakes and new input: before we continue. Where? Er going to do something. We have seen others. The sciences that has it. It's the icons part. Okay. Ah, every one of them have them some way or another. They have these iconography here. Yeah, all of these. The science Eastern. Have them A. So you can see they have them as a components and they are usually the same size. So, for instance, they are 28 big sales by 28. All of them are 28 by 28 as you can see. Why is that? So you can override them. For instance, is if we made a component on instance off this component here, we can see that we have these icons and we have these categories here. And then these You can just change the icons on the space. Let's say remained the same. Okay, so it's important all the icons served the same. The same space, if you do it by 28 is fine. If you do it by 24 is perfectly fine to it depends on how you are doing your icons. As I said before, we were using black for their icons blacking here toe insert the icons and that's pretty cool. They are 24 by 24. What we could do here it's convert any icon to a component so we would have, like, our icons here. We could rename them too. I conscious last airplay and guest put Alli all our icons here and would be fine and convert this these new one Yeah, to why comes to and you know But there are many resource is there for icons. I just made a quick search here in Google, like freaking out further icons. And it just happens There is, yes. Ah, file. With all the icons here in components, you can see So we can just come here as you can see the Aral components So we yes, can copy them. And based on Moammar on our file, well, this doesn't matter, is if it's a little bigger. We later on contained it. We're going to based a lower or are icons here. There is something I haven't talked to you about, and it's ah, the naming of the frames. You know, there is this important thing that if we renamed these call like icons later on, if we let's say we make an instance here. Well, let's go here toe assets to see this in action. So we go here toe assets where we can find all our components. You see here that we have, like, these icons, feather icon. And then we have all our icons here. This is important. The naming of the off the off the yard board as well. The naming as the own component because, um, for instance, instead of naming these MacBook pro five with this kind off, um, stupid. And we call this input, we come back here to assets, we will see that we have input input, input, which is kind of redundant and then input, master. Okay, so this can make a difference while looking toe or 13 4 for our, um, components. What it means is that when a component is inside in another, um, frame that has a name, these makes like the first, like the first folder. Let's call it like this. Like the first folder. So, in this case since I Haas hot name these, like input, input, text default. When I come here to assets, its input, input, text, and then it's in here. Is that if old one. But I can just a meet. Name me here in the in the component. This in booked. Yeah, I can just delete it, OK, Because if it's containing this, our board is going to take these first name, the input name. So what we're going to do is yes. Go ahead and just remove these input stuff. Just I want to month in here the master, because I want to differentiate what it's really ah component from what it is. A master way. Don't want to include masters in our designs. We want to include components. So there is some people. What usually does this? Yes. Named this as component or group or whatever. So they know they difference. Eight. Pre good. What is a master from their component? Okay, so it's up to you. The naming off. How do you want to do it? Later on, you can make like a book renaming. They're applauding for Doc. So now that we have our icons here, what I want to do, it's Ah, break all I want to break this master we had before. So we are going to make, like, another completely different, um, component. That's why these instructor we created for these doesn't Hello, was to boot here when I go on and then one here. So we're going to break it. And yeah, so for that we have to just remove out, try out here and then we have these input, and we're good to go. So now we have justice for, um layers. Three texts and and they input instance. We see it is the background with the board there, these we wanted to maintain. But what we want to do now it's insert these icons we have here. So I'm going to Ah, do something and it's copy. Bring me down some I If I find it here on the only thing I can do is go to us. It's in search for I and we have it. Remember that assets are out components. So we have our component here. And as you can see, um, we need to change these to another color. I'm going just to put it that the's Wait just for the sake of seeing it later on, I would say it's the color here, so we want these to be at 16 us. We did before on the placeholder. Let's say we want at eight pixels from from this, okay? And now we're going to put another icon. Hear that later on. We contains at 16 pixels to it's too. Yeah, that's good. And now that we have, like, east and sets off when I come here, we can go here to instance. And we have two oceans go to the master components. What we do is take us to this bait here on pointing on our eye icon. But now if we club goto eye, we can see that we have here all the icons, as you can see so you can just pick whatever we might think we were a male here, so we just take selected mail and we can just change the Cold War. Okay, so yeah, So this is a This is a would think so It's good to put components here. So later on, you can overwrite them with another icons here, so that's a good practice. So we want with this 1st 2 thes two ah, separate layers, half like an outlying out. Why is that? Because if later on, we don't want this and we erase it or hide it. We want the placeholder to move to the left. So for that, but we do, it's create an outlying out, which it's already in place. Just check that everything it's aligned to the middle. So when things disappear, these doesn't start to make weird things up and down. And so and this is going to be, like free and what we can do. It's making roof where group with all of these items. So now we can make these and these together like an outlying out. And then when we can do he to its ah toe, let's see our layers. As you can see now we have undoubtedly out. Remember those two boxes here means it's on. I'll try out and what we can do Now it's put out hidden message inside the out. Try out as you can see, the scenes we have placed. The hidden message here is going to be there, but if we just put it upstairs is going to be down. So remember lay years in these kind of programs, like skates or fig MMA goes just from the the bottom to the top. So and here it's just the opposite. So it's kind of a weird thing, but it goes like that. So now we're going to create our component, and we are going to commit to change this Korean our our component because this getting me a little bit crazy. So let's this neutral 70 seems good to me. It was 60 or 70. I just forgot. This is 17. Yeah. Maybe this is too dark. So let's go with a 70 here. Okay? So now we have almost all the possibilities included here in our component. So why do we do with these components? I think we suit just remove it because we have a better and most complete, um, component here that is going toe make all the possibilities now in itself, while this is quite simple, so yeah, so we can learn from my errors. And now we have, like, an over master component which is going to be, like muster input Ongoing. Justo, call it master input default Because this is going to serve for a lot of things. We will see. So now we just make an instance. Yes, they touch it again and we are going toe. I start to making these changes. We can make it or we can't. So maybe we don't know it Need to do it. What? We maybe need to do its instead of Theis, which can be a little bit off. Not so used. We can put here like an arrow. So, like an arrow down again. We have to change the course here. That can be a little bit off. A little bit annoying, actually. Yeah. So we have our arrow here for our drop down and here for our email. This is good, because later on, we continued to wherever we want in any situation. So instead of calling mastering beautiful, we are going to call the last days, uh, fixed the fault. Okay. And now we're going to create a text area. This is pretty similar to this. What happened? Okay, I'm going to change it by another with the box. Whatever. It doesn't really matter, but something changed here. Okay. Anyway, we destiny that Michael here
12. Textarea: so welcome back to this lesson in this lesson. We are going to see how to create these texts. Ara, these responsive takes area. Okay, so for these what you need to do, we are going just to live this like that. So let's start with these. We had these component we create first, so we're going to just create an instance. Detach it and we are going to one group. Remember, lying common shift J or just go here on on group and you keep on grouping. Still everything needs. Yeah, like, broken apart. So we are going to remove. This is stuff we don't need to create this. So for these, you see this peculiar? I can hear we can. We are going to created with lines. But for now, we are going just to come back here and just to move this place holder to 16 pixels here. So we're good to go, and then we're going to create these couple off lions here. So they much this corner, which is the typical um, I come forward drag and resize Thes aria. Okay, so for that, we go here into these opiates menu in shapes and go with line or you can press. Yes, l And then we are going to go here and select here with sift key pressed. We are going to make this line there. Okay, Now we're going toe. Just select our neutral 70 and we can do to two things that is yes. Duplicating these. And then, um, make it bigger. Do you hear? Or we can draw, draw any line that's up to you. And as you can see at 100 percent view, this is a little bit too tight. So we need to just move it a little bit here. So we're going to make it bigger. We won't ask one pixel here instead of two. Let's see how it feels. That's much better. Maybe it's a little bit to separate it, so I'm going just to clothes the's real bit. Okay, So I'm just going to make this Yes. One big sell. Yeah, something around that maybe this is not in the correct position. I'm thinking maybe that's why I I don't get the feeling well, it could be good. It's good. So we're going to learn about constrains how on how to ah toe to make these things responsive. And they When do you resize this thing? They don't break well. This is breaking here a little bit. We will see how to fix that. So for for these particular element there takes area. What? We're going to do it. We are not going to play with out early out here because we want something responsive that when we do this, it's responsive and you can see the behaviors here. This is kind of a scaling, but not scaling a suspect. Er the placeholder is moving as well. This is kind of a scaling, you know, We're where he and messages giving a lot off a space here. So this is kind of missing. So for that when we sell it elements in fig MMA, these constraints panel appear. And as you can see it, it said toe a scale and we don't want our label a scale. What? We want this stay on the same place it is. So for that, what we do is put here. Yeah, that either sticks to the left and visit sticks to top. So when we select all these things and we do this, it's going to stay there. The hidden message. We want to do just the opposite. I mean, to be on the bottom, but on the left and on the bottom, off our selection. Okay, so we want on the left and on the bottom are place holder. What we want when we do this is to stay there. We don't want it to be out up here or something. It's just because we want to start writing here and the lions will go down there. Okay, So place called there is going to be on the left on on the top two. No, this thing, uh, the master input. Default. Instance. What? We want to do its scale from here to wherever we pull in, pulling it down. So what we need to do, it's left, right? So it doesn't make these. I think that the two sticks on the left and it doesn't increase its size. So what? We want to do it. Ah, let's select this. Okay, so it's left on. Right? So when we scale it either scales to the left or to the right, Sorry. And to the bottom two. So now it's doing it properly, and but we want to be a sticked on the on the top. Right? And these we wanted to be. We are going to make a group with these two lines, and we are going to call it drug and what we want. It's to be at the same place like it is right now based on the bottom. If we do this, as you can see, it remains at the same distance off kin message at the same distance off this input field. Okay, so for that, what we do, it's putting on left. No, sorry putting on right, Because we want when we scaled to the right, Peter stays here on the right, so But you want to be It's on there. Right? And then toe the bora and what we want to toe. Let's see how this is performing. When we do this, we're having some issues here. Uh, student do that, actually. Let's see how it iss Okay. I'm going to make a component of these to see how the component is working. As you can see, this is a mess because yeah, there is something. We're here, I think. How it let's see how the fix in the label is. Um what is going on here? Okay, as you can see, it said to scale, but we don't want to scare. We want on the right on on the bottom. Now we are talking. This should be on the left and on the top, this would be on the left and on the top. I don't know why when you were created component the constraints, like get gets override. So just a reminder before doing all the constraints thing, make sure you make your component and then you start to make the constraints for it. Okay? So you can make, like, overrides inside. Because if not, everything is going to take the same approach. In this case, it is applied like a scale. So we don't want that in this case, we want this to be being to the left and right and to the top on the bottom. So if we see now, this is performing pretty good. And this is performing are suspected. Anything moves on the left. Any of these texts are moving, and we want to be this soul it and be 40 for their start. So it's the same component. If we put it in, put them side by side. What's going on? There's some problem here. Okay? This doesn't matter anymore. Uh, yeah, This is a good one. So this is, like, 84. And this It should be 84 toe perfect. So now we have our Dix Aria, the fort on. We have created our text area on. The good thing is, we have learned about constraints on how to control them and how to make our thesis our components responsive in the way we want them. OK, so let's go to the next lesson.
13. Checkboxes and radiobuttons: Hey, welcome back to this. More a phone off, creating a decent system. Sorry if you're hearing a lot off crack and noises on the recording, but actually there is a window alert here in Spain, actually in Madrid, and my house is kind of falling apart. So my apologies for the sounds and cracks and noises in the whole recordings, but it's how it is. I can change it. So sorry for that. Anyway, we are going to create now check boxes, and as you can see, how it check boxes made check boxes are they have, like 84 the state. They have, like a check the state. And they are all their estates, like in intermediate. We're going to create into so no worry about it. And we are going to create the disabled estates as well. Some some off the the sign substance out there Datum put it. But it's necessary. Yeah, you can see everything is falling apart, right? So as you can see in in this order, the sciences time, they just do their before the state detective state and this kind of disabled, almost invisible state. And if we go to brainstorming, let's see what they do. Um, where where you formers, right? Yeah, Let's see. How do you do it? Well, you have something here, but where are you? Okay, so they have these default district, Another personal detect, this kind of disabled, But this kind off, I don't know what it is. Kind of Yeah, is the disabled state, but kind of were. So let's create our magnificent check boxes. So for that and going to brink again are magnificent layout. I'm going to create these a rectangle off 24 by 24 because we are in this super pixel grade , and if I don't remember, But it was four border radios, so we're going to be consistent, and we are going to put again for important religious here. We could go here to three or to two, because in a s'more, opiates bore, the radios tend to seem bigger, but for the sake, off consistency, or for for this particular video and the sciences thing, we're really I'm going to leave it like this. Um, So we are going for neutral 70 because, um, I think it was our neutral 70 right? Yeah. Neutral 70. We can do something here. Actually, I'm going to just delete that. And I'm going to make an instance off this this feel these master feel we have here and I'm going to make it like 24 by 24. So the cool thing, it's if one day we are tired off this color and we changes to, let's say a read, everything is going toe. Be ready, as you can see. So we are going to just maintain this for these particle our Ah, think so? So we have already thesis our checkbooks. Actually, our default the state, so pretty amount of it I'm going to create a component on I'm going to call it check box default. And then I'm going to duplicate this, and I'm going to detach these Eastern's and I'm going to bring our primary color here, and I'm going to just delete these border, okay? And now we need some Uh huh. Let me just took something. It's not so bad that way. So let's go to our icons. And I'm seeing here that we have this check what we are going to need to create our magnificent checkbooks here. Well, where is that? Why are you positioning their men. All right. It's making weird things. So I have to bring Montali to this part of the off the screen. As you can see, our icons, they r 24 about 24 s. So this is pretty cool. S So we are just going to leave it a situs. And why this Good. This seems good to me. So we are going just to Yeah, we're going to create. That's a component here, and this is going to be called. Ah, Checked. Okay. All right. This is 30 Fault, and this is the tick, okay? And now we're going to create like these, like disabled our disabled estate And for these, what we're going to do itself. It feel that this pre seem it very close to the our neutral. Who wondering? Here, boy, this. Yeah. So instead off, we're going to be something like, not neutral. It's going to be something like that. Yeah, so you can really feel is disabled, not like in other places. And it says we are out in this border. It gave us the feeling that it's really disabled. Okay? And what we're going to do, it's a disabled person off this, which is going to be like instead of this blue We are going just too big this disabled 12 it was 60 then off 18. Yeah, and to be thes toe, make it more disabled. We're going toe. Put this into something kind off. Yeah, you get the feeling right. You can see it, but you can really feel is disabled and I'm going to create um unece turns off these? Uh, no, actually, from these because there times where you have, like, selectable selector imagine you have a lot off them a lot off check boxes, and then you de select one of them. These if this is a selectable ah, bottom or check box. This is going to change into something that what it has its line press l Let's make a line here. And so we learned the tools about the line. Then we can put this round cup here. We increased this to to and we take the court white. So we have this kind off intermediate the state that scientists to the middle, if we can. How it's this done. This is kind of weird shape. I don't want this anymore. What's going on? Well, I have to eat that. Remember to leave. That's things. Because if not this in Naimur Um, yeah. So now we have it be touched and going to Yes, Remove this shape this think Here what it is I don't want this feather icon anymore. All right, now. So now we have here our line. I'm going to try to position here in the middle. Yeah, but if we see it's kind off, not center. So we have a two centre mentally. And yes, this is their our intermediate estate. For me, it's too big. So I'm going to break this down like two pills. Two pixels? Yeah, that's better. Yeah, that's much better. So this is going to be our intermediate estate. I'm going to create this has component, and this is going to be our checkbooks Inter, mediate or indeterminate, actually. And we are going to create these, But disabled, I think I didn't name this. I'm going to the touch it and to create a component again. And this is going to be default, um, disabled. And this is going to be our I'm going to Well, this is actually not so. Buy it So I'm going to create a component and call it checked, Disabled some. Some people, like toe put like set books activated default on then or take books, disabled it slash default. But what happened since is if you do that that way is when When you I want to change these four days for that and you go here if you have make, like, full, there's then you don't have all the elements here. But now we have it. You know, we have We can see the default disable we can take, but we can change it by ah, checked. So I prefer to maintain all my my icons on the same level. Okay, so in these indeterminate here, we're going to go for this for good. And these were going to go instead of neutral wide. We're going with this. So we have it here, and we're going to go with have picked books, indeterminate disabled, and these heck books is going to be a tech boss now. So now we have all our battles. Let let's organize. Emery will be better, like in purse. And actually, I'm going to do something because yeah, I think it's better Yeah, you will see how so, Yeah, I'm going to first create that in the indeterminate and let let's see the school feature again that I really love. That it's letting everything go here, go tidy up, aligned this to the left, and then you can guess. Change these. Let's put it on 16. So we stay on the great and what we're going to do. Its select this place. Holder. Bring it down here and change the color, too. Let's say this one since preschool. Neutral 10. Let's see Utah 20 less a little bit softer, neutral tennis go to go and then we're going to live like, hey, big so CIA. It's too tight. Let's go with 16 You mean a little bit So you don't get hurt in your eyes and what we can do here, it's We have these components already. So what we can do this hour mustard components. We can make a copy of them like Eastern says, And what we can do here, it's Ah, go 2 16 and then duplicate 16. We can just aligned this to the middle here. I think you are lying to them, you know, to So I can just duplicate this. And as you can see, anything happens. Let's see if this lying to the middle good to go. This is sliding into the middle to my bosses. Here we go. What? And let's see, everything is aligned to the middle because what we are going to Oh, sorry. What we are going to do here, it's, ah, create new symbols with its ah, tick books text and then default. And this is going to be I'm going to copy their checkbooks text stuff so I don't have to repeat it. Okay, so this is going to be are and you component. And there's going to be that books and this is checked. I'm going to compete. This checked because this is going to be the checked and disabled. This is the Inter Mediate. Indeterminate. Sorry, I keep me spelling it indeterminate. So this is going to be our checkbook. Checked in, indeterminate disabled. BC Is Arctic disabled perfect. And this is going to be our default. It's a book text default. Well, we can call it that Disabled. No default disabled thesis are indeterminate, and this is and we have all of them already. So this is great because later on, when you come here to assets and we goto our tables plus test, we have all here perfectly order and we can just drag it. And we have these and we don't have to be thinking about how to position our are, you know, our techs and wit. Scholar off checks and everything is in a in a nice place. Okay, so let's go with the board there now. So let's go without radio bottoms. Radio buttons are pretty much the same at this. Just with we are going toe do the same thing now I'm not going to the same thing that's we did before. We could actually let's make a trick here, which is bring down in the stance office. We're going again to put these 24 by 24 as we did here. So this is going to be 24. We can do here is rise this up. I usually go with 100 so it's good to go. It's a perfect circle. We could do this just with a normal sick or circle and could be all right, but yes, for the sake, off consistency and for it's like dependent on the master. I think it's good enough. So let's see how others make their, Ah, their radio balance. They have these default. And then this kind of checked inside another circle, Let's see, explore kind of the same stuff. But they put like this the circle, like with this color with their kind off Ah, primary Cole. Or let's see how brainstorming this the Arabia buttons. So yeah, they do it like this. Okay, um, I'm not sure about putting Colores for the rate of atoms. I think this is better choice, actually, to put these colors to be consistent with your with all the elements. So for me, this is the way to go. This it will be our default. Let's go back to a year so we can see what we're doing. And this is going to be our radio button, and this is going to be called a default. All right, now we're going toe create like this one. We're going to change it like this, and this is a new drop 80. So we are going to put here like neutral 80. Where you here? So this is going to be our Let me yes copies, and this is going to be our default disabled. And now we're going to start creating our checked. So we're going to make an instance off this, and this is going to be like we're going to the touch it. So we are not creating a lot of stuff in the middle. I'm going to a group this, and we are going just to put another circle inside. In this case, we breast all or go here and to send a lips or on over or circle, we are basing everything on a pixel grieve so we would be like super tourists here. Could be something around that. But what happens with this is it's too tiny for me. So I'm going to go with the four picks, agreed, and this is going to be like 12. OK, 12 is good. I like how it looks, etc. Of what 100? Yeah, it's good. We could respond this even to that. It's not that, but let's undo keep it in front, off. That's good. So this could be our component, like our radio button checked and let's make a copy of this and like, let's make it like, yeah, like like this. So this is an instance ongoing just to Oh, yeah. I'm going just to detach the touch it and go with this color. Let's make these little trinity something around that this is going to be in no trot. 60. We were picking here 18. I don't remember. Let's see what color natural 80. Something like this. Yeah. Maybe this is too much. We need to this to bump down. Yeah. Yeah, I think it's good. It's not so common to see this, but yeah, you get the idea, right? So, yeah, let's create this. Our radio button checked, disabled, and yeah, everything is good. This is 34 disabled necessary for all. Right? So again, we are going to tidy up this, and we are going to put here like existence. So we keep it on the line off our great and everything is aligning pretty good. So we're going to create instances of this. And since we are yes, putting everything into the layout into the greed, that's much better. So now we are going just to complete this text here. Good to go. Good, good, good. We can press like come, Andy, to make duplicates off this, and then we see if everything is right, we just align. It seems pretty good to me. So we are going to create a new component with this in this case is going to be radio button radio bottom plus text. Then this is the default. Yeah, Looking good. So I'm going to copy yesterday, so I have to be, like, coming back and forth. So let's create this disabled state. Then we're going to thes, uh, checked. And this is the SEC. Disable. Okay, so we have our tick boxes, and we have our radio buttons in radio bottoms. There is no such a thing, like in the Terminator or whatever. Um, so I think it's good enough for now. So see you in the next lesson. Continuing making more components.
14. Switchs and tags: Hey, welcome back to this lesson. The house. In case you're wondering, he's holding up so we can continue with the lesson. So now we're going toe, um, draw our tax in our suites bottle. Okay. As you can see, this is kind off the morphology off these items, like off and on and then the tax. We have them here and let's see how others do it. It's good to see how how people do there on this stuff. Um, I don't see anything here, actually, about that they don't have, like, sweets is here. It seemed brainstorming. Yeah, we have the same they often on. And then the fact is pretty safe. Is precinct similar to this anyway, so we have the morphology. Attack is yesterday. Tangle with text in eight and something toe. Remove it. We are not going to make the selector. I've never use them for that. I usually do. I use their radio weapons. In this case, I used just I conceive. I need something like successful something. Then I just pulled by a Nikon so I don't make a component off it. So off we are going to create our sweets component. So for that. I'm going just to create an instance of this. And I'm going just to detach the systems on going toe on group it. You see, it's inside the frame. I don't need it. And if we made this is you remember this is coming from master import if all we pick it up from these old guy from here. So we are going just to put it there. But as you can see it, this is a little bit small, right? I think, Yeah, it's like, this is 28. This is 24. Let's see how others do it. This is 28th This is 24. This seems like a common thing to me. Let's see, they have, like, a switch here. Um, maybe total No, no toggle, no switch. So here they don't have it anyway. Ah, we can try to do it. That's thes. Maybe it's a little bit a small, but let's see how it goes So sweet. Actually, it's going off these on an oval in the Sobel. It's like there these we can make it like, multiple off eight. So the with could be, I don't know, 30 to 40. This is 44 is not so, but this could be 48 48. See how it goes? Not so bad. We can do something that this can be instead of one pixel, two pixels. So it's more not the civil that it is because he will leave only one pixel between this and that, it's going to be really, really small. So let's see how others position the off is on the left, the office on the left, on the right, it's blue. So let's just come back toward design system and yeah, make a component off this and this is going to be called Where are you? This you are going to be, uh, don't go. I want to call it Tokyo or Sweet. Let's go tackle And this is going to be, Ah, default. And we are going to make a copy of this angry and going to the touch it. We are going to bring this here, put it on blue. There are many ways of doing this. Some others what they usually do, it's yes, pain kind off this on blue. Check this out and this is like white. Why is that? Because you really see more. They theis element, right? You see more the difference between both of them. If I only change the color. Maybe people with some disabilities and some cooler problems can. Can a streible knowing the difference between this and that? I mean, based on based on the call or write. That's why some people in sandy science systems you will see that in some off them they pulled something like this. They just do this kind off little check. So you are seeing that the tip box is, well that this total but on the sweets is activated. But it depends. This is super accessible. But yes, for the sake off our design, our minimalist design system, we are going to live to leave it like that. And we're to create this and this is going to be total. Ah, active or all right, so this is going to be like this and what we want to do, it's ah, exactly the same thing with it before we're going to create Eastern sets off this and we are going to put a text. Yeah, this is tricky because sometimes ah, you know, you put this schwitz is on the right And the text here. So it's not that Do you use it this way? But since we have created all these elements with this, we are going toe make it like that and it's fine for now. OK, so this is going to be 16 big sellers. This is good to go. Let's check that this on the middle. It is. So we're going to create a component in this case is going to be called total plus text default. Okay. And this is going to be I'm just going to direct this text again and great component, and this is going to be active. All right, so we're good and and now we're going to create our tax. All right, so we're going to create our tax. We see how the morphology or Fotakis. Let's see if these people have tax no tax, neither uses Did 1/2 anything. Well, we have seen that taxes it basically, as we said before, every tangle, a text on something to remove it. But there is something interesting here. As you can see, they don't make persons of it attack this attack, and it's good Ray storming does the same thing So we are going to do our owner stuff. It's useful. So we are going to paint Astor Rectangle here. We bring out Lay lay out again. So we just press control control G in Mark or you just go here to view and you go toe to So layout creates so you can just so it like that. And we are going to paint. Um, yeah, something like this. It's important to know that tax sometimes are inside inputs. There are kind off import tax. Maybe we'll do the components later. It's a kind of a tricky component, but maybe we do it later. And so it has to fit. Tax had to fit here. All right, so we are going to do it. Make it from 2 24 We are going to put here for us. You can see when you were working with the smaller shapes. As we said before, you can see this seems like it's more rounded than these. Can you see it? So that's why sometimes we need yes to put it like that, and this seems promote much more natural. You know, you can feel it that it's more. It's more not roll there. Let's swimming. Yeah, we go there. It's maybe three could be good, But if we put four, if you see is too much. So let's go with three. Because three is the in this case, the magic number. Well, I like this song, Mort. Yeah, we're going to go. So So, William, off this and we have I'm going to remove the layout. It's kind of annoying. So we're going to put here like our neutral colors or maybe our neutral start to mutual. Maybe we need something like this toe pump this a little bit. So I'm going to copy this placeholder is going to be huge compared to our attack, and it's we need something smaller. 13. It's coming up to save us and what we can do here. It's poured out prime medical or with disparate cool are super beautiful color. And I want to sell you something we didn't do before. Um, if we create here on a toy out, well, it does spot. Imagine we have, like, another element. I'm going to do it now. You might think we might in this circle here, going to make it a little bit smaller and this is going to be later on our symbol for closing. Removing this, I think Imagine we want to make this like we did with our bottles on outlying out and we select their all the elements and quickly here on out, early out. Let's see what's happened. Jesus Christ is doing it well. But before what it used to dough. I'm amazed by this program. It's improving so much before. What it does is this thing's background was on the left the placeholder text waas outside the box here and this thes bottom wasn't the right or the text was making were things But now it's improving a lot. I'm amazed. So we see we are still on the 14 side off our element. And here what we are going to do, It's come here and look for a crows across cross Gross. Where are you close gross or something? I cannot see it. Maybe the recent something like that that there is this thing, but I want, like, just we have to do it. Well, I can copy these. Yeah, I think I can. So I'm just I'm going to go pedis and bring it here. Jesus. So I'm going to bring this down toe 12th. And these US I'm going just to break that to the touch this stuff because I'm not interested in off this circle on everything. I just want this sign here to be one big sell. And this big thing here to be won't think so, too. And I want to select boat off them and make them bigger. Yes, something like that. That's good. Okay, so something this is better for me. I think we are going to apply there. I don't know some of this neutral. This is too far away. It's too much on. This is to be se eight weeks. Olson seems like like a whale or something. It's too weak for me. So I'm going just to pump this down. Designed to the middle. It's good. Something like this. And I'm going to see how this Yeah, they are 27 going to increase to eight. So this tax looks good to me at 100%. And if we have, like, mining, we have this and we are putting our input our tax here since pretty good to me. We are inviting. We have some off them eight. Yeah, it's pretty good. So we have far attack and what we are going to do. It's, um, group. What? I just did remove it, removed it. So I'm going to create this, and this is going to be the attack. Ah, default. I have haven't done something, and it's like this plus bottom to make it. Um, Yeah. Later on, if we create a copy of this, we can just deliberate. So we are good to go. Um, yeah, that's feel good. Well, doesn't really feel good, because this come kind off active. And maybe I just want, like it something like that. I think this is better. So I'm just going to leave it this way. And what about something darker? Yeah. This school. I like this. Yeah, I think we're gonna leave it like this, So yeah, we have our talk default, and yeah, I don't think we can do three minutes about it. Do you remember? If you don't want this to just delete it and you have it so we don't need to create another Ah, different tack for this. We can go with death. So see you Minutes. Lesson
15. Dropdowns: Hey, welcome back to this new episode. In this case, we're going to make the drop down for these. Select. Remember that we did these. Let me just remove this. Remember that it is this complete, um, component. So in case we don't need some pieces on some parts of it, we can just remove them. Um, so I want to I want to replicate these drop downs here. Well, kind off, because this is kind off attached to the tow these field, But we are going to make it, like, separate that meets C. Yeah, kind off this. Okay, so we are going toe to replicate on some off some kind off, pop over or drop down like this. Okay. Instead, off this. So we are going to our decency stem again, And we are going to copy this with, you know, remember, with the all key, or you can guess copy and paste it, and you are good to go. And we are going just to make it bigger. Yes, for for the moment. Um, actually, I don't want the default. I won't like the focused now. Default is fine. So let's imagine we have some options here I'm going to copy this text off their placeholder copy and paste it. And then then just drag it here. Okay, Imagine we want, like, a bunch off. Ah, off elements in the menu. We're going to position these on their left on the top, and then we are going to use out. Try out here and we are going to separated by 16 or 24. Maybe it's better. I'm going to just do it my hand so that seek out how it goes. This would be like 16. Holder is kind off down. So for this particular case, we can do something that you'd sat effect. If it's ah, is there is the part where you can enter I have to eat. That's this. No, If it's is the part where where you can insert like inner Sadow, so drop shadows or insert Sembler horrible and Bagram blur for the wedding. These ropes matter. What you do is you just click on the sun. I can't and then you apply just the blue you you want or need, or in these cases, like 25 what I usually like to do. It's to go with my local Klores the color side. Choose before speak. Sam Blue. Well, this is too rough, obviously. But what we can do it. Decrease the opacity sometimes is good as well to choose like, um, like no so hard Black appear black. Yes, you can Just to some color off your neutrals. And you drop down these 2 10 or 2 20 something like this in this case and going just to remove these neutral. I don't want board there anymore. What? I want this, uh let me group this. What? I want this When I press, they dropped them button These kind off? Um, yeah, they're up down up years, right? But I don't want it. We've border or something. I want us to stand out. So this is how we're gonna make it? I am. There are some tricks for this. I did this for the tryout, and this is cool, but, um, because you can have more elements. But but as you can see, these doesn't resize. Okay, so for these work, what we are going to do, Um yeah, and the reasonable thing. Sometimes when you are ah Indian working with this element, what happens is imagine you are harboring some of the elements. It has this kind off. Um, like, let's say something like this, like, you are really harboring you. You you know what I mean? So when you Khobar did these background would be on the element I'm hovering. So instead of making this and work us as we expect and to be like, as most reusable or responsive without having to leave that it what I said, yes. This you create a component off this. So we're going to create here, Like, in this case, I'm going to name it. Probably later on, I will rename it again. But just now I will just do, like, drop down text and yeah, drop down text. Ah, and I'm going to put like, uh, how is going how I'm going to call these. Like Khobar? Yeah. And I'm going to duplicate this and instead, off this and going toe put it like white. Yeah. And what is that? I like to do this because that way I can interchange them, so I'm going to ah, sayings make another component. This from this, and I'm going to call it like default. Maybe doesn't make any sense. But now we have these two components and we are going to Yes, remove these ones. You will see why we're doing this. So we're going just to put this here. Okay, so they are going to be separated by these part. So they are going to be touching each other, and And what I want is these rapper to be, like, increasing If if I duplicate this placeholder element probably. Well, this default if I duplicated I want this to to make it that it makes it be your Okay, So? So for that, I'm going to make an outlying out from this. Okay? I know what's going on. These are my masters. And you cannot do this with mustard. You have to do it with instances off the muster. So now I can do it. And so I said it. Here. Out. Try out. And this is going to be, like, fully responsive. So we are going toe. Give eight pixels here, Up on down. I'm going just to remove these from here. And what happens now If I duplicate this like these element and put it here as you can see it, this this is ah, responsive. You see, Well, I selected what it wasn't. Now it's imagine I don't want this Has Khobar. I just continue it. Or if I This won't like over, I just do it. So we have. Now we have our musters here components for the placeholder text. And now we have this. They're sometimes that maybe you have another kind off elements here. Let's imagine you have these, um, you go have these with icons to Sometimes you need Tom Michaels for heavy or because you can reuse this component for a drop down. In this case, I want to bring the um yeah, this this down I want us to make. Yeah, so you get the point, right that you can you can interchange elements. So this prequel imagine we won't like to put insert like, um, some elements here, like some icons. So what I do, it's just bring, like, a trash or something. Here. Where is a dress? Here is a fresh. So I'm going toe. Make an instance off this. Bring it here. I'm going to change the coal or and I'm going to say, without red without primary riff. Well, actually, going just to yes, like a sex selection here and let's see where we are and how these is. I'm going to the touch this. I'm going toe insert here, my icon. Let's see how it is was constructed. So I'm going just to on group thesis again, like an instance. I want to be touched the assistance. And then I want to insert these here again. We could make the as one symbol with an icon, then deleted here. In the instances pot we are going to make, like, a couple off elements, so it's easier later on to change it. So in this case, and going to change the color is just like for a delete option and what I'm going to do, it's ah to these two elements. I have a guest on group these again with these and these and going to create an out troy out thing and and with these I'm going to create another out layout. Okay, so and now these. We are going to make it like a like a component, and this is going to be called drop down tests. Hobart is going to be, but dont is critical. So now if you are here reminding you have like a last. You can just change into critical. Or we can just duplicate thes and just, like, detached the cisterns and then takes these color my team later on You want, I don't know, like a gray or something. And then san text like this for your actions. My name Thesis. No, this is not a relief that I, like, tries in another thing. Let's say like, I don't know, like an ebit seething more. Let's go for net it. Yeah, this one. And then we change the coal ore. We tended to this one something like this you might in. Do you have, like, an every bottle here, Right? Then we can create another, um, into we can call it icon. So now what we could do is just come here and go here. Well, I prefer to do it just on there seems our items. So we come here and we have that icon and then we come here and we have a and another cool thing. It's if we want to change like the background color. What we can do is come here and make these ones like Khobar so you don't really need to create another one sometimes is easier, but you can just override it here on the item. Okay, so that would make us like another kind off component. Eso We have our drop down made inviting week. We want to come back to toe the place we came with this with the default just results. We have it here, so I find it pretty pretty easy to do in pre cool. So this is how dropped down and see you on that is less on.
16. Renaming and plugins: Hey, welcome back to these new session. And now what? I wanted to show you some interesting things about Ah, fake mark plug ins. You know, you can amplify the the possibilities off Sigma with black jeans if you're here and you go to plugging. So you go to these menu and then go here to plug ins and go toe man, it's plug ins. You can see some feet. Er, blagging some here. The most popular plug ins here. The ones I have already is told. And I wanted to talk about one particular plugging, which is called Rename It. Ah, look, Yeah, these one, uh why? I wanted to show you these one. Because if we come here, if we are in layers, we can't hear toe assets and we see our local components. You can see here that we have, like, buttons, button, then icons, feather icon, that this is not bad. But maybe we don't need this just buttons and then icons. And then we ah, we want, like, these don't have, like, buttons battling. You know, we want to get rid off these first ah parts off here so we don't need it anymore. So what? We're going to do it. Select all our bottoms. Let's see, here in our layers You can see here that they have like these bottom thing here Name that we put it before. But since ah, we have these components inside a frame that has this name. What fake matter As we speak the arbor name as the main folder as thes 1st 1 And then if we put button again on the name off our I said, it's going to be, like kind of redundant. So you could Montali be changing here like the late in this bottle? Ah, here. But we don't go on that because it's too tedious and it's time consuming. So there are plug ins for that, and this one is called Rename it. So we're going to go here and we are going to Ah, fine. Replace selected lay years, okay. And when we want to find it's the text button and replace it with nothing What we want it that it finds the change off text and replace it with just, ah, an empty estate. So now you're going to see all these battle and stuff. Text here is going to disappear and now we have it. So if we come back here to assets and we go to buttons, you can see now it only stays buttons. But it doesn't say that Buttons is last. Bottoms again with this kind off rebounder, and we're going to do the same with the icons. As you can see, I conscious last for their icons. I don't want that. I just want my eye comes to be just icons. So we come back here again toe icons. And as you can see, we have toe get read. We want to get rid of these further, um, icon. So we come back again to the plug ins, rename it fund, replaced selected layers and then we are going to put Feather Icahn. I think the recent in space and between the slash Yeah, and you can previewed here how these icons are going to be named so we can rename it if some if, ah, maybe imagine you want to name these these icons like icons. You can just as you know, put some things here for replace this with this and you're good to go. You can see a preview with how How well good end up, but in this case, I just want to get rid of this further icon, spacious left thing. So just perfect Name takes a while a little bit, but now we have our icons, like, in the first part. So now we have This is better. Much better, as you can see. Okay. And the input We created them. All right. So we don't need to do this, because in the names we did put here, we can see here in layers. It's There is no input before, so it's just Ah, checkbooks. Okay, so this is, uh, something interesting. I'm going to I'm going to show you another useful black things here, for instance. Imagine we draw a rectangle, Um, and we want to insert the photo. You don't need to Don't load it. And, you know, it's kind of tedious. So you can search here for four hours, he muddying, we want a horse, and then you Yes, press on the horse you want, and it's inserted here. So this Blufgan honest plus playinus pretty well is pretty cool. And another black inside use a lot. Is you quantify? He quantify what it does. Is it might induce sometimes need toe put your I don't know, social media icons or something. Yes, go here for Facebook. And then you have the bloody and this icon in the plug in. And then you just person port icon or yes, double click it. And well, sometimes I will click. It doesn't work to it. Well, I think it did it. What should have? Yeah. And now you have here your icon and you can guest, uh, making bigger or whatever you need. So I 25 remember this blackness pretty cool. And it costs. Let me just remove this. And it has a lot off set off icons. Imagine you want material design icons. You can press here and you are going toe. I don't want to get rid of this again. And you have all the icons here. So it's pretty cool when you are descending an interface of something. And do you just need a particular icon or a narrow or something? But you don't need all set off icons. You can just important here, like I wrote. And then you can search for the icon unique. It's pretty cool it half like Modi's as well so if you don't want to Ah, put it this way. Like in certain here. And you want it like make like a vector. So afterwards you can you want toe Ah, exported like spg You can guess Goto ahmadi one here and let's get rid of the arrow. And then you have the, uh And what? The guns here. Right. So I found this black in really useful. Let's see what else we have here. Um, if you are really in tow in tow, contrast access accessibility issues. And you want to know if text render schooled and, um, people with some view disabilities can make it. You can guess. Run this plug in. Okay, So these worst with this, I use some of them So you can see here some Ah, disability. Easter's in the battles. Yeah, it's ah. As you can see is mainly in the in the disabled buttons. OK, but disabled buttons they don't have to be. So So you know ASUs evil because of the very any of you put too much contrast on them. It doesn't seem disabled. It seems like active or something like that. Okay, But the rest of the battles are are. Okay, so I just wanted toe, um, let you know about blacking is you can investigate. There are many of them to put real content into your designs. Um, a lot off. A lot of stuff you can do with the plug ins, even charts and graphics and put avatars off people. So, yeah, have a look here and in tow into manage. Blogging is part, and you can see there are plenty of them. And, yeah, super super interesting plug ins on the good thing off. Most of the Blufgan says you can have it, or you cannot have it have them. But the tool works is exactly the same. So, yeah, have a look here. Look at this kind off installs thing, so you can see Ah, them the most install plug ins, which is usefully them the most useful ones. So have a look at them. And I have you. You enjoy to use them. Okay. See you on their nest session.
17. The end. Congratulations!: Heiko vaccinations a humanity here. And I hope you under the glass and the course and you have land. Borders, sit. And why to you said the science system. I encourage you to put it into practice and do your own decent system. It's this year to make it than explain it sometimes because I think you can make it mean short time. So let's try it and do it. So see you on the next course. So are the next session. All right, see you there.
Bruno Sáez López, UX/UI Designer and Front-end developer
