Agreed with all feedback here.
+1 to % line height and scoping support - kinda baffling these aren’t included already.
Additional feedback:
Our design system relies on variable fonts - that immediately makes # values for Weight variables useless for us because we need to dictate weight, width, slant, etc.
Additionally, none of our default combinations of weight + width correlate to any of the presets that came with the font. E.g. These “unnamed” styles shown in the picture.
So far I haven’t figured out any kind of syntax for string variables to make these “unnamed” weights work. If anyone has figured it out please share your solution!
Seems that for the free viewer account there is no way to see the value of the text variable. On the image below for the color there are variable name and variable value. For the font — name only.
I am designing a mobile app to align with iOS and Android device accessibility settings that scale text to seven different sizes. Extending the variable mode limit to seven instead of four for the Organization plan would be very helpful in creating mockups to show how text scales for the different accessibility settings.
It shouldn’t cost extra to design for accessibility.
Do you have any problems with performance when I bind a variable to a text style? When I delete, it takes me a few seconds to remove. I’ve tested with other objects (graphics, shapes, etc.), and there are no problems but text.
Then I remove all the text variables and improve the speed of deleting text properties.
Percentages: I can’t second this enough! Being able to work in percentages is essential to modern web design and addressing this would close a major gap between design and dev.
Root Size: It’s great that Dev Mode offers the ability to view in rem, but not all frameworks use a base of 16px. It would be so powerful to be able to pair variables with rems. Let us choose the root size and specify other sizes by rem! This would be so powerful and eliminate a ton of rework to scale all components due to a modified base.
what @Rae_Gibbs2 said!
So much of ‘modern web design’ is working with relative numbers (rem, em, %) and not absolutes (px).
A couple UX suggestions:
in the fon-size dropdown, make the variable ‘hexagon’ option be the first option. It’s irritating to no end, having to scrolldown 300x a day the long list of default size options just to get to the option to use variables. Ends up being faster/easier to just type the size needed and not use a variable.
after I selected a variable as a font-size (I clearly have opted to work within a set of vars), the font-size dropdown should only display my font-size variables (scoping) and have a ‘custom size’ at the bottom of the list.
Gotta say, every release is a mixed bag. On one hand supper happy to be able to use font-sizes, but on the other, implementation is an alpha or so half-assed to the point that makes its more difficult to use the anticipated feature and then you just stop using the feature because its too much hassle. There, vented.
+1 for supporting % values
+1 for being able to adjust the column widths in the Variables modal
+1 for being able to move existing variables to a different collection
Adding a couple pieces of my own feedback (for context, my team manages the Design System for our organization):
Being able to add a code syntax for variables is so useful—particularly for colors, but it doesn’t seem quite as smooth for typography variables yet. Also, my engineering team uses mixins for our type styles, so consuming developers shouldn’t actually be referencing the individual properties or applying those manually. Ideally, in the dev mode inspect panel, we’d be able to override the individual typography properties & just show the mixin & utility class they should be consuming. So perhaps, in addition to being able to add a code syntax, being able to turn others off as well—along with adding something custom like a utility class—would be useful?
There is a constant battle I am facing where I want to use ‘Local variables’, but Figma is kind of blocking me from making it useful without having to set ‘Local styles’. Aside from line-height, as it is not possible to set a percentage value (please fix), everything else can be prepared in ‘Local variables’, but afterwards, I am forced to create ‘Local styles’ to actually have a quick shortcut to apply and remember these settings, e.g. for h1, h2, body, and so on. I wish it would be possible not to set ‘Local styles’ but instead set these through the ‘Local variables’ somehow.
I’m sure others feel the same way, in order to deliver better tokenisation options when handing over to development and such. Or am I alone in this?