Variables menu to support display long variable names

[Neil7]

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!

[Hoby-Van-Hoose]

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.

[Almas_Robert]

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.

[dvaliao]

Thanks for the feedback, @Almas_Robert!

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

[Guy_Lepage]

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

[kmh]

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.

[Dan_C]

Any update on this - major ui bug and should fixed asap considering this is app is largely for deigning UI.

[Katrina2]

We’re working on component tokens in our team and variables can become quite long.

It is really hard to pick the right variable, when you can’t see the part of the name, which is differentiating them.

I don’t know why the left side panel with layers is flexible in size. But every panel or menu on the right side is fixed in size, cutting things off. I’m stumbling upon this issue regularly and find it really annoying.

[9136]

Interferes. To begin with, at least add a way to see the full name on hover.

[Peter_Muller]

+1, at least full name on hover, but even better resizable table columns or panels

[Neil7]

We finally implemented our tokens in Figma.

We used folders for naming which worked much better than long names and is more intuitive and similar to ‘old-school’ Figma styles

eg. Token Name:
CODE
sys.color.action.basic.default

FIGMA VARIABLE
SYSTEM >
color/action/basic/default

Figma still has not fixed the issue but I believe we found a better way for designers to understand.

[Katrina2]

With the latest Figma update, the right side panel can now be adjusted in its width. Which is nice It would still be great, if the width could be increased even further. Long component token names are still being cropped.

But worse: The window for searching variables (screenshot left side) is by far too small. The part of the token name, which differentiates the tokens from another, is being cropped. It’s a guessing game which component token to pick.

Please Figma, improve the search for long variable names.