Note: If you have a different UI than in the course, you can change it back by clicking the '?' in the bottom right corner of Figma and select 'Go back to previous UI'. Happy Figma'ing!

How to create a hover grow effect for images in Figma

This lesson is exclusive to members

Course contents

Questions

1
1
1
5
1
0
0
2
4

Course info

177 lessons / 16 hours 46 quiz questions 21 projects Certificate of achievement

Overview

Hi there, aspiring Figma enthusiasts! Are you ready to embark on an exhilarating journey with me, Dan Scott, as we unlock the full potential of our Figma skills in the dazzling realm of UX/UI Design using Figma Advanced?

Try Figma for free by clicking here.

This course is tailor-made for those who have already mastered the fundamental principles of UI/UX Design using Figma. If you've triumphed over my Figma Essentials course or have a sneaking suspicion that there's a treasure trove of unexplored tools, tips, workflows, and updates awaiting your discovery, then look no further! This course is your golden ticket to taking your UI/UX prowess to the next level.

Together, we'll start by delving into the depths of multilevel nested autolayouts, and unravel the secrets used by UX professionals by learning:
- Workflow techniques, managing design assets, styles, components, grid and column layouts like true virtuosos.
- Learn how to use Variables and put them to work creating even more complete prototypes.
- Use variables to make Light & Dark Modes + Compact & Comfortable spacing versions of your components. 
- You’ll then take your new knowledge of variables to understand and create your own Design Tokens. 
  • - Unleashing the magic of advanced animation techniques, captivating users with animated background gradients and Houdini Text.
  • - Harness the power of Lottie animation files, breathing life into your designs.
  • - Crafting responsive elements that effortlessly adapt to any device, proving your design prowess knows no bounds.
  • - Unleashing the full potential of powerful images & video masking techniques, amplifying the visual impact of your creations.
  • - Mastering advanced typography features, transforming words into captivating works of art.
  • - Embracing the realm of AI, infusing your process with its genius to elevate your skills as a UX designer.
  • - Elevate your prototyping game, conducting user tests with finesse using advanced techniques.
  • - Unveiling sticky scroll buttons that stack, animated anchor points and booleans, and a host of other captivating effects.
  • - Creating enchanting dropdown menus, hover grow effects for images, and expanding search bars.
  • - Discovering the right accessibility tools & techniques, ensuring inclusivity and usability for all users.
  • - Becoming a variant boss, expertly taming unwieldy variants to just 1 or 2.
  • - Unveiling the secrets of seamless collaboration with designers, developers, and stakeholders.
  • - Mastering the art of exporting production-ready assets, bringing your designs to life beyond the realm of Figma.
  • - Unearthing professional workflow tricks & shortcuts, saving you precious time and skyrocketing your efficiency.
  • - Plus much more exciting advanced Figma goodness along the way!

As you journey through this course, you'll acquire the skills wielded by UX professionals, gaining a profound understanding of the UX Design industry. From concept to a highly polished finish, you'll confidently manage your own UX projects ideal for your portfolio.

Throughout the course, I'll assign assignments and projects that nurture your skills and empower you to create your very own unique UX design masterpiece for your portfolio. Don’t worry if this all seems overwhelmingly advanced right now, because the BYOL crew stands ready to support and guide you, ensuring your questions get answered.

It's time to embrace the call to upgrade yourself and transcend from being a good UX Designer to a bona fide Figma UX Superhero! Unlock your potential, save the day, and let your design prowess soar!

Requirements:

- A copy of Figma (a free plan is available on the Figma website).
  • - Basic knowledge of Figma is required. I recommend watching my Figma Essentials course prior to embarking on this epic adventure.

Who this course is for:

  • - UX/UI adventurers who already have a basic understanding of Figma.
  • - Self-taught Figma enthusiasts yearning for structured guidance.
  • - Graduates of my Figma Essentials Course, hungry for more knowledge and skills.
  • - Visionaries who have developed their own unique Figma approach but crave exploration of the vast universe of tools, updates, and time-saving techniques.

What you'll learn:

  • - Diving deep into multi level nested autolayouts. 
  • - Robust components that are easy to update and hard to break. 
  • - Component properties. 
- Variables
- Design Tokens
- Advanced Prototyping using Variables
  • - Learn Workflow tips and tricks for managing your design assets, styles, components, grid and column layouts.
  • - Advanced animation techniques
  • - Animated Background gradients. 
  • - Houdini Text
  • - Animate along a path in Figma
  • - How to add Lottie animation files in Figma
  • - Build responsive elements ready for any device size.
  • - The best shortcuts & plugins to make you a more efficient UX designer.
  • - Absolute Positioning of Autolayouts. 
  • - Powerful images & video masking techniques. 
  • - Advanced typography features. 
  • - Learn to use AI in your process to make you a better UX designer. 
  • - Advanced prototyping techniques to level up your user tests. 
  • - Make prototypes better and faster using tricks & shortcuts. 
  • - Sticky scroll buttons that stack. 
  • - Video playback controls. 
  • - Animated anchor points and booleans.
  • - Create a Dropdown menu
  • - Create a hover grow effect for images.
  • - Create and expanding Search Bar 
  • - Learn the right accessibility tools & techniques  
  • - Become a variant boss. Cutting down those 100 variants to just 1 or 2. 
  • - Learn the best ways to work with other designers, developers and stakeholders. 
  • - Build a UX project from beginning to end ready for your portfolio.
  • - Export production ready assets.
  • - Learn professional workflow tricks & shortcuts.
  • - Forum support from me and the rest of the BYOL crew.
  • - All the techniques used by UX professionals
  • - 160 videos of detailed Figma Advanced Content.
Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Certificates

We’re awarding certificates for this course!

Check out the How to earn your certificate video for instructions on how to earn yours and click the available certificate levels below for more information.

How to earn your certificate

Work your way towards your certificate for this course by following these simple steps.

  • Watch the course videos
  • Complete the Class Projects - look out for the videos marked with
  • Upload your class projects into the My Projects area in your account
  • Complete and pass the Knowledge Quiz (Merit level courses only)
  • Complete the Distinction Certificate Project (Distinction level courses only) - look out for the video marked with
  • Upload your Distinction project to the My Projects area in your account
  • Request your certificate when you've completed the requirements for the certificate level you're working towards

Good luck!

Pass certificates

We’re awarding ‘Pass’ level certificates for this course.

You can work your way towards your ‘Pass’ certificate by following these simple steps.

  • Watch the course videos
  • Complete the Class Projects - look out for the videos marked with
  • Upload your class projects into the My Projects area in your account
  • Don’t forget to request your certificate when all your projects are complete

Good luck!

Merit certificates

We’re awarding ‘Merit’ level certificates for this course.

You can work your way towards your ‘Merit’ certificate by following these simple steps.

  • Watch the course videos
  • Complete the Class Projects - look out for the videos marked with
  • Upload your class projects into the My Projects area in your account
  • Complete and pass the Knowledge Quiz
  • Don’t forget to request your certificate when you have passed the quiz and completed all your projects

Good luck!

Distinction certificates

We're awarding 'Distinction' level certificates for this course.

You can work your way towards your 'Distinction' certificate by following these simple steps.

  • Watch the course videos
  • Complete the Class Projects - look out for the videos marked with
  • Upload your class projects into the My Projects area in your account
  • Complete and pass the Knowledge Quiz
  • Complete the Distinction Certificate Project - look out for the video marked with
  • Upload your Distinction project to the My Projects area in your account
  • Don't forget to request your certificate when you have passed the quiz and completed all your projects

Good luck!

Downloads & Exercise files

Transcript

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.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025