Skip to main content

When applying text styles that have associated variables attached the values presented do not respect the applied mode. For instance I have a title that has a mode for Mobile (20px), and a mode for TV (40px), when i open up the style, the default mode (in this case mobile) is displayed instead of the TV mode size.



I have also observed this within grid layouts when applied it shows the default mode (26 columns). When in reality it is actually 24 columns, if you then detach the style it shows the correct number.



And when detached you can see it shows the correct value



Seems this was a major oversight, as it makes applying size variables pretty time consuming, as I have to check if I’ve chosen the correct size by clicking and opening up the variable list.


In short it seems to default to the first default mode, instead of respecting the chosen mode. It also only seems to affect styles.


Anyone else found this to be an issue?

Yes!! Having the same issue and came here to see if others were experiencing it. The only workaround we’ve found so far is to just add a description to the text styles with the other mode values, but it’s definitely not great.


Ahhh thank you, I didn’t think about using the description!


I’ll use this as a workaround for now but it’s definitely frustrating that the values do not ripple down correctly when the mode has been selected. It makes it extremely difficult for those consuming the system to really use it correctly.


Hoping to bump this thread as it’s quite frustrating and feels like a pretty big oversight.


Hey All, so sorry for the trouble and delayed reply!


This is already on our team’s radar for improvement. Right now, this is expected behavior. The styles picker does not reflect modes for typography variables. The team plans to implement changes to make this less confusing.


Hello,


when creating font variables with modes (e.g. device mode for desktop, tablet and mobile) and applying those variables to font styles, the preview of the font size is wrong. It always shows the size defined in the default mode. However the used size in the frame is correct, but it is super distracting that Figma shows the wrong font size …


Anyone experiencing the same issue? Is this a know bug?


The attached file shows example for multi dimensional modes or single modes. The issue happens in both cases (our initial assumption was the multi dimensional modes).


Figma shows wrong font variable preview.fig (563.4 KB)


Cheers & Thx

Harald


Hello,

i found an old post from June that addresses the same problem.




In the meantime I found out this problem is not just related to font styles. It is a problem in all styles (e.g. effects). The preview always shows the default variable mode value, but never the actually used one.


Hello,


are there any updates on this? We are facing the same issue.

It is super misleading if the wrong values are shown to designers using a design system.


See also

https://forum.figma.com/t/font-style-using-variables-with-modes-shows-wrong-value-in-style-preview/87107/4


BR & Thx

Harald


Hey Harald, I haven’t heard anything back yet but it still persistent in the older version of Figma (I haven’t got the new UI yet). I’ve been using the above method and including the values in the description to at least tide us over until there is a fix. I am hoping that it won’t be too much longer though.


Hello,


it’s definitely NOT solved in the new UI.


Harald


Hello.

We also had feedback from our design system community about this bug. It’s super irritating when you work with different devices or densities.

Please fix it soon!

Thanks


Hey team, when can we expect a solution to this? This is super important as I’m working on a bi-lingual interface and this is super important.


Hey, running trough the same issue at the moment. Is there any update on this? cc @dvaliao


Hey!

Any news regarding this issue? It is already 6 mnths passed but the problem still exists.

Is there any workaround at this moment from Figma team?


Reply