Hi everyone. In this video we're gonna do this kind of like hover thing  where they fade in a little bit  and get a little bit bigger when you roll over the top. Why is this video so long? It's because I want to show you something  where we make it really easily,  but then we wanna keep adding stuff. We want it to fade as well, as well as grow. And we want to be able to go into this, open up a plugin  and just go and quickly say, all right, I want a new set  of images that we're all going to be mail  and hit apply all it's gonna say, would you like  to apply to the image section?

Look at that. They all update. Maybe the text needs changing. Okay, let's change everybody's first  name or first and last name. Let's click apply all. Would you like it to apply  to the component property named artist name?

You're like, yeah, let's do that. Same with the country as well. And we want it to all work when we're finished. So I wanna take you through a little bit  of not only just we'll do the image growth thing at the  beginning, that's really kind of easy. But what I'm gonna do is keep adding levels of things  that we wanna do and we're gonna keep bumping into problems  and try and problem solve together. 'cause sometimes this course can be a little bit like,  Hey, this is how to do it.

It's super easy. Why aren't you doing it? So super easy. The truth is as I end up building something the way I think  is good and then I kind of like, oh,  and I also wanna do that  and it breaks the other thing that I made  and you're like, huh, okay. And then you're like, oh, I also wanna do this. And then I want it to be really  easy for other people to use.

And you're like, you end up down this kind of rabbit hole  of doing it the easiest way you think. Then adding a little bit more complexity,  breaking it, fixing it. I guess this is uh, more of a real world approach  to the way I work when I'm building out components in Figma. Enough talking. It's already too long this  video, but I hope you enjoy it. Let's jump in.

Alright, to get started,  I've just got a frame, uh, that is a square  and a frame here that you can see is an auto layout. And I've got some texts inside of it. Two separate text lines. Okay? Artist name and country of origin. Alright, let's get started on our journey.

Uh, so this one here, I'm just gonna put in an image. So I'm gonna go to fill, I'm gonna go not solid. You are image. Choose an image in your exercise files. There's artist one and two. Okay?

We're gonna bring in artist one. Okay? It's gonna be good. I'm gonna make a duplicate of this  'cause I am probably gonna end up making another version at  some stage or, I dunno, it's more my habit anyway. All right, let's convert this into a component. Let's give it a name.

Gonna call it artist, okay? And what I want to do is have two variants of it, okay? And this bottom one here, I'm gonna use the trick  where I can go inside of it. Option double click, okay? And I'm gonna switch it to crop and I'm going to try  and find the edge, which can be tricky. Hold down the option key on my mac,  all key on a PC plus shift.

Okay? And just gonna scale it up a little bit  and see how this goes. Um, let's try out an instance of it  and I'm gonna preview this and it's not gonna work. Why not? That's right. I haven't added the interactions.

Okay, so that's my first little problem. So I can do that. Shift E, you go to there on tap? Nope. While hovering, I would like you to change this variant two. Let's name our variance as we go.

Okay, so click on the parent, go to design. I'm gonna say in the settings here,  this is gonna be my state  and there's gonna be default and a hover. Now I'm gonna preview it and see how we go. Oh, look at that. The one thing we just need  to make sure is happening is, uh, with the interaction is  that we've set it to smart and animate  and I've changed mine to gentle. Cool.

All right, so that's job done, right? The problem's gonna run into this. When I say actually I want multiples of these,  I'm gonna see you, I'm gonna see you. And then another set. Wow, where did you come from? Not sure what happened there.

Duplicate went a bit crazy. Okay, so I've got a bunch of these. I'm gonna select them all. I'm going to use uh, plugin. Okay? I'm gonna use the one called content reel.

I already had it open, which is command option P Ctrl Alt P  on a PC to open the last use plugin. I'm using content reel 'cause it's really handy. I'm gonna hit image and I'm going to say I would like  a bunch of photos apply to them all. And it's gonna say select the layer  and you're like, oh, I don't know how. All right, give that a go. So I'm gonna say this  layer, there we go.

Apply that one. Can I do multiple ones? Yep. Hold shift, shift and command. Kind of dig in and grab all of these. Now we can apply them all.

Excellent. Now we're talking. So I'm gonna preview this flow here. Ah, first problem. Okay, so you could go back to here and go to this option  and say actually let's copy the properties. Remember command option C and then control alt C on a pc.

I can say actually you under design have  another state of hover. And then I could go into this  and then paste that state,  which is those same two shortcuts plus V  and now it's gonna work. Ah, but I gonna scale that one now. Oh, okay. So we've caused ourselves, I dunno, we run into a dead end. I'm gonna show you a way to get round it.

Not so much like the official way,  but just bumping into problems and fixing them as we go. You might find that that original, um, option that we had  or just scaled up and down with one person is perfect. You scale each of them up. So what I want to do is I want something where, um,  when I update one image, they both update. Basically what we want is we want something inside of here  that is on both of these at the moment. These are two separate images.

We wanna make this a component  and have two instances of this. So that's gonna be the fix. So let's, let's hide you. I'm not sure we need you. What I wanna do is,  I'm just gonna double click on this,  drag out a version of it. Okay?

It's not an instance, it's not anything. I just kind of dragged it out. Um, 'cause I want the shape  and I'm gonna convert this into a component. I'm gonna rename it and I'm gonna call this one headshot. And then I'm gonna drag out an instance, copy it. And I'm gonna say U paste in place.

It's command option shift V, control alt shift V on bc. Oh man, shortcuts. I'm gonna do the same for this one so  that these are two instances linked  to the same, um, component. I don't need you. Okay? So two instances are the main component.

It's gonna be hopefully our work around when we update one. We update both. Let's see if that works. Okay, bit of trial and error. I select through them all. I'm gonna say open content reel images.

It's probably gonna say photos. Select the layer. Okay, I can do that. So command and shift. And I'm clicking all of these command shift,  that's control and shift on a pc. Okay?

Apply all. It's not liking it like it used to. Rah more problems because it can't dig into the  fill into our instance. What we can do though is instead of this just being,  remember I showed you this kinda  like two ways of adding images. You can be a fill or let's get rid of that. Okay?

It can be an image that sits inside of our frame. So let's bring in an image. So I'm gonna bring in artist,  I'm gonna bring in artist two now, okay,  I'm gonna hold down my shift key, okay? To make sure it's the right size or appropriate size. I'm gonna put it inside of this, okay? And the difference between this,  often when we're doing some complicated imagery stuff,  it's nice to have a frame with something actually tactile  inside that we can scale and move around and do stuff.

So let's see how this works. Now, first of all, let's see what's happening. Okay, nothing's happening. So is my hover working? It is, but there's just no difference between the two. So what I'm gonna do is I'm gonna go inside of this one,  inside of the headshot, okay?

And in this, there's an artist one. And can I just scale it? I said K. And because it's inside  of the instance, we can't scale it. Hmm, more trouble. Let's try the parent.

Let's go shift, enter. Okay, to grab the parent, maybe we could just scale that up. So the K tool you totally can. 1.05, it's a bit bigger. Let's see if it works. First of all, hover does not work.

Okay? So we've got you. That one goes  to there preview and it refresh. It's kind of working. Something's wrong with it. Not sure what.

All right. After looking at it a little while, I just uh,  close down Figma  and opened it back up and then it worked fine. That was weird. I'll even that in the course. 'cause there are times where you're like,  I just went back over and I was like, seems to be working  and I just had to close figment and open it back up. Kind of broke it.

Here we go. This is working. It's kind of outside of the scope of this. Okay, so how do we fix that? Okay, so can I clip it inside this parent? So I've got this hover.

So I've got my hover frame here. It's got a border around the outside. Let's clip it. Okay, here we go. Let's see if that works. And it kind of works.

You can see there's a bit  of ghosting that goes on. It's because there's not clipping on this one  and it's kind of trying to grow into this one. So it's kind of like clipped here, not clipped here. And as it grows, it kind of half clips and half snots. So both of them are clipped. Let's see.

Preview. Preview. All right, now we're working down the bottom there. Can you see the name? Depends on how you wanna do this. Do I want maybe this at the top down here?

Let's do it to this one. I'm gonna use my square bracket. Come all the way to the top. Break it. Oh it worked. Didn't, can you see there?

It kind of jumps back and forth. It doesn't like messing with layers. It likes the layers to be the same on both. So here, frame 37, which is a terrible name. Let's rename it. Okay, so my artist text block.

This one here also needs to be called artist text box. And they need to be in the same layer order. Can you see it needs to be above headshot. So that group matches that group. Here we go. Some more fiddling and fixing.

Alright, let's get it to fade in. 'cause I know there's probably gonna be a problem there too. Okay, so what we did in the past earlier on, actually,  let's just make sure that it,  these all update when I change it. That's another good point. So select all of these. Open up.

See my uh, plugin didn't open  'cause I closed down Figma and reopened it. Now my shortcut will work  after this needs to be opened up at least once. So now I'm gonna go images, I'm gonna click photos  and I'm gonna go apply all. And now it can actually access that uh, image  that's inside. We got a bit distracted, didn't we? So instead of it being a fill, we've gotta kind  of try and select everything.

Now there's actually that unit that's inside of the uh,  frame when I say unit, okay, I mean that over here. Okay? Remember it is not just a frame with a fill,  it is a frame with this image actually physically inside  of it, that little icon there. Okay? Remember we placed it  and kind of dragged it inside the frame. Now let's see if it works.

Aha, it's working. Missing a couple of images loaded now. Nice. So easy to update. They scale up a bit. Let's do the fade.

Okay, so I could go inside of this one here. Keep going inside and I can apply a fill. Let's see if that works. So an extra fill like we did  before, it's not working. Okay, so how do we do it? So it's on top of everything.

Let's, let's maybe work with the image, okay? And say image is gonna be the exposure down. Let's try that. Let's go here. Refresh. Okay, what it's done is it is broken it even more.

Okay? It can't do that transition between  or at the moment at least it can't do  that exposure transition between the two. It sees this as a different image  as this now 'cause we've made these changes. All right, we can live with more workarounds. How do we make that work? I've already had a think on this  and kind of run into the problem.

So I'm pretend thinking, okay? Uh, what I'm gonna do is add our frame. Actually I, I want the frame to be the same size as this. So what I end up doing is duplicating an instance,  breaking it apart, getting rid of the image on the inside,  giving a fill that I want. I'm gonna give mine black  at say 20%. Rename it.

I call it fade. And I'm gonna put this inside of this one. So they're on both. And then hopefully I can just go to you  and say, I've forgot the fade selected. I haven't, there's the fade. I'm gonna say the fade is set to 0%.

Is this gonna work? Fades there to start with and it goes away. Happy days. All right, let's just make sure  that we can now go and update it. So let's select them all. Remember we're trying  to make this uh, useful for our team  to use where they don't break it.

Let's see if they can just go through,  pick new images, male avatars. Now we can dig in and pick that layer, which is cool. Let's see if it works. Oh it does. Okay. The other thing we probably need to rename is  actually can we rename that instance?

So in here there's fade. There's this thing. Can we just give it another name? Let's call it image. So now when we go and update this,  it might be a little clearer  picking a different option every time. Yeah, I can just grab the image.

Nice preview. It works but it's fading in. Alright, and scaling up. And some of the last little bits to tidy this up will be  to go back to our component here, our component set. Okay? And let's go in and find artist's name.

So I'm gonna select on artist's name, okay? And we're gonna use component properties  'cause I want to be able to update all  the text in here easily. Both just typing it in  and hopefully use some of those plugins just  to kind of pre-populate them. So what I need to do is say artist name, okay? Find the content option in here. Okay?

Let's make a component property  and say I want the name to be artist name. It's gonna have a default value of artist's name. That's fine. Same with this one here. Okay? I'm going to say you have not artist's name.

I'm gonna create a new one. That's why they're  in two separate text box. We're gonna put in country. Excellent. So hopefully over here now I can select them more  and say, oh look I can change artist's name to Dan Scott  who lives in New Zealand,  actually from New Zealand who lives in Ireland. Let's test it.

It's broken. Okay? So we've only done it to one of the two instances, okay? So we've only done it to one of the two variants. Okay? They'll look the same but over here.

So if I click on artist's name,  can you see he's got this kind of like lozenge  terrible word, roundy, roundy rectangle thing. Okay? It's like a little tag to say that's applied. I've got a content of property. This one here, command or control. Click doesn't have it, but I've already got one made.

I can apply that. Same with you got a country. So now they should be tied together. Let's give a preview. Ah, look at that. Nice.

Alright team, we're doing it a little bit of a jump. I know, but I forgot to show you one of the cool parts is  that I can select all of these now  and say actually I'm gonna use a plugin. Okay? And I'm gonna say text. And because we added those component properties,  I can say let's put in people's name first and last. Okay, I'm gonna set apply to all.

And it says, which one do you wanna add to? I'm gonna add it to artist's name. Thank you very much. Look at that. They're all updated. I'm now Ralph Edwards.

Okay, I'm gonna go back. Another one is company, no country. Okay, there's all sorts of options in here. I'm gonna say apply to all which one Country of origin. Look at that. United Kingdom of Great Britain, man, they  wrote that the long way but something you have  to be ready for.

Super long names. It's always the  United Kingdom of Great Britain. It's just type uk. There we go. Problem solved. Alright, let's carry on with the video.

Just forgot to show you that  by the time we got to the end, let's carry on. Now I can move this to my master's component library,  update the library, and either future me  or the people that I am working with or for Can go. Can go option two, have a look at their library. Okay, mine's still here under page one,  but they can drag out this artist. They go and change the name the country  and now go and change the image. Okay?

Either using the plugin for random people,  let's test it, you working  or they can go and do it manually. Can't wait for there to be a component property for images. I imagine that'll be out soon. Keep an eye on that if it's not there already. If I wanna do it manually, okay,  I can normally command click  and just dive inside of something,  but at the moment I've got this fade that's in the way. So what we might do is lock it.

Okay, so I can command click this  to jump straight in and change the image. And that's a good point. Okay. Instead of doing it on the instance, can I unlock that? I'm gonna go to the main component, okay? Which is, in this case,  the fate is coming from the headshot, which is  inside the artist, which is then passed on to my instance.

I can say lock that, but I can't change  it when they're dragging out. Another instance they can command click  and they'll bypass the fade with a lock, okay? And get straight to the image and be able  to update it manually. Wow, I needs a little bit of cropping. Okay, and let's preview it. You look at that easy, reusable, took a little bit time  to make, but sometimes I make these, I dunno,  tutorials seem really easy.

Like I've got all the answers  and often there is a lot of kind of like trial  that test it, huh, that works. And then add a little bit more and now it doesn't work. We've got a cool fade imaging thing. We figured out a couple of ways of doing it. You might not have to go down this far for  what you're doing, but I feel like it's interesting to see,  I don't know, problems, resolutions, more problems,  more resolutions to something that kind  of works in the end, hopefully. Alright, that is it.

I'll see you in the next video.