Hi, I’m quite new to Figma and I have a question. I’ve made a zoom in picture component for products but anyone know a better way to do without making every single component for each product? Whenever I change other product’s images it always zoom back to the original image while hovering.
Solved
Zoom In Picture Component
Best answer by iago
You're using the the image propriety (fill x crop) to make the growing effect. Instead, wrap the image in a frame (cmd + option + G), set it to "clip content" and the image constraints to scale. Make sure to do it in both component states and that the frame has the same name on both.
Lastly, change the size of the image on your hover variant. For change the image on the instances, do as shown in the video I've shared.
Hi. Can you share a screenshots of your main component and its variants or provide a link to your file? If the original image goes back while hovering, often there is a problem in structure or layer naming in the main component.
1 person likes this
I think this may help you. Create the variants of the component (default and hover) and change the image on each instance
Nellya wrote:
Hi. Can you share a screenshots of your main component and its variants or provide a link to your file? If the original image goes back while hovering, often there is a problem in structure or layer naming in the main component.
Hi! Thanks for the reply, here’s a link of my prototype and I hope you’ll help me on figuring out this problem. Thanks a ton!
Prototype
You're using the the image propriety (fill x crop) to make the growing effect. Instead, wrap the image in a frame (cmd + option + G), set it to "clip content" and the image constraints to scale. Make sure to do it in both component states and that the frame has the same name on both.
Lastly, change the size of the image on your hover variant. For change the image on the instances, do as shown in the video I've shared.
1 person likes this
iago wrote:
You're using the the image propriety (fill x crop) to make the growing effect. Instead, wrap the image in a frame (cmd + option + G), set it to "clip content" and the image constraints to scale. Make sure to do it in both component states and that the frame has the same name on both.
Lastly, change the size of the image on your hover variant. For change the image on the instances, do as shown in the video I've shared.
omg i did it thank you so much, you’re a life saver!!!
For future reference:
Reply
Rich Text Editor, editor1
Editor toolbars
Press ALT 0 for help
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.