Figma interactive components tutorial | Image zoom on hover | Hover animation in Figma 

Thanks a lot for the amazing feedback! 💥 Happy to know i was the help you needed 🙂

Thank you so much Eva for this amazing feedback! I highly appreciate it and happy to know that 🙂✨

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!

Thank you so much for the great feedback! I appreciate it and happy to know if was helpful ✌️🔥

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 🙂

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!!

You are most welcome Marta! 🙂 Thanks a lot for you feedback! I love the zoom wars 😅

Thanks a lot Shirel for this great feedback! I appreciate it a lot ✌⚡

Thanks a lot for the great feedback! I highly appreciate it! 🔥🙂

You are most welcome Maryam! I am very happy to know it helped 😊✌

Thanks a lot for the great feedback! I really appreciate it! 🙂🔥

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.

You are so welcome 🙂 thanks for you amazing feedback! 🔥✌️

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.

You are most welcome my friend! Thanks a lot for the great feedback - i appreciate it ✌️🙂

You are most welcome Juliana! 🙂Thanks a lot for the feedback - i highly appreciate it ⚡

Happy to know that! 🙂

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!

Thanks a lot for your feedback tori ⚡

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 🙂

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?

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.

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.

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 :)

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 :)

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!

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.

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 🙂