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.