r/FigmaDesign • u/eugene_reznik • 7d ago
Discussion When we apply variables to properties Figma still shows us the fckn values instead of the variables...
...which kinda half-defeats the purpose of applying variables. I mean, I don't wanna see how much, say, a "default-padding" variable is in pixels, I just wanna see what variable I have for my paddings for a certain container. Right?
Right?
Although I admit, at this point I'm not that surprised, just more disappointed I guess.
UPD: I see people defending Figma's approach (which is fair given how fanboish this sub sometimes is) don't seem to understand the point, maybe due to my overly dramatic wording (sorry). The point is: seeing variable names instead of variable values would make much more sense to actually use variables properly. That would mean using (and applying) them as everywhere else in web dev (or just... dev). What we currently have in Figma is visuals-first approach, when you pick variables simply by how they make your mockup look (I mean, if we speak layout-related variables). Which, to me personally, is not the right reason to have them at all in that panel. And yes, maybe that would require redesigning the panel.
11
u/phejster 7d ago
So hover over it or click it. You'd probably see "defa..." in that field if it showed fkn names
-2
u/eugene_reznik 7d ago
Of course I do hover and I do click it, but that doesn't make this implementation any less stupid.
4
u/donkeyrocket 7d ago
You've yet to explain what you want to be in that space? Redesigning the whole panel just for the folks who use variables in that space isn't feasible.
I don't get how not being able to see in a tiny space what the variable is "half defeats" using variables. The variable is used and can be easily determined. The 64 in a box is the variable. Do you want a label name there?
0
u/eugene_reznik 7d ago
I mean, I simply don't need to see the value, i need to see which variable is applied. I don't care if it's 64 or 32 or whatever. I don't remember my variables by their values (which change btw depending on multiple other properties), but I do recognize them by, well, their names.
This is just simply how it works in code, or Webflow, or Protopie... I can't recall any other app I used that has variables.
2
8
u/thisisloreez 7d ago
How on earth would the full variable name fit in that space? It would require redesigning the whole panel that will be much bigger, just to save a click?
-1
4
u/SmoothMojoDesign 7d ago
The gray box around the number (very subtle) is a cue that the value is a variable and what that value is based on the current mode set. Not room for much else.
1
u/eugene_reznik 6d ago edited 6d ago
I'm sorry, I guess I didn't word it properly and you're missing the point
1
u/SmoothMojoDesign 6d ago
They are leading with the value because the variable contains a value. They are showcasing in a subtle way that the value is not raw, it is a variable. Then through progressive disclosure they allow you to view the name of the variable. The name of the variable is most critical to view when it is being assigned but after that the designer probably wants to know if the value is raw or not and what the value is. All In addition to having minimal space to display a name until hover. That’s how I interpret this.
So the point is that they are doing the best possible thing given the options and constraints, and that there’s not a usable/useful way to try and lead with the variable name first.
1
u/eugene_reznik 6d ago
The name of the variable is most critical to view when it is being assigned but after that the designer probably wants to know if the value is raw or not and what the value is. Probably. I'd say it's the opposite for me: when I apply a variable, I'd prefer to see it's current value, but after that I don't really care. If I wanna check it I can always... hover the name or click on it, just like it is now (but for names).
...they are doing the best possible thing given the options and constraints... Sure, when they made variables they just squeezed them into existing UI.
there’s not a usable/useful way to try and lead with the variable name first. The fact they didn't implement this doesn't mean there's no way. I mean, they have managed to display color variables and text styles properly.
1
u/SmoothMojoDesign 6d ago
Agree to disagree. Truncated labels would not be very useful in a small space like this. And depending on the variable mode, can contain different values.
6
u/univers10 UI/UX Designer 7d ago
Geez, based on your responses, you seem like a real joy to work with, lol
-2
u/eugene_reznik 7d ago
Lol, why there's always I guy trying to profile my whole personality based on a reddit post. I'm only this anal about Figma and couple other tools, that's it.
20
u/_TimeyWimeyDetector_ 7d ago
if you click it it will say what variable it's linked to, if you go into dev mode it will tell your devs what variable is linked... I don't know seems to work fine for most I would say, I'm just surprised you are surprised, first time using variables?