Hi everyone, hey, in this section so far we've learned a lot... learned a lot about component properties... we looked at Boolean and Text, and they're all great... and they save us so much work when it comes to creating... our components, but there are limitations... so you'll end up combining both component properties...

along with the variants that we know and love... there's just some things component properties can't do, at least not yet... things like color changes, especially if you want to add interactions... like a hover on a button, like we're going to do here... size changes can't be done... picking out new colors, can kind of be hacked to get done...

but it's probably just easy using a variant. So what we'll do now is we'll build out kind of like a real world example... of mixing component properties along with more traditional variants... and we'll make this thing, it has a lot going on, it can do so much... but was still quite a minimal amount in the component set... all right, let's dive in.

To start with, I've got something that looks like a button... I'll call it Button Main, it's an auto layout... and it's got an instance of an icon in here... so let's convert it into a component, and let's create our variant for it... kind of mixed in with all of this now... so I can create a new variant property, let's have one of them...

the second variant is going to be called "Hover"... let's rename the property to "State"... so we've got a default, a state of Default and a state of Hover... this one here, I'm going to 'Command' click the background... so I can get to the Fill, and just make it a bit darker, there we go. So one of the things component properties can't do is interactions...

so when I hover above this, I want it to change color... we can't do that with component properties so we're going to do it with variants... so 'Shift E', say, you go to there, On Click... no, while hovering, change to the Hover state, and let's do a Dissolve. Previewing it, and we've got my little preview set up here... one of the problems at the moment with states...

they're quite new, and they don't allow you to have flows... to start here for previewing it, you still need a frame... so what I'm going to do is keep everything, all my kind of components on there... and I'm still going to hit the 'F' key, pick a phone... and I'm going to put an instance on this one here. So 'Shift I', I'm going to type in "Button"...

and 'Button Main', there he is... now I should be able to start a flow there, preview it... put it over here with all my other stuff, cool... and there's my button, if I hover above it, there we go... that interaction needs to be done with a variant... so what else needs to be done with a variant?

Size, something we can't do... so what we'll do is, we will... select the outside, make two more variants... actually, I'll duplicate the ones I've got, so I'm going to select you and you... I'm going to duplicate both of those... and these two here, in Design, I am going to...

just change the, I'm going to go, I don't know, +8 pixels... and maybe +4, those are going to be my large buttons. So first of all let's wrap this... the shortcut is crazy, like a 'Command Option Shift R'... not sure how I remember that one... it's 'Ctrl Alt Shift R'...

but it's probably easy just to click the button up the top here... see this one here... just kind of get the component set to wrap around it... with the component set selected let's create that new variant property... and this one's going to be called "Size"... and the default's fine, I'm going to grab these two...

and say, you are size of "Large"... these two here are size of 'Default', perfect. So over here now I have got button instance that has two variants... one is the State and one is the Size... and I haven't updated the states on these two... and you two are a state of...

nope, you are 'Default', and you are a state of 'Hover', there we go. Now over here we've got you, and we've got state of Hover and Default... I'm not going to change the state... I do want to change the default to the large one. Everything's working perfect... let me create a secondary color, just I'll do it in speed mode...

just so we can get to the good point of like... where do we then add component properties... so there we are, another thing that we need to do in variants... is a big color change, like this, so let's check out our button... we've got Size, we've got Default, Color, Secondary, or Default... great, regular old variant.

So if there's size changes, color changes... and if you want to add interactions we'll still use variants... but what ends up happening is... I'll speed add the version that is missing all of the pluses, you wait there. This is where component properties come in... I've added a variant that has no icon...

and it's doubled what I had up here, kind of ballooned my buttons out... it totally works, over here I can pick the option that has no button or button... but this is getting quite complicated... so I'm going to undo and do it the proper way using component properties. So what I want to do here is, I want to say, you... I'm going to double click, I'm going to grab my icon...

not the vector on the inside, I'm grabbing the kind of like wrapper... that I'm using of my instance... I'm going to say, actually, you have--  trying to find the right icon, on the right layers... in this case it's under 'Layer', I want 'Show Icon'... I just want to go 'Show Icon'... and I'm going to now apply it to all of them...

this is where that trick earlier on... so if I double click to grab this, can you see... I can select them all and say, 'Apply'... because I've already made it I can kind of just toggle it on... so now I didn't have to duplicate that whole set... I can go over here and say, actually, Icon, on and off...

can you see the power of it? Now button is a good example for me to show... the hover interactions and the different sizes... where component properties come in, is for that kind of like... more to do with, like things like cards that we're making... if we had to have lots of versions of these it could be tricky...

especially if we're just tuning things on and off, and like we saw before... when we're doing our fields here... lots of things to be turned on and off, icons to be turned on and off, awesome. Just to complete it, before we go is... I probably want to grab you, grab all of these... by hitting the little target, find 'Layer', and I'm going to say...

I'm going to add a new one that says "Show Text"... it's going to be 'True'... it means now I can say, on this button, I can say, the text, On and Off... and same with the icon, actually, we've already got the icon off... what I probably want to do with the icon though is... have a way of switching between different icons ...

so it is different from the Layer one that we did, Show Icon... we're going to find it here, there's my instance... I've got an instance, I want to find that little icon there... and I'm going to do the instant swap, cool... and it's going to be this one, that's going to be my default value. I'm going to add some preferred ones, I'm going to say...

this and that, and maybe that... excellent, now, again I didn't have to duplicate it... especially if I have 10 icons... you'd end up having to make 10 more sets of these to have all the different icons... and then turn them all off, another set, man, it gets big... so now I can say, you, instance, this one, oh, so tidy.

Let's do the last bit of tidying... two more bits, is the Text, I probably want... under 'Content', remember, I want there to be editable over here... which is growing on me... Text, Primary Button, great... it means that people using the instance, my other team members...

can go through and change the text over here to be "Sign up"... and last bit of tidying is probably getting this into some sort of order... we do it by using the main component, or the component set... and we can drag these around, so we can say... probably, the most important is going to be the text ... and we're going to drag it up...

it can't go past these variants... but the top of this list, Show Icon, On and Off... let's put Show Text, probably after this one... because it's less likely to be used... Show Icon, 'Yes', and then pick the instance, that seems right... in terms of the state, probably don't need that at the top.

I need that state there because I need the interaction... but it's not something somebody's going to be changing, I don't think... size and color, probably Color, Size, State... is how I think this should appear to people using my project... what color they want, what size does it need to be... text that's going to be in it...

maybe Show Text should be above, do I need the icon or not, and then pick the icon. That is a combination, variants mixed with component properties... and what have we saved? We've got this, which is still quite a lot, but especially with those icons... and I needed four of them, I need four more sets of these... duplicate, duplicate, duplicate, to show all the different icons...

and the different sizes, and the different hover states, bad, man. That is it, a bit of a mashup, a bit more of a real world project... I'll see you in the next video.