Quality of Life Improvements for Variables

@Andii_Hei,

It is currently possible to move multiple variables between groups. It’s just that it works strangely at the moment:

1. Choose one variable;
2. Holding down Shift or Ctrl select the required number of variables by pressing and holding the left mouse button;
3. Keep holding the left mouse button and drag the variables to another group.

Ahh… Nice! I wished it was available as a right-click menu item then, because I never would have thought to press those 2 keys 😂

I’ve tried this initially, and found that each time I dragged it into another group it would just deselect all but one variable and then move just the one variable that my cursor was on.

So you released the left mouse button. When you select the last variable, do not release the left mouse button, but hold it down and immediately drag.

There is supposed to be the ability to duplicate. But it only works on the top level, and only some of the time. I have a lot of language string, and it is not working 90% of the time

I was going to upload a video here, but it seems that I can’t do that as a new user, so here’s a screen recording where I’m trying to drag the test variables without releasing the left mouse button.

As I told you, you released the left mouse button. That is, you clicked and then pressed and held and dragged. Do not click, but do as I described in previous posts.

Yea, I finally got it…! Took a few goes. 😅

The variable should allow to create the breakpoints so that the mode would define the various sizes needed for you interface creation.
Then in the frame selection when selection a breakpoint mode the interface would adjust frame sizes automaticly based on the values identified.

Hello. We are currently testing the variables beta and love the feature so far. We have a couple of feedback points from our side which we hope will get the attention they deserve.

Search variable with values:
The ability to search existing variables with the actual values, e.g. find colour variables based on a hex code: #B2AEFF → lavendel-100

Variable drilldown in previews
The ability to backtrack where a color variable stems from in preview mode, e.g. button-primary-bg → primary-bg → lavendel-100 → #B2AEFF

Variable usage overview
Seeing where variables are in use and also if they are not in use and can be deleted

Drag & drop modes
Drag & drop for modes so we get the correct column order <3

Kind regards,
Inger-Marie Nilsen

100% Agree with all of them.

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.

It is confusing to set up variables and variants. I can’t do them in a way I feel is intuitive.

• Not being able to assign Modes to parent components.
• Properties not settable on the layer that I expect them to be.
• Properties not available at parent layers like I expect them to be.
• Having to use booleans in odd ways to get expected results.
• Not being able to set up properties with conditions that work in Design.

Using variables has significantly improved workflow efficiency and collaboration with developers. However, I’ve encountered some issues while using them, and I’d like to provide some feedback:

1. When deleting variables from a library that you’re importing, on the component level, it doesn’t always recognize the deleted variables and displays them as ‘used.’ It appears to be a common issue, as reported in various forums.
2. When applying a variable to a child ‘control’ element and then applying another to the parent element, there should be some feedback or alert suggesting that a variable is already applied to the parent. Without such feedback, manual investigation is required to ensure that there are no variables applied at the child level that may be preventing the parent variable from updating.

Adding an idea: It would be better if the variables modal did not auto resize when selecting a variable

Adding an idea: Would like to be able to see a list of variable that are part of an external library

Hello,

I would like to provide feedback for Beta Figma Variables.

Message: Variables are a great tool for building design systems, and I’m rooting for them. However, to maintain the quality of implementation and design consistency, it’s necessary for variables to function as they should. I have a few observations from my colleagues and myself during the 2-month testing on our projects.

UI window for Variables:

• The Variables window should not be part of the Figma canvas, but should be a separate window that I can drag anywhere outside the canvas as needed. (One window for Figma, another for Variables)
• Placing the button to create a variable at the end of the block doesn’t make sense, button is too deep. Should be also on top of the Window.

General Variables:

• Variables should be able to calculate between variables
  • For example: If I’m setting a unit system, and I set an 8px unit system within the project, I should be able to generate a set of the entire unit system easily with a simple notation: baseUnit * 0.5, baseUnit * 1, baseUnit * 2, baseUnit * 3, and so on.

Color Variables:

• Font colors are specified in RGB. Today, RGB is practically unused, and we would like to display colors using other formats such as HSL, HSB… to be possible make color schemes and be more readable in variables window. (For example some switch to other formats)
• Gradients are missing. Just like with solid colors, it should be possible to define gradients. In styles, we use combinations and we would prefer not to set the color once from Variables and once from Color Styles.

Font Variables:

• I understand that this is still in preparation. However, we would like the option to define variables independently for:
• Font weights (300, 400, 700, 900, etc.)
• Font sizes
• Optionally, style (strike, small caps)
• Font families

Certainly, this is not everything, and I would like to invite more people with their own experiences to join the conversation.

For example, from the Figma Tokens plugin (where the above-mentioned things are possible, but in terms of usage, they are too slow to change). Good luck, Figma Variables! 🤞 🫰

If needed I can make presentation for Figma Team. 🙂

My feeling has been that it’s amazing to have this baked into Figma vs. using a plugin as it’s much more efficient. Looking at a plugin like Token Studio, there are a few features that I really feel the Figma Vars should incorporate.

1. Ability to use “em” defined within the variables as “em”
2. Ability to use Aliases and do math on them {paddingDesktop}*.5 for instance

Is there a roadmap anywhere for this feature? It’s amazing to have it, now it’s time to get behind it and really make it go.

I experienced quite controversial output when I tried to set heavily nested components.

• level 1 → icons (size, states)
• level 2 container (type-> icon, checkbox, counters, avatars, etc.)
• level 3 - button base (size, including container, roundness)
• level 4 - states and button types (primary, secondary, outlined, link, etc).

After I set it up carefully the different sizes totally messed up the colors, I needed to reset all changes and switch to size and states, to get the correct result. I think the variable overrides are the main problem because I made this with styles and works flawlessly.

How about storing textures in a variable value? Is that considered in the beta?

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.