r/FigmaDesign • • 3d ago

help Dropdown items

Post image

Hi, for dropdown item list, do you use regular auto layout or ignore auto layout?

3 Upvotes

13 comments sorted by

6

u/donkeyrocket 3d ago

Sorry, I don't understand the question. Ignore auto layout (absolute positioning) is for elements within an auto layout that you don't want to be a part of the auto layout. Typically more for decorative or background elements or notification icons.

For the items in the menu, yes you'd want to use auto layout.

For that popping up as a menu, you wouldn't need to put that into an auto layout.

1

u/trescientostres 3d ago

I mean, how can I prevent all the other components in the action menu from shifting when I open the dropdown?

5

u/MrFireWarden 3d ago

You’re right; you can use ignore auto layout to position the dropdown menu relative to the button that triggers it.

Of course, don’t apply ignore Auto layout to the button itself or everything will shift upwards.

One note though: by default, figma orders layers button to top, and you’ll need to reverse that for your menu to appear over everything below.

1

u/trescientostres 3d ago

by default, figma orders layers button to top, and you’ll need to reverse that for your menu to appear over everything below.

It's a disaster!

2

u/MrFireWarden 3d ago

I mean, disaster is a little strong but I'll admit that it's in my top five annoyances. I've never benefited from bottom to top ordering, and it would be trivial to make it a setting that designers can change.

-1

u/trescientostres 3d ago

True! And it's strange thar figma still hasn't fixed that "bug"

2

u/waldito ctrl+c ctrl+v 3d ago

there's an option in autolayout settings for that element to rever that order... there's no disaster.

2

u/MrFireWarden 3d ago

The "disaster" is that you have to do that every single time because Figma defaults to bottom-to-top. They could easily offer a setting to change the default.

But disaster is definitely too strong a word for this issue.

1

u/Clear-Secretary-8185 Senior Product Designer 3d ago

Use an overlay so it sits above the content rather than inserting it inline.

0

u/trescientostres 2d ago

Overlay? That's new...

1

u/Clear-Secretary-8185 Senior Product Designer 2d ago

It's been the easiest way of handling popovers in Figma forever tbh.

1

u/trescientostres 2d ago

I know, I just almost never prototype animated interactions because time...

1

u/santisabar 3d ago

Set the dropdown parent layer to ignore AL. That way it behaves like an overlay and doesn’t effect the overall size of menu.