Need prototype help - scaling image card not working as a nested component

Hello, nobody can give me any hints? 😦

Hey Jos, can you provide a link to the file with view access? I’d be interested in inspecting how your components are set up.

Hello,

Thanks for replying. Here you go. The slider is a bit glitchy as well, not sure what I did wrong. I did exactly how YT tutorials showed.

Hi I have put the link in the comment. Lmk if you could give me some hints. Thanks!

Hey Jos, thanks for your patience. Thanks for sharing your file! I can’t pin down exactly what’s causing this behavior, but I tried re-creating your carousel myself to see if I could at least duplicate the problem. Strangely, I couldn’t find a reason why your set up shouldn’t work!

I even tried a different method of handling the carousel content by turning it into it’s own component.

Here’s a view-access link to the Figma file I made, and the prototype I used to test both methods.

Here’s a GIF to demonstrate (please dismiss the behavior of the chevron icon on Carousel 2). The only issue is that sometimes the hover effect just fades from one state to the next (a “dissolve” sort of effect) rather than using Smart Animate to gradually change size and darken the fill. You can see this happen on tile 2 and tile 3 on Carousel 1 at the beginning of this GIF. But after this dissolve-like transition happens, it then seems to fix itself and use Smart Animate again…

Something else I’ve noticed is the hover state sometimes gets stuck in the prototype. I have no clue what causes this. It might be caused by testing interactions and rapidly resetting? Somewhere along the way Figma seems to wig out. I’m not sure though. And you can see in the GIF below that the tiles in the carousel do eventually go back to their default state after a few seconds.

The only fix I have for when this happens is to close the prototyping tab and then re-open it.

I suspect this might be buggy behavior and would recommend filing a bug report.

Hi Alice, thanks so much for the demo. I am a bit confused…what’s the difference in your set up in Carousel 1 and Carousel 2? Since I’m only in view mode, I can’t really see how you construct the component. Funny enough, your nested component of scaling the card within the carousel slider component seem to work!

I am quite new in Figma perhaps there are a lot of things I don’t know yet.

I still can’t pin point my file setup problem so the only work around I have now is to set each slider in different frame. Not ideal but at least for now it’s working.

Yeah, happy to explain! The difference between Carousel 1 and 2 is that Carousel 1 uses a component to control the order of the content, and Carousel 2 does not. Here’s a GIF to demonstrate:

You can see that when I re-order tiles in Carousel 2 I’d have to select all of the blue tiles to move them, but since I’m controlling the tile order with a component for Carousel 1 I can manage that through the component named Jos / Slider order. It’s worth noting this seems to make no difference on whether the effect we’re trying to achieve in the prototype works 😅 I just wanted to try another way of managing the carousel content.

Here’s a link to the community file so you can grab an editable copy for yourself!

If you end up submitting a bug report to Figma I’d be super interested in hearing what they uncover!