Hi everyone, in this video, going to make this button here, Toggle... see, Play, Pause, Play/Pause... so it's kind of like the last video where we had separate buttons... but this one, we want it to play, and we want it to change the icon... to do that we need to tackle this a slightly different way... but also, in this video, I'm going to go through the entire process...

of building this, like reusable card... so it's going to be, it's going to take longer... because I want to not just skip to, like the functionality... want to actually build it for a little bit of practice... also be warned that this video here that I started using... has some flashing lights on it, it's a nightclub scene...

so be careful if you are sensitive to those flashing lights... and what I'll do is I'll make sure... I don't use them in any other videos in the course, sorry about that... all right, let's get into the full Video Card design process. So I'm on my Components page, I'm going to bring in the icons... that I kind of, yeah, I glossed over a little bit in the last video...

I'm going to hit 'Place All', I'm up in this no man's land... so I've got a bit of area for it all, they're different sizes... so what I want to do is select them all, and you got to make sure ... when you're selecting them, that if you kind of do a little lazy selection... can you see, it's grabbed the vectors but not the frame that they're in... so either drag a box all the way around them...

or click on this first one, hold 'Shift', grab them all... and now, Mixed, I'm going to link that, so when I change them all... from various sizes to 32, they're all the right kind of size... while they're selected, 'Selection Colors', going to be 'White'... and I want to be able to see them all, all lined up with each other. So I want to grab the parent of Stop...

and I want to just drag it over here... and what I tend to do is just grab them all now, and go to 'Distribute Centers'... 'Horizontally', so they all kind of like space out... you can do that with, sometimes you can do it with this... the Tidy Up, but at the moment that one went as a grid, well, not a grid... just along there, thanks, let's make them all 'Multiple Components'...

and now we're ready to move to our video... 'Shift 1', I'm going to put mine on my Icons page... because that's where they should go... and then we're going to go, 'PgDn', I have made an empty page for our video. To get started, I've got some text, I have got a video that I've bought in... it is Video 06 from your Exercise Files...

and I have got a frame down the bottom... just out of good habit, I'm going to put my text inside my frame... I'm going to turn my frame into an Auto layout... I'm going to get my Auto layout to be the right size... work on the padding... and I'm going to bring in, 'Shift I', going to bring in a component called "Play"...

there it is there, I'm going to drag it in... kind of squidges over, that works for me... let's turn the whole thing into a component... and we should probably work on our main components, off over here. What we're going to do next now is, not going to actually use this button... we're going to make it look like the button gets used...

but really what we're going to do... is have two variants that are going to toggle between, so this top variant... let's give him a name, so let's click the 'Component Set'... and let's go over here, and let's click on the little 'Settings'... let's call this one "Play Mode"... 'Tab' down, this one's going to be "Paused"...

and this one's going to be "Playing"... there you go, Pause and Play... I think I got my names mixed up... let's continue on, so what we want to do is, this bottom one down here... I'm going to keep clicking until I grab my instance of that icon... and I'm not going to do any fancy component properties, I'm looking to say...

just going to toggle between these two here, because that's the Pause. So what I want to do is, say, when this is clicked--  so I'm going to switch to - 'Shift E' - to Prototype mode... go down there and say, 'On Tap', change to the Play mode of play... it's playing, but it's got the Pause button, you get what I mean there? Dissolve, we'll leave all that for the moment, let's see if it works... actually, let's 'Command' click, 'Ctrl' click to dive into the video...

let's turn Auto play on, the first one off, it should be left on, on the other one... let's 'Option', or 'Alt' drag out an instance of my main component... let's prove it, oh, there's a line there, other than that, let's go... hey, we're doing it... doesn't toggle back... so we want to go from there, when you're finished, go there...

and it should snap everything, let's give that a go now. Let's go to 'Prototype' mode, let's start a new Flow point, so we can... hit the little 'Play button there... default, line through the middle, ignore that, 'Play'... and then toggles back to Pause... Play, Pause...

the cool thing about it is that... it kind of stops where it is, now a couple of things to tidy this up... one is the gap that we can't see there, but we can see there... this happens when there's, especially videos, sometimes... because of the proportions they might end up being like a half a size... like half a pixel, at the moment that one's all right...

this one here I'm going to bump up a tiny bit... actually, not doing it on this, got to do on this one... let's move it up one pixel... do the same to the bottom... and if that doesn't get rid of it, it did, cool. What I'm normally looking out for is kind of a half pixel over here...

you can accidentally have 0.5 pixels, so that's normally what gives you a line... I don't know why it was creating the white line there... I bet, if I check this on the phone it would be fine... white line just kind of, at this particular zoom level, cool. Other things that I want to do, is I want to make this a bit more usable... I'm going to add, first I'm going to name it, 'Command R', let's call this one...

let's call it "Card Video"... because we've got, I think, Card Event as well, excellent... what I want to do is I want to add some properties inside of it... some component properties, so what I want to do is... select on this text in here, so a couple of clicks to grab the text... and find 'Content', add a 'Component Property', thus one's going to be...

"Video Text". Cool thing about that is, over here, for my instance now, the person using it... can see the two variants that I've got, Play and Pause... and over here they can change the text... the only thing I need to do when I'm doing this retrospectively -  let's give it a preview. - is when I play, can you see, it's toggling to the other one...

so I need to link those, you don't really link them.... you just got to make sure they're called the same thing... so down here, 'Command' click to jump straight to the text... I'm going to add another 'Content'... another 'Component Property, for content... and I've already got that one here, called Video Text...

now this one should change... excellent. What else should we do, is tidy it up... because the text is too high and it's not lying in the middle... it was great when it was just one single line, so what I'm going to do is... go over here to both of these...

so one, hold 'Shift', click both of these... and I'm going to say, actually, be left but centered... and it's not going to change much over here... but it should change this guy to be centered... depends on what you want to do, I'm not sure that's actually better. Next thing is I want to be able to switch this out so I can have more than one...

I've duplicated it, this one here, I'm going to go inside ... you got to make sure that you got the video selected... sometimes you might have constructed yours with a frame... with a frame, with a video inside that frame... you don't want to be switching that out, you want to go deep, deep, deep into it... to try and find the video, and that's easy...

remember, 'Command' on a Mac, 'Ctrl' on PC, goes straight into that thing... and in Design view I can go into the video, I can pick a new one... let's bring back the pug... give it a sec, let's switch to our 'Preview'... and here we go, Play/Pause pug, Play/Pause the nightclub... oh, there's two of them, I didn't realize that...

look, there's two versions of this... because this thing's been told, go and play that video's name... not a particular frame in a video but go play that video's name... so that's why that's playing twice, there you go, we all learned something... how do you fix it? Don't use it twice, there you go.

All right, that is going to be it... that is how to get that Play/Pause button to toggle in Figma... if you can think of a better way of getting that going... let me know in the comments... I'm looking forward to the day we can add... two Tap operations onto that one button...

to get it to both play and switch to another component, like our Play button... for the moment this works... all right, I will see you in the next video.