Skip to main content

Hello everyone,


I wanted to try recreating the Youtube video thumbnails interactions for practice. I was wondering if there was a way to just create 1 master component for the thumbnail default and “hover” state for the GIF effect? I managed to do it as shown in the “intended final result” video but I had to create multiple component sets for different videos. (By the way, I didn’t actually use “while hovering” but “mouse enter/leave” interaction instead for the added delay effect)





Then I tried to do it with 1 video type for the master component and manually changed the instance for different videos, this is what I was going for so that I don’t have to create multiple videos in my master component set like in the “intended final result” video but alas it only works for the default state, when it switches to the “hover” state the GIF uses the original master component video instead as shown in the next video.





Any insight would be highly appreciated, thank you for your time.

This is one of those situations where you wish Figma behaved the way you think, but it those behave differently.


In this case when you override the hover state and go back to default state, Figma will completelly forgot about it, even tho if you switch states manually you will see the overriden content perfectly.


Makes sense? not much.


A close approach is to have both images “default and hover” present in both states, and set a switch to display / hide the hover state.

Then when you paste a clean instance, you override the front image (gray) and then make appear the hover image and override it aswell. Then you go back to hide the hover image, and you good to go.


The prototype:

Figma – 19 Oct 23

Wow, that is an amazing technique. I managed to recreate it with the same steps except using gif and mouse enter/leave interaction. How do you people come up with these haha


It’s a shame you can’t just switch the image by changing states manually though, probably would’ve saved much more time that way.


Thank you, this will definitely save me from cluttered master components.

Reply


Terms & ConditionsCookie settings