Variables menu to support display long variable names

We are transferring design token names to variables in Figma.

Token names are by necessity quite long (they cannot be shortened without losing meaning).

Examples:

dimension-action-padding-vertical-with-label-l
dimension-action-padding-horizontal-with-label-l
dimension-action-padding-gap-with-label-l

When I click into an input field eg. auto-layout/vertical spacing I cannot differentiate the variable names in the list because the window is not rescalable. See image.

I need to be able to see the full names. Preferably immediately without needing to hover over each item in the list.

Thanks keep up the exciting work on variables guys and girls!

3 Likes

I fully agree. We always need to be able to see the full names of our variables and modes.

I’m at the point with several variable sets where I’m trying to decide the least terrible way to shorten the names of variables, just so we can tell them apart in selection menus in the Figma interface. Parts of words are bad, while acronyms and single letters are tied for worst. We shouldn’t even be considering this.

2 Likes

Hi

I’m using the desktop app. When I list the variables to assign one to a property in the right panel in design mode, there is a problem to see the variable names. If the variable name is long, and/or the default value is long, it is really hard to guess what is what.

Unfortunately when hovering over the variable name do not show me the full text.

Same issue, when using variables in the prototype interactions. For example using the Set variable action. In the drop-down, you can not see the variable names well.

The best way would be some dynamically wider drop-down, and see the variable names in full size, but at least the on hover display also would help.

2 Likes

Thanks for the feedback, @Almas_Robert!

We’ll pass this feedback onto the team for consideration.

2 Likes

+1, being able to expand names both on the variables window and when selecting variables is pretty critical.

2 Likes

This comes back to the issue with the entire right panel being fixed-width, but having much more features in it now. The same truncation issue comes up with component variant property names and their values.

1 Like