Dropdown menu component - a try

[romuald]

Hi there.
I’m trying to figure out how I can design a dropdown menu component which is not affected by the layers stacking order.

Actually, my design system is a kind of a lot of Russian dolls, with component instance customization everywhere.

I’ve created a little sandbox file to demonstrate what’s possible, it’s here:

Figma

The stacking order indicator is made by the red rectangle.

On the left, a dropdown menu which is affected by the layer stacking order, but has some advantages : auto-layout can adjust the menu width…convenient.

On the right: the same dropdown menu but this one is not affected by the stacking order. Nice but some problems:

• the overlay is not managed by the same auto-layout of the selector, so difficult to make its width easily affected
• Look at the position of the overlay in the prototype interaction → totally impossible to figure out how to set the position of the overlay…or there is something I didn’t catch

Feel free to comment, share your thoughts, ideas, etc.
Thanks.

[Nate_G]

@romuald Check out this discussion, as it may have some info around responsive drop downs and stacking that may help.

Absolute Position with Horizontal Fill

@Kevin_Mitchell Set the master dropdown component’s height to the height of the dropdown field, then when you expand the dropdown’s options in an auto layout it will not push other elements down. But you’ll want to make sure that canvas stacking is set to “first on top”, that way the dropdown options will appear above the other elements in the auto-layout versus below (see video example). Hope that helps!

[romuald]

Thanks @Nate_G. But that doesn’t fix the problem when your design is made of several stages of nested components.

It works in this particular case because you explicitely specify the stacking order. So, in a industrial way of design (=I can take a dropdown component and put it here and it works), it’s not a magic solution.

But your clever way of setting the height gives me some hints to experiment some ideas. Many thanks!

[Pavlo_Kiselov]

The best way to make a prototype is to have dropdown overlay and dropdown trigger components separated and connect them with “Open Overlay” interaction. To avoid repetitive work you can wrap it into a temporary local component to be used for prototyping purposes

And then you simply overlay this box however you like

[romuald]

Thanks that’s what I did in the file here above. It works, but check it out, you’ll see there is an issue about the overlay positioning, plus the overlay can’t shrink or expand depending on the auto layout, right?

[Pavlo_Kiselov]

Don’t see any overlay interaction really. All instances have absolutely positioned dropdown menu inside.

[Pavlo_Kiselov]

Alright, here is what I made

Now I can put this small block on top of any element I want to have normal overlay interaction. It is always on top of everything you have, you can close it by clicking outside, it’s neat!

Figma

[romuald]

Nice. Thanks.

So you set up the interaction at the prototype level and not at the component level. It works, but:

• As it is an overlay interaction, it doesn’t take the width of the selector, you’ve to manually adjust it
• And as it is at the prototype level and not the component itself, you’ve to set this up for each prototype.

Right?

I wonder if I’m not asking too much . I think we definitely face some Figma limitations here.

[Pavlo_Kiselov]

There are two ways to do it.

Pair both the trigger and the overlay into a single component and and you will get auto-width behaviour. There are two serious drawbacks. You will not be able to close the overlay when clicking somewhere else and you would have to constantly fight overlapping issue.

Other way is to decouple trigger and the overlay and use “Open Overlay” interaction which will enable close on click outside and no overlapping issue. However the size of the overlay to be adjusted manually. For me it’s not a big deal. You can have your overlay as a component instance that you can duplicate as many times as you need to have various sizes available.

Setting up is not an issue as you still need to customize your menu for each different dropdown type you have.

[romuald]

Thanks.

Pair both the trigger and the overlay into a single component and and you will get auto-width behaviour. There are two serious drawbacks. You will not be able to close the overlay when clicking somewhere else and you would have to constantly fight overlapping issue.

Yes, that is the left case in my example file.

Other way is to decouple trigger and the overlay and use “Open Overlay” interaction which will enable close on click outside and no overlapping issue. However the size of the overlay to be adjusted manually. For me it’s not a big deal. You can have your overlay as a component instance that you can duplicate as many times as you need to have various sizes available.

Yep, and that’s my second try.

The main issue I see here is it works with a prototype and not with component interactions…more precisely, it works with component interactions, but it’s nearly impossible to define the position of the dropdown.

Thanks again for your messages. I’ll live with these limitations and try to get the most of the overlay solution which seems the most interesting.

[Pavlo_Kiselov]

Frankly, your second try is being far from ideal. There is definitely better way of doing it, I’d reconsider completely as the result is rather poor

[romuald]

Yes I know.

But you’re right, considering the current Figma capabilities, the best way is to use an overlay and setup the interactions at the prototype level, not on the component itself.

[Lucas_R]

Hi my way of making interactive dropdown components is to use the position absolute option inside the component for the list element and the swap instance option for the ability to dynamically swap lists. So i don’t need overlay option because all the interaction takes place inside my component.

To avoid overlapping elements it is worth changing the Canvas stacking options to “first on top” for the autolayout parent.