Component variant value dropdown option lists too narrow

When choosing a variant of a component, the dropdowns could take up more space than they do. In many cases, the full variant values aren’t displayed. The attached screenshot shows a case when several options are not distinguishable, because their first halves are the same. I would suggest that you let the dropdown option lists adjust their width based on the option values instead of limited to the space the original input takes.

It would also be great if the list was sorted by name.

Skärmavbild 2021-06-11 kl. 08.30.40

7 Likes

Currently, the variant selection dropdown truncates at ~17 characters. If you have a moderately-lengthy variant naming structure, this becomes a major barrier to your workflow.

The dropdown should be extended from the right side of the page to at least the edge of the right-sidebar if not further.

1 Like

After setting up a component with variants, if you’ve used long descriptions, you’ll see that the dropdown list opens partly off-screen so the text cannot be read.

Using longer descriptions is sometimes unavoidable and abbreviating them is not always ideal. It would be great if this could be adjusted in future updates.

The variant name truncates after ten! It’s painful.

1 Like

Screen Shot 2022-02-02 at 3.36.54 PM

Sometimes the names have to be a bit longer and the way the box open is usually weird and too small. Would love to have the possibility to either have a bigger box or the ability to detach it and move it somewhere else.

I echo this sentiment

Screenshot 2022-02-18 at 11.52.14

I think it would be great if with longer naming the tooltip in components variation would expand for me to see the whole name of the variant. Right now it crops out outside of the monitor which is not helpful much.

Hello, I also have problem with too narrow dropdown for variants. I cant’ see their names. And no - they variants aren’t use for icons. Those are just different states of certain component. Could Figma please do anything with narrow dropdown?

Yeah, I hope this going to be fixed soon. Very frustrating behaviour :sob:

1 Like

Wish I could update this thousands of times – this is the biggest gripe I have with Figma at the moment. They designed all of their panels for a fixed-width, which just isn’t how design tools should work.

3 Likes

This one is painful. Particularly because there is plenty of room for the names to display. It’s just got an arbitrary limit placed on the width for some reason.

2 Likes

Agreed. It would be great to be able to widen the right panel, the same way the left panel can be widened.

1 Like

Yep this is killing me.

1 Like

New user here. I’m having the same issue.

At least give us the ability to discover the full text behind the truncated options. A tooltip showing the full text would be one way. Expanding the width of the tooltip would be another. I.d.k. but at least do something.

Also agree - would be great to see this updated.

How is this still not fixed? There’s whole screen width of space to the left of this floating dropdown. But instead of left, it tries to extend to the right, clashes with screen edge, and truncates? This bug/feature is hilariously stupid, annoying and super simple to fix. :slight_smile:

Yep! This is still a thing, @Figma_Team please, fix this! :pray:
Just make a dropdown wider :pray: please please pretty please!
If you feel adventurous – add a content “crawl” on hover for each item (see apple music for example)
:arrow_up::arrow_up::arrow_up::pray:

2 Likes

Adding another voice… I’d like to be able to use more descriptive variant names but the menu is just too narrow!
Help, @Figma_Team!
image

Odd and frustrating that this is not fixed yet, especially as this topic has been open for over a year. @Figma_Team please please please fix this.

1 Like

Would really appreciate this being fixed too.

1 Like