Quality of Life Improvements for Variables

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?