Figma Bootcamp 1 - Learn Components Quickly

1. !intro bootcamp: Hey, everyone on Brian White. You I knew X Designer out of Lawrence, Kansas. I also do brand design and a few other things in this class. We quickly learn to create components like symbols in Sigma components, are you? Why? Elements that can be reused across your designs? They help you create and manage consistent design across projects. They stretch for a responsive design, helped build layouts and can be edited on the fly. This class walks through building a base component system in a step by step process. This stigma beginner class will give you the tools toe. Want your user interface career. Remember figments free to download. So grab a copy, jump in and let's get started. 2. Menu Components and setup.: I will show you quickly how to set up some components and be able to stretch them without making them look horrible. So we're going to go to menu here, go to preferences, nudge amount. Make sure it's a eight to nice. Divisible number can be a 10 but it's fine. Good a frame, and then make sure you're in design. We're gonna check desktop 14 40 and gonna rename this home page. Okay, We're gonna do rectangle and set up a little menu bar system. And let's just just make it easy. Well, for using eighths Hello. Do 88. All right. And we're going to make a logo joking. Okay, So what we want to do is check our layout grids. We don't have one. We're going to do is add one and quick on columns and what's do 12. And I like to get this down to 3%. That just nice. Like pink doesn't mess you up. And then, since where it eights, let's do 24 picks will get her. All right, now we're there. When you quick on the name of the page, you can hold down command and stretch it. So it's kind of Nice to get ready for adding some components. So let's do the menu system. So I'm gonna use acumen. Pro. Let's say 18 pixels and will we lost it? Okay, let's see. Menu item one. Okay, now we don't want to just type out menu menu menu menu menu. What we want to do is make this a component, so let's make it a little bit more normal. So let's say portfolio or we can just keep it Menu item one, and we'll show you what's up. Okay, so this is your component that it's not a component yet that you wanted component because you want to make thes and you want to have them all the same and be able to stretch and grow with your sections. So what we're going to do is set up a system where you have your menu area. So what we're going to do is make a simple rectangle and put this in the middle. So we're going toe do it 32 pixels high, just making all this up as I go. So and we want this to be centered right here a line middle. Okay. It's a little high, cause I've got this stretched a little bit. All right, So if if you're in this section and let's say you want, like, a highlight far or something, let's go ahead and add it so well at a bar. Let's say four. Okay, so we've already run into colors. We want to get some colors in here, since we're not wire framing where we're doing components. But we're gonna make it look a little lively. I'm gonna jump over a photo shop just for a second. This is one of my projects products. It's, uh, a photo shop action called Instant Pallet Maker. And what I like to do is grab really cool images that have cool colors and try and pull you I colors from it. So when you just click this it it automatically makes it palette. It doesn't ruin your image. It pops it onto another layer. If you ever want to get it, it's pretty cheap. It's a creative market, instant pallet maker. So what I'm gonna do is go to this shot. I thought it was kind of fun gonna change the levels. And don't worry, we're jumping back to pick my really quick highlight. This a little bit. Get some nice pinks in there. Okay, so we're gonna try palette medium and click it. It's too washed out. So what I'm gonna do has come back. Click palette, large. Try and get some of those fun action colors. I'm gonna even punch this a little bit. Some flatten this. Don't worry. We're going back to figments a lot. Okay. All right. So we're gonna copy this, So we got to nice you I colors in there. All right, we're back here. We're gonna throw down this color thing and pull ins and nice quick color scheme for you guys. So you want to look for your interactive color? And I was originally looking for pink. So we're green to go for that kind of salmon color and see if we can do It's not bright enough. All right? Maybe even some of that pink no boosted. Just a little bit. All right. And then we want some Cool. These greys, these air. Nice warren graze. So let's do that. This one and this form. And usually I would go fill. You know what? Sorry. Go fill color style. And then, like, name it gray. Cool. you know, or warm or whatever. Warm one and create that style. I'm just moving a little bit faster for you. I just want you to not get bored, and we're dealing with components right now, so all right. See? Lighten it up a little bit dark in this up a little bit. And let's get another couple colors. I just love how these you can pull so many cool colors really quickly. And it feels like it belongs together most of the time. Maybe a peach. All right, we might come back to that, but we'll see, was going to stay away from the olives and kind of stay in this palette. Some of these are kind of fun to We'll see if we can throw something in. All right. Yeah, that's looking kind of cool. Um, we're just gonna keep this close and handy. So I'm going to change this Teoh this background from now. Still, that may be all rights. We have our menu. We want toe, um, high. Like this. Say, like, hey, this is on. So what we're going to do is is pick that salmon color, and sometimes I like to like once I get a header setting, Um, fear. If you're working for someone, totally name all of your layers. But, um, what we're going to do is is make this a component now so that we can make our menu and then changes. So this is our active steed, and we'll just keep plugging away at this. So obviously, with this background, I think I'm already not liking it. I just wanted get a little bit darker. Yeah, All right. So the menu won't need to be white, but all this can change on the fly. Okay, So what we want to do is get our many are the background, which we probably won't even use, but get it to the height of your bar for now. You know, I'm gonna walk that. Okay, here's your menu item. So we're gonna hit option command K, and that automatically made it a component. And what I like to do is either this is the base page and all the components are on this. Or, um, you can you can hit command D, which makes it a duplicate. And then you can take your component and move it to another page like you can you can make a page. This is components, but for expediency purposes, we're gonna keep it here on this page so I can show you how it works. So what I like to do is pull your This is your master component. See how it looks with these four squares, the diamond shape, and then this is the open diamond shape, which is this is your component. Um, copy. So whatever we do here, like, say we and we change that to Blue, which looks awful. Sorry. Um, well, what happens is all the instances change. So we're going to make this flight and what we're going to do is hide this background. We don't need it, but we can. We can do all sorts of cool stuff with it now that we have that background, something hided. So what? What happens is it doesn't work very well right away. So it's just kind of breaking. There's no padding. The stretching doesn't work. So what we want to do is that this is the big big deal on components. Is is how do these sections work? So what? We don't want this scale. We want to go left and right So it's going to center the taxed here and then as you type, it will center in this in this frame so it will keep the same width. So we want to do the same thing for this background piece which will show for right now it's kind of fun how you how you can see how it's working. So what we usually want to do is test it out on these the component copy. So this back piece here background we wanted to scale left and right, we don't want Oh, we're not gonna drag it huge. But if you wanted to, you can set a top bottom A swell. If this changes, say, for instance, on a responsive page, the header needs to be a little bit bigger because the content being shrunk. So what we're going to do is make this look better and name this active state. Okay, so now we have our menu item and we can duplicate it now and then we'll go back to our component. This is pretty cool. They hide it and then, um see, let's see, this is about us and I'm a bad type or sometimes so I like to come back in here and change my text. And I want all of these to be upper case so quick. That and boom, all of your components are uppercase, so I'm gonna make another one says portfolio and space that out. Not everyone wants home. They're still. And I'm like, Come on, please. Okay. Another page. That's longer. Whoops. Sorry. So this is a good example of when you set your text into the middle and you have your your paragraph spacing in your line height set. Correct that. This might be a little bit too high right now. So what we can do is go into are Where is it? They've added so much. Now it's right here. I was looking for their own. Sorry, I'm supposed to be teaching you. So watch. This is I tap it. You can see the another page is is since we're messing with this part, but it's you can see how it's working here, So I'm going to say 96 books, not 96 96% but okay, 20. All right. So you can see now I'm just gonna say home just because Okay, So this is our active page. So what we can do is go into our component and you can see we've hidden the active state hit in the background so we can click on the active state and we can actually click on the background That looks like poo. So what we're going to do is come back to this original one this background and show it and we can change it Teoh White on, like, p percent so But we don't want it to show on everything. And this shows that what's kind of nice is you can see your spacings awful bit. But what we want to do is hide it. But it's staying active because on the home. But we have it, um, with the eye open so you can see it. So, yeah, that's a nice way to do some quick menus. So let's keep moving and work on setting up components for forms which come into play and get kind of annoying 3. Form Components and how to build master form components.: Okay, let's jump into forms. So we're going to use some of these greys I might need some more we can pull from. There may be some lighter ones, but just for expediency, we're gonna keep moving. So what we're going to do is do the same thing again. We want kind of boxes for these areas, so I want, like, kind of a larger form base, and I'm gonna just span these three comes and we're going to set this to 64. So that's our base. And then I want, like, a 32 pixel base appear for the form itself. The form name. Okay. And sometimes, if you want, you can just just these these could be any color you want, because we're not gonna use him. So wow, that's so bad. But least you get the idea. Um, so this will be our form, and this will be the name for the form. And we wanted to stretch without breaking the top part or the bottom, and it just makes it so much easier when you have a name, first name, last name, whatever. That's what we're going to do is make this a component and And the way that will do that is we'll have it into components. So I'm gonna type text and just say, um, star name. So this star will be, like, bright Red for the same and then the name which will use I like this navy. So we're gonna just make this Who can't Maybe. All right, so we're gonna select the name Click Phil boot camp, maybe. Okay, sorry. This looks awful, but you'll get the sense of it, So this will be our form itself. And what would like to do is is just so it looks a little interactive. We're gonna do a three pixel border on it are not border but rounded corners. So I'm gonna go ahead and make this section, um, its own component, and I'm gonna call it form slash tender, and I think I'm gonna keep all lower case this time. And so then will name this part. Just form field, Okay. And I'm gonna go ahead and style this so we'll do a stroke. Actually, this is kind of old style, so I'm just going to keep it this way, but, um same same applies. You want this size if you want to just the underlying, like android or some of the newer styles. I'll show you how to do that in a second. Um, let's see. It's like a separate event. Stroke this with one pixel and see if we can't used this for a little bit darker. All right, let's go to two so everyone can see. All right, so now we have two components. We have the form header in the form field. And what we want to do is inside this form field, we want to type are type and say, let's see, first name. And I don't want this to be all caps, so I'm gonna go back. So I'm in space it out. 32 pixels from the edge. And this will be, um, form text. All right, so this background obviously don't around so we can hide it. So we've got the start of our form. We've got name, which this is really big for this. We just pride do kind of small and heavy, smaller and heavy. Okay, so now we want to go in and into this background, and we want this Tiu stay left, but, um, it we wanted to stretch and we wanted to stay on the bottom because we wanted to be butted up against this form. So I'm gonna go in here and say left and right so it can stretch quite a bit. We'll do the same thing with the name, but we wanted to stay left. And the beauty thing of this is that you can duplicate this, and if it's failing at all, you can go back and say like, Oh, I didn't do it left or this is how I wanted to react. So I'm going to turn that off. And now what we do is now that we have foreign field and Header, we're going to make a component of both of these. Okay, So what happened was it made an instance of both of these at the same time, So it broke out form, header and form field. So this is our new component, which is master form or let's do form Master, lower case. Come on. All right, So what we're going to do is, since we already have this here, I'm gonna keep on my components up above the page. Sometimes it's nice having not left. Um, let's do yeah, just make these a little, make these a little smaller and keep him over here for now. And what we do is just keep these two left if we need to change the middle. Okay, so now that we have this we're going to do is actually Bruce Command De and we're going to make a copy of that. We're going to select the master and pull it out side of the page so it will be outside of the home page. So now see what's going on? So what happened? Is this name to be left and right? So what we do is go back to here and say, left and right. Sometimes what happens is I kind of did that on purpose. Is it? Will It will override it. It will just say like, Hey, if you didn't say anything, we're just going to make it be left. So this one, this one is left. This one is left and right. So what we need to do is say left. And now we have it stretching correctly. It's kind of fun. So let's say we have a sidebar here. We're gonna just have a separate period. Okay, so say we wanna space these out, so we're gonna have name first name. So we wanna have, um, first name here, and we're going to hold shift an option and duplicated. And obviously we don't need this. So there's two ways you can do it. You can just, like, hide this, which sometimes I do a lot, actually, or you can believe it and then come over here to form field and just hold option down, and it will make a copy of the up bigger foreign field. And this doesn't have the header. So you can come in here and say last name. Okay, so this looks totally bad to me. So you guys probably Wow, this guy's a designer, so I'm gonna make this really light and we'll do that. Oops. We'll do the pill lighter, and you can see what happened is in this master. It didn't go to the the field, so I have to go back. And that's why I like having these really quick to mess with. So you can see if you can change really quickly your form fields. So what? We're gonna do his change? Our stroke Just a little bit lighter. too. All right, So now that we've got a nice form setting, one thing you can do is your building These. So, for instance, let's say we must face this. So I noticed when I typed country, what was happening was this is set to center center line. So we have to come back here. Even though this is left and right, we do this and we've got our correct spacing for country. So what's nice is now country can span the entire thing without stretching and messy non leads up. But what we want as we build out the forms is an actual that's the same way. So what we'll do is go back to this click left and I'll fix it. The the ideas that you want to drop down to show a drop down So you come back to Farm field , which is nice, is like, you can always come back to this and let's just make a narrow going down. And obviously we don't want these on all of them. And let's do just a simple drunk and we'll do this interactive color there, right Since way like this color, we're gonna name it salmon. Okay, wait a boot. Camp salmon. Okay, So what's going on here? Why is that not over there? So we don't We only want this on the country. We don't want it on there. So what we do is come back to field and we say we want this to be hidden. But before we do that, we want this to stay on the right and we want it like that 32 pixel gap. So what we do is sent this to write and to center. So what happens is now, as this moves, it stays the same and will walk to the right. Okay, so now we go back to the original one, drop down a row, and we'll hide it. And then we're like, Well, it's gone on country. So all we have to do is go in there and click. Yes, I wanted to be there so you can see how it's super nice. And some of the original components have a lot of fields in them that you hide and do all sorts of stuff with So, for instance, name with not named, but phone number. So let's do a phone number version and what we want to use is the base form field, and then we're going to create I'm different version of it with a component inside of it. So we'll have a plus one drop down for America. So sometimes I'll do this and say, Hey, I want to detach this instance This is no longer the form field. So this is the first time that we're getting away from using that main instance so we can not do that or but you want to try and not do that as much as possible so that you utilize the the whole sections that you can change throughout the entire app or web. That one. You're changing these colors. It changes throughout the whole the holes site. So I'm gonna keep the form field. But what we're going to do is for going Teoh hide form text, and then we're going to add another piece in here, actually will just duplicated. So we're going to say command D and C phone text. And now we're gonna move this. Don't worry, it won't. It won't mess up everything else. So what we're going to do is say we want you're three digit area code and Then three members dash on four numbers, and we want to have, like, a plus one drop down. So we already have this drop down, hero. What we're going to do is take that. I'm just holding option basically and dragging it over from this one to this one. And I'm going toe. Don't don't freak out. And don't watch over there on the right. But what we want to do is have it dropped down over here, and I'm in a species it a little bit. After I do this, I'm gonna copy this rectangle are just hold option and safe phone drop. And inside of this, you want to kind of keep it together so you can even do an inside group. So we have this phone drop, and it's the inside part. So what we're going to do is like a 32 by 32. Okay, Looks 37 my 32. What does that have to enter? All right, so now we're going to space this and put the drop next to it, and then we're gonna take this phone text, duplicate that and say country, it's a plus one. Okay, so we've got her drop down and it might get a little bit bigger, but we're just doing this quickly. So we want this to be able to stretch, and we want it to really stay to the left to So I'm gonna lock it to the left and not go all the way across. You want this to be a line center because there might be adding more actually. Will do. Left a line left as it grows them will push the the arrow. So this section needs to be grouped together so that it will work together as well. So we're going to change this among toe left. I know this is just all for reform, but once you're done, you're done. It's nice. So we'll space this out onto three. So we've got our phone number here, and we're not going to have that Be that you need it. It's not. That's not necessary. So here's our phone, but this is all messed up now. So we go back to here and we hide those bring the form text back in the country, and we will say this is the phone section. So now we've got the phone section, which is hiding the the hiding, the phone area. But we want the phone area to be seen. So what we want to do is come in here and say I want to see the phone, okay? And we want to take away the other parts. Oops. There. So now we have this phone section, which it should probably look like this where all these are open. But then this is closed. So you do it really quickly. Boom. And you've got a phone and see if it's stretching. This isn't stretching correctly, so Well, it will, but, um, we'll get there so we'll go back to phone text. So I left. Yeah, that's right. Okay, so now just pretty simple. If we want an email, just drop it down. 123 And everyone needs email. So do email in meal. No, e mail. After, like, this form text is too similar. So what I'm gonna do is go back quickly and change it from boot camp to boot camp gray. All right, so it's just kind of fun. As you build out the components, you can see how you can quickly make them stretch, build it out, go quicker. We'll do a comment box next, so this one will stretch because you'll need a lot of paragraphs. We're gonna jump to a comment box. What we're gonna do is duplicate this section and on a comment box, usually just start fresh from the form master to make it a little bit easier. Let's go ahead and see if we can't do it all together. It will be a kind of a crazy form field, but we'll do it. So we're going to have a comment not necessary. And let's see what happens. So what we're going to do is pull this form, field this this whole master and see what happens. So it's not working very well at all. What we want to do is have these stack without changing, and we want this to be able handle paragraph and then we want that little drag open Borras . If you like to type a little bit more, I'm kind of playing devil's advocate on everything just so you can get a sense of what happens. So I'm gonna shift these forms down or the components down, and what we want to do is come back to the before and this section this form text, and now we want to say top. So what's gonna happen is boom. You get this already, and I'm going to go ahead and add a comment Deplores amid. Okay, so the here's here's an example, too, of why it's not wrapping. So what we want to do is go back to your form texts and say, left and right, and now we're going to set it to state within those parameters. So will be like 32 pixels. They're 32 pixels from the top, and we'll get there. So now we want the component section way. We want this to be fixed. So this this section we really want this comment areas floating. So how do you get it? Correct. So if anything's weird, like when you select everything and you're dragging it, it's not working correctly. You can go back to your form and let's check this so we've got it set left to right. But this is set to scale, So we really wanted top to bottom, so automatically locks it, and we're going to check this one to We haven't left and top. So what happens is it sticks to the top. And as we scroll this, it gets bigger and you have more room for your paragraph. So now we've actually gotten close to this. We're gonna get rid of drop down area, hero. We're going to go into the form field, do men quite a bit. And I want this D A d c. Whatever. Really simple. Uh, I'm gonna draw wine for edging and hold shift. I think I'm gonna closer, but are just doing it quick for you guys. Okay, so we have that that field field lines, a comment line. We're gonna hide that, come into here, and we want to see the comment lines. Okay, What happened? So now they're over there. So that's why it's a beauty out of beauty. It's just nice toe. Have them right here. These these components to just a mess with so gonna go back into the form field. Look at these comment lines. We have them group together, but let's go ahead and make them a component, which you can't because I'm on a duplicated area, so I need to come in here income to the comment line. Click here. Oh, it has to be outside. Um, that's right. So what we're gonna do is actually just set this to right and bottom, so it will always stay right there. It needs to be a little bit stronger, so I'm gonna make it this one. No, this one. Yeah. All right. So now we have our component that's working its stain right and bottom, and And you can make your component jump out as much as our go down as far as you want. So it's It's really nice and simple now that we have, like, a form field that's really strong has a lot of content in it that you can hide most of it, and this you need it. 4. Buttons - master responsive button components and secondary buttons and more: right now that we've got our nice forms and we've got our active state we're going to do is just quickly makes him header sections. Section one, I say to you 36. Okay, - So what we can do is new tax style each to we can make this a component option up. Okay, well, say each to with mine, we'll make the line long. This is so overdone, but just doing it for fun. So we're going to do left and bottom on that and we're gonna take We're going to duplicate this control, de, I'm gonna take this master component are component, and then this is a component duplicate over here. So what we want is this text to say it's the left and bottom so that it stays next to the line, give it a little bit of breathing room, a lot more breathing room if we're gonna so coming back to here. I was trying to make it a little bit nicer for you guys, but say this is our section length that we have so 8 32 So what we want to do is come back into here and this text say 8 32 I know rap. All right, so we'll make a new section, we'll call these buttons, okay? And since I had that spacing out I want to do is jet these to match the color. Okay, Just gonna go a little bit faster and turn these off to make a little bit easier. Frieda's So we need a button. Don't say we'll call this primary button and we're gonna make this really small because this is just naming it. We're just naming it. So we want just a standard button and we want not safe. Let's let's go Big 64 by, like, 200 just for quick quickness. So we're gonna fill it with our salmon, and we're going to put some text in here to say, like submit, make this white. This will be 18 pixels. Let's go 16 and 16. Here we're going Teoh center, align the text and we're going to space this with 32 pixels on the edge and and then a little bit on the top and bottom. We'll figure it out in a second, but this will be our primary button, and you can select this and align it as long as the text is centered. Sometimes the line height changes a little bit, depending on the text for the font build. So we've got that primary button I brought in my I think I called a pointer, which is a ping file that I just bring in, so to quickly show what's going on. So what we want to do is then way have, um this is just our primary button, and we'll do a secondary, but But we'll duplicate this in a second. So what we want to do is make this a component, guess another component and say button And we wanted to be primary. I'll show you why in a second. So we duplicate this controlled the take the master component out here. We're just gonna leave it on the left. And what we want to do is come in here and see back, uh, background. And I think it's easier to make an active state as long as you're not changing all this stuff like crazy. But we wanted to be left and right, left and right, and then center. So both these center So I'm gonna hide this, and this is our active state. So we're going to do that pink for fun. And, um So now what we do is hide the active and we have our background. So I'm going to select their duplicated button and hold option and shift And let's let's put it 40 pixels apart and we'll say hover tap, I'll say focus. Okay, so we can do it like a subtle hover. Um, what we can do is just called this hover instead. And what we're going to do is say that it's pink Onley on the bottom. So what's nice is you can come in here and hopes, huh? Do you see what I did? Explicit Name it, however there. And we're gonna show the background, and we're gonna take this hover down and do just a simple three pixel highlight at the bottom. That's way to settle. So you can take your background down and say back cover, hide this for a second and you can pass through this. So, like, say it's 90%. Okay, so now what we can do, it's still not Yeah, I'm gonna do something a little different. Okay? We just have to be patient with me. I'm gonna do is so we've got our hover bar and we'll we'll do it like that at the bottom and to make it even better, What we can do is select both of these, group it on, say, however, what we're going to do is add, in fact, just a simple drop shadow. Um, way too much so well due to and two and 10%. Way too little. Okay, there. 20%. Sometimes I like to use the colors that have got that I'm using already in here. So I like to go to a local colors and use that gray, but then bring it back down to I like 40 because it's so like, OK, cool. All right, so now we don't want this. So what we do is come back to our button primary and hide the hover wealth. Actually, we're gonna keep the hover and then hide all of that. And so now on Hever weeks like that, we want that, but not that. So now we have the submit button, have her focus, and we can even do a click. So what we'll do is come back here, duplicate our background and say click. And what we'll do is make it the same red, but have an inner the fact. So in her shadow and again, local colors go with the navy and drop it down to, like, 15% and to to Okay, so now we have on click, and we can hide that duplicate the submit 40 pixels, See active click, and we'll show click and high background. So this is your focus and hover, and then click Just gives it a little subtle drop shadow. It might be too subtle, actually. So we're just gonna go back to click in her shadow and thump that up to 20%. All right, so now what we want to do is say, um, we needed disabled. So we have the button primary. We come back over here, I think you get the idea. We Oh, yeah. You know, we want to do that. Okay, so now we dip, lick it the background, and you can just hold option to and drag it. Um, we will do this to save disabled. Hi. This and we're going to disable the button. Okay? And that's pretty simple. I think that's all we want and we'll be able to change the text color how we want. But to remember, I think it's important to duplicate your text and have that as a color. It's really helpful because if you forget, then you get all these different greys and there, all right, so we have disabled and submit, and so you can see that all of these need to go left and right, and you'll see that in a second. But what we want to do is change this color, too. We don't want that. Yeah, and this needs to be a little bit lighter. We'll go, OK, so now we'll hide disabled and show, submit and show background. So then we come back here to background hide and show, disable and then hide submit. And there we are, all right, pretty easy. But the idea is that what you want to do is set these up so that you can change it throughout your composition and make it super easy. So as you're building, you have another button and you say, Sign in and you can make smaller and it it's spaces correctly and works really well been and do some secondary buttons. So what we're going to do is go to the primary button that we have and we will duplicate the master. So if you're ever are like, where is this thing? You know, if you're building a ton and ton of components and you're like me sometimes you've gotten unorganized component area. Uh, you can right click on it and say, Go to master component will jump right there. So right now we've got it on the left side, which is nice. And so what we're going to do is just use option drag duplicate, and I snap to the grid while while you guys were gone. So, uh, anyway, I will right click detach instance. So now we have this button and we're going to make it, um, secondary. We're gonna name it secondary. And, uh, we'll just name this secondary. And again if you want your text to be all all caps, let's see right here, all caps so and make sure it's in the center. So what we're going to do with this one is take we're going to have white as the background and a stroke of boot camp semen to, and then we're gonna change our submit or secondary color to the red. All right. So now that we've got this, what we can do is is duplicated and do the hover and focus. Just like the other one is just kind of fun. Sometimes to be like, Well, what will this look like? And you can quickly flush it out. So I'm just gonna do this really quick. You will group this together, say, background. I'm gonna duplicate this and say Hover. Whoops. Sorry. Going too fast. All right. So this is what the Hever will look like. We'll do. Is we'll just make drop this to this? Um, like gray on the focus. We'll do pink as the edging looks a little too bright. So you need to lighten it up. I'll make this a new gray. So four. Oops. All right, so now that we've got our cover, we're going to add a effect to this same effect. And if you if you want Oh, you know, keep the effects similar. You can come in here and and we like this drop shadow. We just see effects style. Who can't button drop. Okay, so now we jump back here to our have her focus that ground effects, but can't button drop So it's got that nice with the some of that navy in there. Just like to have some of those colors pop through. This is a little different color scheme, but I'm having fun, so let's go with it. Uh, okay, so we're gonna duplicate, however, take that off, and now we've got active click. So what we're gonna do is go back to here and look at what's in the hover. Well, actually, we can just do it here, too, so you can see the inner shadow so we'll make food. Cap can't in her shadow. Okay. All right. So I go back to here, and one thing I do is like, Hey, if this is really close, we'll just can't duplicate this. Stay active and show it. And then to the background, it affects boot camp in her shadow. I don't know if that works, but we're gonna go with front to click the The thing that's nice about components is if you feel like it's not working, you can go back and flush it out. And it will change throughout this site. Even if you've got, you know, multiple pieces that are really long like a the end of, Ah, submit that you want a really big called action, whatever All these change and we've set it up so that stretch correctly. So, um, so now we've got active, and we're going to do, um, disabled. Okay, so we'll just do this one with that gray and this same gray do you might need to be lighter seeking are darker, so you can see it. Yeah, that's fine. So, um, disable. All right, so now we turn on our secondary button, and before we do that, we gotta make sure and hit. Hey, this is master Symbol Copy. Duplicate on. We're gonna take our master symbol over here, and then we will make sure that yeah, this is our secondary duplicate. Go into this one. Turn off background. Turn on hover duplicate. Turn off over. Turn on active. And same thing with disabled helps do that. I'm the wrong one. All right. Yeah. On the click needs some work. It's just not enough change on there. So what's going here? We'll go back to our master to make sure that we're covering it correctly, and we're gonna do it too pink. You will do the we'll do the active as pink. Uh, you can't pink. Okay, so now yeah, that looks a little bit better, and it works. 5. Client Changes - quickly shift design by editing master components.: Let's play Devil's Advocate again and say, Like at this point, the client was like This looks like 2015. We needed to be newer, and we want the form fields that just have a stroke at the bottom bottom border. So what you can do is come into here back into your original one. And instead of having this rectangle, what we're going to do is just add what we'll do is duplicate it. So we've got the same size and take off the rounded corners over here, Gonna show it I'm gonna take off the stroke and now we have to fill but way don't want it. 64 pixels. Let's do two pixels And what we're going to do is drop it. And what I like to do is is have that base rectangle back there so that I know where where my edging is to stop for the sizing. So now we're gonna hide that. So now we've got a nice, um, nice frame are form fields that are a little bit cleaner, and your comment box is not working correctly, and it's because we added this, um, the rectangle that is set to scale So we really wanted toe bottom and then it automatically makes that two pixels so you can quickly see that. I hope you can see it. It's a little bit light. So what's nice, too, is if if you're coming in and saying Hey, I want to show that this one's highlighted You can come into this form field specifically and say, Hey, this is this is actionable, you know, and probably do break this and do this pink for fun. So this is on on Hever or or focus, and then you can say you're actually typing and in right now, so that's that's another way to do it really quickly. 6. Floating Menu - We change the original menu and build a floating menu.: All right, welcome back. We're going to jump back into the top area and look at some ways that you can change components per page just really quickly with images and tax. So what we're gonna do is get rid of this part and floated nice skateboarding picture behind this and make it the menu float on the background of the picture so each page will have a different picture setting. So we'll just put ah, menu system here that I just made already. And what we want to do is make sure that we've got a little bit of dark at the top so that the menu always show it's we're gonna just break this and we're going to do a Grady Int Phil linear. And then this fades out to zero. We'll see how it works, but we might not need that much will just drop it back in a second. So basically make rectangle and drop it behind its option command left bracket, and then we're going to fill it with an image. So we've got just some skateboarding images. Let's see, this one's kind of cool. That may be Yeah, let's let's go with this one It's a little bit too low. So what we can do is cross well before that, I want to make sure I've got the A nice A nice height. So let's do for 92. Okay, now we're going to crop ID. Bring that down. All right, so this looks a little weird. Now, what we want to do is click this and go back to master component, Go to the master one, which is right there to the left. So when when we have this, they're just looks a little bit too fat now. And we don't need that background. So if we're shifting, we want to make sure that we're doing it all together. And usually when I get this laid out together as the menu system, I'll save this as a component as well. So what's kind of nice is once we we go into the this main section that this action or the active state on the on the button, we want to make sure that you've got your left and right, so it will stretch with it as well. Let me go back as the active state part. You want it to be on the bottom. So if it's not on the bottom and it's set to scale, what happens is if you shrink it, the line shrinks and you don't want that at all. So you wanna walk that too Bottom or top, depending on your design. So and now, now that we've kind of flushed out some of the colors on the make this pink for fun and we're going to get rid of that background at 8% we're gonna hide that. I'm gonna hide it on here, ID. And now we're gonna go back to this main section and turn off active State to So now we're at home and we've got that nice menu. And what's nice is say, you want toe, make another page and you make this into a component. So this could be main menu. Hand will duplicate this and take main menu out. Oops. What did I do there? Take main menu out and put it over by other one. So what's nice is than you can change this section throughout the site. So, for instance, well, we're gonna make this all a component as well. So we're gonna add the main navigation are not in the navigation, The main text for the page. So the header one and I want this one not to be all uppercase, so we're just gonna have it regular. We're gonna make this stinking big in bigger. Let's go. 64. Okay. All right, let's go. Even bigger. All right, So now what we want to do is set this this Grady int fade this background picture and the header one two in which, which is nice. If you set this up on your textiles, just go ahead and name it H one. But we're going to select all three of those option command K. This will be our hero, So I copy that duplicated and take the hero out up here. So what's nice is say we want another page. Just duplicate the page. Move all the stuff quick, just so you can see it. We have another page. We select this component, she's an image, and we'll try this one. Okay. And now we're gonna crop it. It's already set to crop cool. We go into our header one and like cracking. I don't know if that's a skateboard or not. So we we need a line left So we go back to our component and a lime left. All right. So quickly get a sense of how to flush out different pages with the different menu system. 7. Button With Icons - building buttons with multiple icons and active states.: Let's do a quick jump into a button with an icon. What we're gonna do is really simple. Button has the different social media icons in it, and you can swap really quickly. So well, do a white button with a stroke and do it pretty subtle and make. This will go down to 56 for the social media ones. And let's say, you know, do a follow or something like that to make this even smaller. It's good on 48 so it's not overwhelming. And I said, this text the line left, give it some space. We're gonna bring in Twitter first. So you have Twitter and what we're gonna do is space this out. Since they all say follow, we're gonna center that and have the spacing that 32 All right, so pretty simple. Option Command K. So we have our social button Kim type with you guys watching. Okay, so what we want to do is be able to drag this out and have the different follow buttons so we can even do a different one, too, where we have just just the us like a small like 32 pixel version. The same same thing. Sometimes, if you we have something, just paste it shoots it to the top left just to watch for them. So one of the things you can do is just throw all these icons on here and a line center. Align vertical and drop it on this button. Align. Vertical line. Horizontal option Command K. You've got your component social small. Okay, we're gonna make a duplicate of that. I'm grabbed the original. Pull it out. So what's nice then is say, you've got this, master, You come in and you just hide all of these. Then when you come into this main social one, let's say, let's start with Twitter and we want to have them locked together like this. All right? I think that's messed up. All right, so then all you do is come in here, Turn off, turn on Facebook, then kind off. Twitter, Turn on Lincoln. And so on and so forth. And super easy. Super, Super Easy. For some reason, that one is looking weird. So we have to go back to our main one quick YouTube and watch that one go down in the main section. So that's that's one way to do this small social media buttons and don't forget you to canned. Um, saying like this is off and well, duplicate that and say on and do it full gray. So then, you know, if you're selecting this and you want to show the be on on button or the rollover button, then you just click on hopes on this one, okay? So you can quickly see how easy it is to to make these components. And then, for instance, if this is in the footer and the footers throughout the whole site, then you can just quickly get a sense. It's almost like you've got CSS visually to change everything on the fly. So I'm not going to spend a ton of time on this. But, um, so we're just gonna flip flop thes really quick. Oops, I didn't have the others in there. Sometimes you have to have one showings that you can see what you're doing. That's kind of fun. All right, so now I'm going Teoh, make Twitter off. He's big, just makes it super easy and well off. You have your social buttons and you can do rollovers anything and style in any way you want, But before you're done, you wanna see how this works? Responsively. So let's take a look at this and see if it stretches and this is what I'm talking about is no, that's not right. So what we do is we go in going to these, so select them all and say we want him in the center and we want among left and then we want this follow to be Which song? This main social button right here. We want it to be right justified. Let's let's keep it left justified. But what we'll do is say right and center. So as this slides out, it will get bigger. Now we did it right, and you can even group these together as a group and center line those so that they'll stay together in the button as ago. I guess I should show you that. So what we're gonna do is group this together and what you have to do is say, a center center and now should go. If not, we'll have to What? It just did it on the Twitter. So maybe you have to show it, um, says center center. All right, so it's nice that you can just test it. So then you have a nice button that follows and no pun intended and can stretch to your response of content. 8. Selection components - radio buttons and check boxes with active states. : All right, let's let's jump into multi. Select and single Select. So what will view is a multi select would be check check box. So we're going to make these 32 32. I'm gonna stick with the same kind of style with the white background, like a to pixel gray stroke. Okay. And she's grab some text. Let's just call this check box one check box to We got a text just regular and space this out with, um, 24 pixels. You can see how I'm doing. Everything in eighths were trying to Azzam's. I'm not going too fast. So, um, we're just going to do the box itself for the and it's that seems still too big. So let's go down to 24. All right, so we basically have our box, you're back. And then what we want to do is get a check. And so I use, uh, not this far awesome. And so we can do Look up, check If you don't have the pro version, um, you can you can use the the free version, so there's a check there, too. So I like some of these. The thin ones that kind of match the style that we're going for. So what I do is copy the Unicode and go back to Sigma. Yeah, paste this right here and fill it with Did that work? Oh, it's on acumen, Prue. So we need font Awesome. Five, not brands, but just five there. Yeah, there is a pro, and we're gonna put that check in there. Okay. Looks like I've got to those Not sure where that one. All right, zoom in a little bit. So we have a check box, and what we want to do is say, back then I'm gonna duplicate that and say active. And this check isn't hot in the page itself. So sometimes I'll just cut it, command X, and go select something on the page and say command V, and it will paste it somewhere close. So we're where is our Yeah, we're way up there. I usually group these a little bit better to go a little bit faster, but, um, as you build out the rest of pages, But what we're gonna do is just keep moving. Okay? So we have our check here. We can name that check and active. So we wanted to go to that pink. And now what we do is say, active. I'm grouping that, and Oh, and we're gonna hide that and then select them both. And we don't need a group of more. Just say option command K. So we got our component and, um, select check box. All right, so now we contract this down here, and we're gonna duplicate this. Keep this off to the side in case we need to change someone. Make this one active super fun. Um, so now we'll go over here and do the same thing. So we're gonna take that styling, make a radio button. And Phyllis flight stroke is the gray to and down to 24. Sometimes the radio buttons are a little bit smaller, so we might go down to 22 just, uh, get this sense of that style. All right? It's and then we'll say off same thing. But this one, what we'll do is just make a simple, um, circle in the middle. And one thing with you know, 22 doesn't work with the circle directly in the middle unless it's just perfect. So we'll go to 21 and then a line center, Vertical line, horizontal and still is off a little bit. So maybe that's well, I guess I had it right. 08 Hello, Evens. Okay, so here we go. We'll go to Pink for the film. Name this active and going to duplicate this one. Change this to Pink. I don't like that. It needs to be the maybe. Okay, so, um, after dot So we're going Teoh group. Those do turn it off. Selecting both option command K. And so we'll have select radio duplicated. I get the how fast you can get at this. Just how quickly you can move with it. No click on. All right. And like, you know, for instance, if you want to change like the text with that, you can, but we're gonna We're gonna just keep it that way. 9. Tab components - using responsive components to easily add new tabs.: I'm gonna jump in and keep going on and work on some tabs. And so we have, like, an active tab state. We've got a condensed tab right now with, like, I don't know, like, an interesting like, Hey, there's three things happening within this tab, but this is a nice component section. So asl long as you're building tabs, you can keep dragging them and have your sets to on and off. So what we'll do is make a line I like to use a rectangle on, not the lines. So you have a little bit more play. I'm not sure why. I think it was Sean Moynihan who taught me that one. All right, so we're gonna go boot camp, great for, And we're gonna give this space try and treat this active tab like a button, but we're gonna do some different things with it. So we're gonna have the background, move it to the back, which is option command left bracket. So go to 44 having a little bit taller, and we're gonna fill it with white and have this, um, stroke to be the same color. So to so will match. I think that's not the same color for and three. Okay, so we've got our active tab here, and we're gonna go all the way across up into the sidebar area, okay? I just duplicated that by holding option. Okay, so now you have your active tab. Now, if you know your backgrounds gonna be white, you conduce just kind of a quick, like hit on top of this, um, to cover, cover what's there. And then you have that active, especially if you're doing, like, a style towel or something that you're doing it really fast. That's a nice, quick way to do it. So let's say we're gonna have this as, like, uh, offshoot on the tab to show how many things were happening that would be kind of fun. All right, so now that we've got our basic structure, we want a center, the text, and make sure that their spacing sometimes Oh, uh, I'll drop the's in and say like, I want a 24 pixel base. Then this is kind of a cheap, quick, quick way to do that. And it helps. Just quickly get get your spacing. Okay, I won't. Okay, now that we've got a tab working. This is our active state. I've duplicated it and have the master over here. So we can try and do some stretching and stuff like that to see if it's working. And it is The reason why is this is grouped and it's set to right on top. So always stay right on top. We want this to be 44 pixels and it's not exactly so. I will make it 44 pixels. And we've sent this to this active like kind of bar, basically saying, Hey, this is the area that active. I didn't want it to go all the way across. I wanted it to show that Hey, we're working on this content below, but we want that to be center and bottom. So we'll always stay in the center and it won't won't grow. I know always be at the bottom. So now that we've got this, what we need to do is space it out. I'm just holding option when I drag so in a inactive and active. Okay, so say it's like inactive tab. It's a little bit longer. Um, so we again either want to two lines and we're going to change this line. HaIf and, um right now we can do that and you can see it will work correctly with the other one. So it's 84 percent. And but one thing we can do is just make it a little bit wider. So this should be 20 are 24 pixels, 24 pixels and 32 space. So what we do now is we can keep the numbers or or float them and take off the active take off that and take off that. So we have just a nice inactive tab here and we'll duplicated again and say, Like, we'll just call this inactive, so be a little bit smaller and the way you know where your sizing is is you go until it jumps to two lines. So now that's correct for your spacing. So let's jump in two tables next 10. Tables - Using components to speed up your design build and dynamically change..: we're going to jump into tables, so I'm gonna make up some stuff. Got X games status. Now we've got a worldwide I d. Let's try and see, like, um, availability, um, sponsor. And maybe we'll do name here just making this up. So what we want to do is kind of walk these into our columns or work on spaces, depending on if these air going to stay or be dynamic, so this could be a component as well. So, for instance, I would like to make this, uh, textile. So I'm going to say this is, um, ahead of poor. All right, so you can put this and click them all, select him and say each for one thing you can do to is if you're spacing, you can make this a component, so it will slide with with your tables as well. We're going to work on the other tables right now. So what we'll do is move on and we're going to break this and just get some basic texts a regular text and drop it to 16. So we're going to have 123478 9-001 So this is his number and availability is, um I don't see available. And what we're gonna do is make sure that this text is not center. Upper quote upper case. Same with this one to be sure. Yeah. All right. So we want this. This is like our headers area. So we want this to be our first table cell. We're going to space this for 30 to 48 pixels, so we want this to be a little bit stronger, so we're gonna use it as this Navy base. Um, I think what we'll do just for under your status, okay, just do a date just for the Heckman. So, since this is going to be a date, weaken, shrink that quite a bit and bring in the name. And let's start with, uh, Rodney mourn. So this would be kind of cool, too. Most tables don't have this, but we can do it. Just, um, is we can throw in their sponsor logo, and we're just gonna use this as a space. So I'm going to make that pretty small and move the sponsor over and forgive me. I don't know what sponsors I just grab some some companies So just for fun, princess, See Adidas. Okay. And we're gonna send this Phil to on image, all right? And status available. So become a nice we'll go back and check. Icon. We're gonna look up. Let's see. Um, we've got the check already. I don't see just for the heck of it will do. Um, close. So we've got times time, sir. Cool. So copy that one. Copy it. Come back to fig MMA. Make sure it's font awesome and pro. All right, so now we got our clothes, and we're gonna make that 24 pixels on, see if he's available or not. So what if we probably want to check? That's really similar to that. So we'll go back to check in the circle. Check circle a copy. Come back. Peace. All right. So what colors do we have? Do the green or the pink? Because it's the active color and not available. Is that kind of even those green? It's like I know. So I'm gonna stack thes and aligned them, get this status right, and then make sure we've got enough room for not available. Kind of type out like the most your have so if you know it's available, are not available. Type not available and check where you're at. So so we've got the logo with the sponsor. The name date and the worldwide I d. Number. Um, just going to space this just a little bit, so we don't You don't want All right, so let's get rid of that. So we can see. So this is our table. But what we want to do is look at our spacing first before we make this a component. So I put this in the bottom, and actually, I'm gonna make it really light. And so even though this 1st 1 we don't want to be, um, Gray, we probably wanted to be white. Um, we'll want this in the background. So we want This is the space. So I'm just saying 84 right now, just watching my grid. All right, so we want space. This just a tiny bit. I was due 24. We got that over there. So now we've got our table, and I don't like the background like that, But what we can do is is use that same one, but drop it to 10 or 20%. 30 will work. And what we're gonna do is duplicate this and bring it down to two to. And sometimes if you have trouble lining, you can select both of them and make sure you have a line to the bottom. And so now I know that this is the one on top. I'm gonna go to 50%. I'm trying to go to 100 to match all the others. All right, so now what we do is selected all option command K. You are. You have a component, and it's a table. So now what we can dio is duplicate this gonna take our table master out. We'll have to play with that a little bit. And we're going to duplicate this by holding option and shift and this one and this one. All right, so So we have Let's see, Bucky LASIK, um burn Quist. Eric cost because done. Okay, so I have no idea who these guys were with. So sorry if I mess this up, I just have these logo's available so and dependent. Okay, so now this failed right here. What we're going to do is come back to this one and make sure we've got the space to do it . Okay? I think it's e nt Independent. Yeah. Is that right, man? I hope I didn't mess it up so you can quickly change the numbers here. So let's say 3478 You've got 678 and dates. I don't know. We're just making all the substance that we can quickly change it. But it's so nice when you're making compass for companies. So let's see 12 and 2020. All right, So what we want to do now is we can go into the image and choose our image. And what was that one? First I better know which one of what's Adidas see that I can throw independent in. It's so nice to be able to just quickly swap. I mean, these are tiny, but you get the idea you can do all sorts of stuff. Santa Cruz Plan B image cheese image and being all right. So that's cool. So that now you can go in and say, like, which I didn't on here. We can name this, um, available, and you can see below in these. It's starting to fill those out for you. So now we know which one is which. So let's say he's not available and will say, Oops, he's available. So we're gonna hide those so you can quickly get a sense of, like, variables that you can turn on and turn off. So this one, what we're gonna do is go back to the back and hide it. Same with this form. Well, actually, let's do Let's keep this one and will need will hide this one and hide the back. This one, she can quickly see how the table could could be built. 11. Blockquotes: close this tutorial out. I wanna go over a couple more things just get a sense of responsive behavior with components. So, for instance, I built this walk quote, and the way that you want to build, like a testimonial, testimonial or block quote is isn't in pieces. So you have your background, um, calls back and your text, and I've got, like, a little pull quote. And, um, Doctor, I'm a funny guy. So this this piece is the name, and this is the quote, quote, bracket, or quotes, and then this is the actual block quote. So what we want to do is save this as a component and just for time purposes, I'm gonna put it right below. So I copied it, duplicated it. Okay, so when we mess with this, it doesn't do that well, and it you really get smashed and nothing moves. Right. So what we want to do is we can actually smash it a little bit so you can see what happens . But go to the back and say, left and right and top and bottom. Then you want your name to be on the bottom. So you say left cause you always wanted left. Next to this quote are like speech bubble quote, and then you want it on the bottom. Same with this one. You want it left and bottom. And these you want left and right. You can already see it changing and top and bottom actually lets you top. And let's set this to, um, center and top. Okay, see, So this is working, right? It just looks like it's not working right, because when you stretch this out, and so then you space it so you can see quickly how this works really well, with responsive designs where you can just poured it over and then pull it down. So super nice. And we'll just snap to one of these columns, get that space right, and move the master component off and we're done. 12. Pricing tables - 1 component to build out a quick 3 column pricing table.: on this last piece, we're going to do pricing model pricing structure so that the components can be moved and edited. And it's just nice toe have pricing structure, but having them be in components. So we're gonna make thes white and just have a little fun. Um, in this background, So what I'm gonna do is pull photo in, Did it? Kind of big hate? Okay. And what we'll do is we're going Teoh Just duplicate this for sizing purposes and and go to solid, and then we can move this behind, so we'll say this is back and move it if you can look way on the bottom left, you can see here is the back and we're going to go dark on this one, and we're going to change the image to Let's try software. Yeah, so that's kind of fun, and you can even blur it and do all sorts of stuff with it. So So on top of this, So I like to group these and say back and and then lock it. Sometimes if I'm working on top of their but we will throw in our grid and will do a set of 33 and three. So get this lined up, all right? And just making up a Zagat. So bear with me. So what we'll do is we'll have, ah, light like a pro. And, um, like, um, well, maybe light, regular and pro. So what we'll do is figure out the colors just really quick thinking about what might be the strongest and medium. And actually, a lot of times they have, like, the light and regular, and then the pro in the middle with that's a little bit bigger. So we might just do, um this green gray. Yeah, just for the heck of it. We're gonna try this out, so we'll we'll put this in here. And we wanted to spend the entire thing cause we want Ah, a drop shadow. So I dropped it already too far. So here's the pricing back. Okay? We're gonna do the effects. Who can't button drop, and we're gonna break that. We're gonna do a little bit bigger. So do like a 14. And make this really dark so you can see it way too dark. So then we'll drop this back to 50. Okay, so we'll say light hand. We'll keep these break thes and make he's a little a little different. Will will go bigger but thinner. So we want to center the text and thinking about stretching and and spacing. So we wanna have books as much spacing as we can for the other. The other pieces. And I think what I want to do is go small, actually, And, uh, the 24 not to 24 24 and then do the pricing right here. So well, have the price. And then let's say it's 29 a month. Actually, that's a lot of ST nine a month. And we want this to be big and this one to be light and small. And so one thing we can do is work on the alignment with this is set it to where it will be superscript work the position of it to be higher. I don't think we need the slash. I want this even bigger. 56 64 here. Okay, you got a light, and we'll describe this line and again, it threw it up there and then come back down. Yeah. Okay. What's gonna make us go all the way through? Not sure What it's not working with this. Okay. Gonna make this really subtle. Say, like, 20%. Do you settle? Oh, this is 100 there, but pastors 20. Okay, okay, so this is $9 month. But what's fun now is actually, we can pull this back, drop down and make this passed through a little bits. You can see the background. Someone do. 75%. Okay, on now, we've got, like, a list kind of like a bolted list. But let's just center it and say, like, actually, I have some Latin over here, Gramps on this centred. Let's do 30 four hurt. It's we're in a Spacey's by 24. All right. And see you conceive. This is centered, and that's fine. Actually, we'll leave it like that kind. Looks nice, Although we want to buy it now. Button so well, space a little bit better. All right. And so now we can come back to our button. Copy it. Pieced by now, you can shrink that a little bit if we want. Okay, this is super simple that you get the idea. So now we're going to make this dictating a component. So we need this back pricing back with all this other stuff. Got so much stuff going on and he'd clean it up. Order button to go. There we go. One of things you can do to is select all the items were having trouble in group it, call pricing, and then we're going to option command K and make it, uh, component, uh, gonna duplicate this Taken out. Well, it's pretty crazy drops. So we have our pricing in our master. So what we're going to do now is snap to the columns and take it out. And what's kind of cool is we can hold option and make this a little bit bigger. Thanks then. And we'll say 80 19 and 14. So we'll say pro and business. Just the heck of it. So this is what's so nice about components is you can just quickly change the elements. See? See what works colors here. A little crazy. Sorry. And you can even change your your buttons on the fly to. So I hope there's been helpful and you understand how powerful components are. And I look forward, Teoh, seeing what you guys create thinks some of these pricing areas I've added in an image, but I don't like it, so I'm gonna delete it on. Deletes it throughout. Some of these items will have. This is the best value or kind of a ribbon that showcases Hey, look it. Look at me. Which obviously we would do on this pro one that, um and I usually it's kind of like the cheaper version. It's like the middle version. So well, Dio, we'll swap this and we'll say pro and business. Okay, so how do we add something in here that we don't want on the other to the same thing? We just go back to the master component and this is the header area. So some of this design might be not the best, but it's more just to show you Hey, this is what we can do. So what I'm gonna do is make a ribbon and I will mask it so we'll just call this ribbon and make it white, and then we'll bring it down into this header area, and what we'll do is use as mask too for this This section here. So we're going to duplicate the header and call this mask. I'm in a group these together. Then I'll call this mass Tuas. Well, then I'm going to say use as mast and then this punches and so you can see you know that it's gonna look, um, this ribbon can move within that mask area to what you want so we can throw, like in a one of those effects on here. So that button drop that's pretty settled and let's drop, let's go ahead. And we want to mask this since its text to we're gonna put, uh, you don't see that's value. Okay, we'll do condensed and regular and do it pink. So we got match the angle of it. And this is what's cool about vectors is you can just stretch it. And since you already have your your mass set up, then you just have to move. Move it to where it works and we'll just give it a little bit extra room. And I already grabbed the hot icon, so I'm gonna cut it, go back to the ribbon paste, and now you see it's in here. It's not exactly a 45 but it's okay. So we'll just say that that's that. And I think my you can go it like it A direct by holding shift. Goto a 45. I just wanted a little different angle. I think this is 30. Maybe something like that. So Okay, so now we have the best value, but we know that all three aren't the best value. So all you have to do is come into here and hide the mask and hide the mask. So what happened here? This is a shifting thing for components. So what we need to do is go into our mask. And one thing that we can do that might help is is just to say that this is right and then top, and so you can see it jumped. So that's that's the best way to do it is just test it if you need to. Sometimes you need to make this a component. You can't do it inside of components, so you can drag it outside, make it a component duplicated and then drag it into your pricing. Um, we didn't need to do that this time. There's some more complex structures that me that so I don't put it in there if we don't need it. So, uh, that's that's the component section. In a nutshell, you can get into pagination, which is, you know, with the triangle and the number set and the active state all in one component. So now that you have the tools, I hope to see what you guys build. Thanks. Yea, you're done. I hope this classes helped you showcase how you can work with components, how easy they are to edit and nice shifts. If the client hates something, you can shift quite a few things at the same time. So I'd love to see some of the projects that you guys come up with more so not projects but components and maybe even some pages that you built out using this class format. Thanks hope to see in the next class.