Skip to main content

Hello! I’m trying to make a button that will open a flyout, which contains accordion menu components.


Firstly, I’m having issues with instances of components functioning. In the pictures below, the Master is on top, and the Instance is on bottom. When operating the instance via the master, it will operate fine. But, when I operate the instance via itself, it does not behave like the master.


Screenshot (156)


Additionally, when I operate the instance, it shrinks the blue interaction area of the Distance component, no matter its position (on top or on bottom of the stack). This issue does not occur in the Master, either.


Lastly, when I wire the component variants up, it will always expand to the right, even if in the master variant, it expands left. This is going on the right side of the screen, so I am trying to get it to expand to the left. Any tips regarding this?


Any feedback whatsoever would be greatly appreciated. This has been stumping me for hours, and videos don’t seem to offer any sort of help. Thank you ahead of time!

Here is the photo of how the master interacts, compared with the image in the first post.

Screenshot (155)

Here is the image of the blue interaction area of the Distance component being shrunken when expanded. This only occurs when interacting with the instance of the component.


Screenshot (154)

Hello,


Thanks for sharing this! It seems like your prototype includes nested instances, but is that correct? If I understand correctly, this is a feature limitation where changing variants or swapping instances in nested instances doesn’t update their sizes according to the new selections. But there’s a workaround for this. You can enable auto layout on each variant of your components, which should allow the nested instances to resize correctly. If you’re okay with sharing the file link, I may be able to take a look and help you implement this workaround if needed.


Thanks,

Toku

That sounds like that could be it, since the instance will work properly if I detach it from the master. Here is the link to the file:


https://www.figma.com/file/9dKLupLJEgSElP3zehUW4H/Untitled?type=design&node-id=0%3A1&mode=design&t=MeSi2Flv1qRp3xPQ-1.


Thank you!


Traeton

Hi there,


Thanks for sharing the link! I tried to look at the file and it looks like it’s working correctly now. I added my comment in red.


I hope this helps but if the problem persists, please feel free to let me know!


Thanks,

Toku

Reply


Terms & ConditionsCookie settings