Quality of Life Improvements for Variables

First and foremost, I’m really enjoying using and experimenting with what I can do with Variables. I have barely scratched the surface but feel like these are obvious improvements that should be included in the backlog somewhere:

  • Ability to duplicate Variables
  • Ability to duplicate a Collection
  • Ability to move Variables to another Collection
  • Ability to move a Group to another Collection
  • Ability to move multiple Variables (between Groups and Collections)
  • Add a description for Collections and Groups (I don’t want to repeat the same thing with slight variations for each Variable)
  • Ability to search for a Variable or Group within the Variables window
  • Ability to move the Mode columns within the Variables window
  • [EDIT] When creating Color Variables, I wished that it remembered the last panel I used to create the previous Variable. This would be useful when I’m creating multiple semantic variables via aliasing
  • [EDIT] Ability to scope multiple Variables that are of the same type

Thank you so much for making our lives easier (and keeping us busy) with Variables! Keep up the good work!

:star_struck:

2 Likes

@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.
3 Likes

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 :joy:

1 Like

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.

2 Likes

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

1 Like

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.

1 Like

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

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.

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

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: #B2AEFFlavendel-100

Variable drilldown in previews
The ability to backtrack where a color variable stems from in preview mode, e.g. button-primary-bgprimary-bglavendel-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

7 Likes

100% Agree with all of them.

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

1 Like

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

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.
1 Like

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! :crossed_fingers: :hand_with_index_finger_and_thumb_crossed:

If needed I can make presentation for Figma Team. :slight_smile:

4 Likes

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.

1 Like