Quality of Life Improvements for Variables

I feel like I’m missing something here, because it’s so difficult to do this.
The scenario is I’m working with an element in my design system, the color for which is set by a local variable. It’s relatively easy to reassign the element to a different variable (including a nifty search box in the Fill dropdown), but if I want to keep the variable but redefine it, that’s another story.
Right now, I open up the Local Variables and then I have to scroll and scan manually to locate it. Yes, organizing them into sections helps, but I have a lot of variables already.
It seems to me there should be a way to search for a variable by name - or better yet, jump directly to it from the element that it’s assigned to.
Overall, I’m hoping for better support for local variables. I jumped on that bandwagon because we were updating the entire design system with a new brand, and the way it was announced it seemed like a better way (and the future for Figma). But it’s been months, and the implementation is still a bit clunky (i.e. no searching or sorting).

I second the need to calculate variable values based on other variables, without needing to interact with a prototype, i.e., set a variable to an expression rather than a fixed value.

This applies to both numerical values (e.g., “baseUnit + (0.2 * baseUnit)”) and to text variables (e.g., “The file named '” + fileName + “’ has failed to upload. Please try again or choose a different file to upload.”)

Related to that, it’d be great to be able to use text variables inline with other text.

If i make master variant and make interactions in it, and then will put it in autolayout, interactions from master variant set will work after double click because of nested character of master, i though that i can change it by making them variables and just change modes, but even in this way it give me opportunity to make 4 modes… what if i have to do menu? and components there will be from one master, with the same behavior? with modes i cant make even menu. This makes variables and modes useless

To be honest, the variables panel is a pain to work with. I’m handling theme colors and localization, and it is hard to work with such a big panel or scroll through it.

It would be great if the panel could be a detachable window so I can move to my second monitor, make it bigger, and not be ON TOP of my design. Or even the possibility of sharing a link to the variables panel.

Hi there,

I wanted to express my appreciation for the introduction of variables in Figma, as it’s a valuable addition to the platform. However, I’ve noticed a few crucial features that seem to be missing, and their absence is limiting the usefulness of this feature. I believe addressing these aspects would significantly enhance the overall experience.

1. Collection Re-ordering:
   It would be great to have the ability to reorder collections. This feature would provide more flexibility in organizing and managing variables.

2. Color Token Enhancements:
   I propose adding a feature that allows the combination of multiple colors with transparency control for color tokens. This could be especially useful for both normal variables and reference variables from other collections.

3. Export & Import as .json
   The ability to export and import variables ( including modes ) as .json files would streamline collaboration and allow for easier sharing and version control.

I believe implementing these features would significantly improve the functionality and versatility of the variables feature in Figma. Thank you for considering these suggestions, and I look forward to seeing further enhancements in future updates.

you can do different modes for master variants as variables with same behavior, not by changing modes, cause it is only 4 modes, but if i make different names for instances

For our color system, I have well over 200 semantic color variables organized into nested groups (four or five levels deep in some places) in our primary collection.

Being able to expand and collapse variable groups is hugely useful when working in the variables panel (to hide those I don’t care about at the moment and more sanely drill in on the ones that do), but I also find it really annoying that the expanded and collapsed states don‘t persist when I close the panel out and reopen it.

Additionally, I would love to be able to collapse and expand multiple nested levels of variables with a single click + modifier key, as we can do when expanding and collapsing layers.

When selecting a color variable to apply to an object, the square swatch previews that appear in the color library picker reflect the mode of the selected object. This is very helpful.

When aliasing a color variable in the variables panel, though, the square swatch previews in the color library picker are based on the default mode rather than the mode in which the variable is being created. This can get confusing.

Copying and pasting variable value assignments (especially copying and pasting multiple values at once) would be a huge time-saver.

It would help with any number of use cases that currently require repetitive manual value assignments, but one particular situation I’ve run into multiple times now is adding new variables and having to set their values individually across existing modes.

As a simplified but concrete example: Let’s say I have a color scale with different color definitions across three modes and want to add a set of semantic variables that alias to individual steps in that scale.

I start by creating aliases in Mode 1…

If the semantic values in Modes 2 and 3 are going map to the same steps in their respective color scales as the semantic values in Mode 1 did…

… then, on each of the remaining value fields, I have to manually repeat the assignments I’ve already made, entailing the following (×6):

1. Clicking on the field itself
2. Moving my mouse cursor to click on “Libraries”
3. Scrolling to (or searching for and scrolling to) the color scale variable/group
4. Selecting and clicking on the right step

This can get tedious, particularly if I’m adding a bunch of new variables and if the library I need to search through to find the specific target variables I’m aliasing them to is already complex.

It would be great to be able to instead just copy and paste the assignments from Mode 1 over to Modes 2 and 3 (as I might do in a spreadsheet).

Even if I need to shift one mode’s steps (in this example, Mode 2’s) slightly compared to the other modes…

… I imagine I’d still copy and paste the values first before adjusting the exceptions, which involves a quicker procedure than a net-new variable assignment (in this case: click, scroll up two steps from color 300 to color 100, click).

Let’s say I create a collection and then realize some variables in that collection should be in a different collection. I have no way to move them. Ii have to delete them and remake them in another one. Also, if you ungroup a collection, it destroys them all. You have to grab the child group in the left panel and pull it up and out of the parent. It’s not a great system. It would also be a lot better if I could copy/paste or duplicate with command keys instead of having to right click a variable and duplicate it.