Figma interactive components tutorial | Image zoom on hover | Hover animation in Figma
ฝัง
- เผยแพร่เมื่อ 7 ก.ย. 2024
- This figma tutorial will show you 3 great ways to create a zoom on image hover effect. See how to create it with an overlay, interactive component and Auto layout.
You can download the tutorial file from here -
drive.google.c...
(Download it to your computer, use the "import" button on figma home screen to import the file into you figma files)
If you are not so familiar with components and variants, please check out these figma tutorials that will teach you more about it -
• Figma tutorial: compon...
• Figma tutorial: compon...
For better knowledge on Auto layout, please check out this tutorial -
• Figma tutoria: Auto La...
#yarivbe
![Warhammer 40k: Space Marine 2 | เพื่อจักรพรรดิ ! [ตอนเดียวจบ]](http://i.ytimg.com/vi/4M0ckYMA4-U/mqdefault.jpg)
I learnt more from this video than my actual college classes, thank you so much!
Thank you so much Eva for this amazing feedback! I highly appreciate it and happy to know that 🙂✨
YOU ARE A LIFE-SAVER. THANK YOU FOR THIS VIDEO.
Thanks a lot for the amazing feedback! 💥 Happy to know i was the help you needed 🙂
Amazing! Thank you Yariv!
@@olgayakovleva9562
Your are most welcome and thank you for the great feedback Olga! I highly appreciate it 🙂🔥
Thank you so much!!! You've really helped me to solve a problem that I'd with the auto layout and that I couldn't find anywhere else.
In addition to the fact that you explain excellently (and that you speak so clearly).
New subscriber! Greetings from a Argentina :D
Thank you so much for this amazing feedback! I highly appreciate it and very glad to know the tutorial was helpful 🙂💥
Thanks for the greetings from Argentina! And of course thanks a lot for subscribing for the channel!
This really helped...I'm trying to use this effect with a beehive layout of hexagons...so when you hover over one, it expands and the surrounding hex's follow the expansion...so they move outwards in equal measurements around the shape that's been triggered. And then some text appears on the enlarged hex. Would love to know how to do this. Any tips?
Hi there. Glad to know it helped and thank for the great feedback! I really appreciate it 🙂
To your question -
I suggest you create an interactive component, having one variant with the main hexagon, text hidden, other hexagons below it, hidden of course. The second variant, hexagons are placed around it (if i understood the wanted result) and with the text on it (on the main one).
Create the interaction between these two variants.
I hope this helps - let me know if any further help needed.
Hi! Very useful video, thank you for sharing!
Just a quick question, after making the image component and wanting to change the image, on hover it goes back to the default one. I tried it with a color fill and later changing it but it doesn't work either, I don't know if you could lend me a hand?
Thanks!
Tanks you very much for your Helppp. It Works !!!
You are most welcome Maryam! I am very happy to know it helped 😊✌
Amazing. Loving style 2! Will try :)
Thanks a lot! Happy you liked it :) Thanks for the great feedback ⚡
@@YarivBE yes i've yet to try it. i'm new to Figma and had been using XD for a while :)
@@4988raja
Great to know :) I am familiar with XD, quiet a lot in the past and less now and aware of all the differences 🙂
As i am really stock to Figma since one month, i find continually sth as a question 🙋🏻♀️. I made a changeable images via component / after delay. Now I want to make each of this picture via a text clickable ( there is a word on the picture and this word it is supposed to be clickable and goes to another page / frame). Interaction between wird and next page doesn’t work 😩
Amazing! Thank you Yariv
Thanks a lot for the great feedback! I highly appreciate it! 🔥🙂
Thank You for this zoom wars!:)🤩
You are most welcome Marta! 🙂 Thanks a lot for you feedback! I love the zoom wars 😅
Great tutorial, Thank you!
Thanks a lot Shirel for this great feedback! I appreciate it a lot ✌⚡
You're an amazing teacher.
Thank you so much for the amazing feedback! I appreciate it a lot 💥✌
I had battled a design all day, only resolve it with your video..
@@timothyoluwasegun
I am so glad to know that! Not that you had a battle the whole day of course :) Very happy to know that video was the problem resolving one ✨😊 thanks again!!
Great videos Yariv, very cool and explicative for a Figma beginner as me 🤠... Thank you!
Thank you so much for the great feedback! I appreciate it and happy to know if was helpful ✌️🔥
Excelente clase !!!
Thanks a lot for the great feedback! I really appreciate it! 🙂🔥
oh it change the position i thought the fixed was on the constraint but it moves to the top frames
Exactly :) SOme things changed in the Figma UI as well, but the functionality didnt.
Constraints will be there when there is a top frame on any element, any vector or another inner frame. Hope that helps.
Thank You Man!
You are most welcome my friend! Thanks a lot for the great feedback - i appreciate it ✌️🙂
thank you!
You are most welcome Juliana! 🙂Thanks a lot for the feedback - i highly appreciate it ⚡
Great video, Yariv! Life saver!
I just have a small question that maybe you could help me out with:
I followed all the steps for the Autofit option (option 2). However, I get a slightly different animation to yours. Your individual animation (from the smaller image to the larger one) happens from the centre of the images. But, for some reason, mine moves in from below. Any idea how I could change this? Many thanks!
Thank a lot Silvia for your great feedback! I really appreciate it 🙂
To your question - a few things to make sure:
Check the alignment of the Auto layout the holds the images. Make sure that it's constrained to middle of the main frame (the screen) that holds it.
Go over it again and let me know if it helped. If it didn't, that feel free to write further and we will solve it - no worries 🙂 You are welcome!
@@YarivBE Thank you for your quick answer! I checked your indications and it all seemed correct. But it still didn't work. So, I started from zero again and repeated evertything the same, except that this time instead of making a rectangle with image fill, I made a frame with an image frame inside. And now it works! So all good!
@@SilviaJaunsolo
Happy to know it worked for you! I'm not 100% sure i fully understand what went wrong at he first time 🙂but of course the main thing is that you have success with it :) It is a rectangle in a frame, and thats the waty it should be built - defining fixed height for the auto layout is also part of the configuring for it. Good work! ✌
@@YarivBE Thanks!
@@SilviaJaunsolo You are most welcome!
You are amazing 🤗 thanksssss so much
You are so welcome 🙂 thanks for you amazing feedback! 🔥✌️
You has pronounced my Name correctly 😊👍🏻
Happy to know that! 🙂
Hey, thanks for the tutorial. But i'm having a problem, when i hover the image/component as you did in the tutorial above, the image changes... have any idea whats it could be?
Hi Igor and thanks a lot for your great feedback! I really appreciate it 🙂🔥
To your question - try to use just a rectangle shape instead of the image, on the component variants.
On the screen itself, use instances of this component and replace the fill of this rectangle in each one, with an image.
I guess that should do it. Please let me know if it did. If not - write to me and we will solve it 🙂
appreciate it
Thanks a lot for your feedback tori ⚡
Yariv great tutorial, my problem with option 2 is that when I hover from one image to another image it gives this abrupt opening and closing of the image, instead of smoothly closing one and opening another like it does when you hover from image to anything other than the next image. Any way to fix this? Hope you understood my question :)
Hi thee :) Thanks a lot for the great feedback! I highly appreciate it 🔥
Yes, i am aware of the fact that when moving the mouse (in option 2) form one image to the other, it makes a "harsh" jump between them, and closing the image in a hard way.
The reason for it is the hover effect stops immediately when the mouse go the next image.
I dont see any real solution for it, prototyping wise beside adding another variant to it (could work) which is another big state of the image, hovering will lead to the first one, "mouse leave" will lead to another big one which will lead to the first one in an "After delay" interaction - try it :)
In coding, of course, it can be done more easy in this case.
Hope that helps - let me know.
How can I make the image bigger without making the component bigger too?
Hi there :) If you don't make the image an interactive component, you can achieve that by interacting between two or more screens (depends on how many of them you want to show the interaction on). For example: you make the first screen with no bigger image, duplicate that screen and make one of the images bigger while hovering (or click if you want). I think the component works the best in this case - up to you of course :)
I hope i understood the question all the way - if not, explain to me 🙂
@@YarivBE i was talking about the 20:39 moment, i tried to resize just the image, but i couldn't do it without the component frame staying the same as it worked with you :)
@@rist0va Oh ok... now i get it :)
So, you need to make sure that you select the image itself - look at the layers panel and make sure of it, you can also select it directly form the layers panel as well, thats one thing, the second thing is, make sure the the clip content on the component is not checked, and of course you can do that only from the master component.
Otherwise, i see no reason why it shouldnt go :) Let me know if it helps?
Why hover doesn't work with autolayout for me? I do everything step by step in option 2 and when I add auto layout my images move as if they didn't have auto layout. The spacing is equal, but when I hover over the image, something similar happens to me at this minute 12:40 and when I try to change some options in the autolayout, nothing changes for me and the animation works exactly as before.
Hi there. In order to understand exactly what is the reason that it doesn't work for you, i need to see the file.
It's difficult to understand without seeing the configurations your did there, as there could be various reasons.
Can you share your file with me? I'll take a look 🙂
@@YarivBE Sure, how can I shere this for you?
@@bielin5148
Share to
yariv.be1@gmail.com
With a "can edit"
@@YarivBE I think I sent it. I worked on this in the frame IMG and Desktop 4
@@bielin5148
Ok. Great. Will see it hopefully tomorrow.
plz make video on how to merge the picture in figma
Hi there :) can you make it more precise - what exactly with the images? You mean in general, how to bring images into figma?
@@YarivBE sir How to merge two pictures in figma
@@distractMotivation
I still don't think i really understand :)
Do you mean to place two images together in the same frame? Blend one image with the other? Please help me to understand my friend 🙂
@@YarivBE yes
@@distractMotivation
Ok - i'll make a tutorial about all you can do with images in figma :)
why there is no fix on my constraint wtf
Honestly. I don't know how to thank you.
Dear Yariv is it possible to connenct one Variert from one Componnent (for example componnent A) to the another variert from another Componnent (for example componnet B) ? varients are not as a Frame. They are only a variiert from Default Componnet.
Dear Maryam - Its not possible to connect / create interactions between variants in different components. Meaning, if i want to create some interaction between these variants from different components, i can do that by placing then in another component that has them both inside him :) Thats nesting components. Is my answer understandable?
@@YarivBE yes US understandable. Thank you very much. I should try it now ! 😉
@@maryamabaee332 Ok - great 😃
Happy to help and hope it works :)
bro can you plese share the figma link of this components
Yes of course. No prob my friend 🙂
Will add it to the description.
Download the .fig file and drop it on the figma home screen. You can also use the "import" button.
Done :)
@@YarivBE thankssssss a lotttttttttt bro you save my timee
@@not_your_meher
Your are most welcome my friend!
Is there any possibility to send you a video ( max 1 minute)?
Hi Maryam :) Yes, you can send me a video to yariv.be1@gmail.com
Let me see exactly an example to your question and i'll tell you the solution for it - hopefully that its doable 😊send me and let me see.
Does somebody know how to do an auto layout in Adobe xd ? 14:37
Hi there.
In Adobe Xd there is "Stack" behavior for groups. It has a bit of the Auto layout behavior, which can cover some cases.
Its far away from being efficient as the Auto layout in Figma, but maybe it will do the job in some specific cases.
Hope that helps 🙂
Thank you
I've tried stack but it only works in design mode but not in prototype mode. Can you help me with it ?
@@ingridnkouta3262
Hi there :) Well, i can try...
Send me the file to yariv.be1@gmail.com, i'll see what if it can be resolved 🙂
14:00