Skip to main content

[Bug] Figma Site doesn’t apply mode values when using typography variables inside styles

  • June 3, 2025
  • 6 replies
  • 250 views
Mortyakard

While building a site in the new Figma Site, I ran into a typography issue:

When I use a typography variable with different font sizes for Desktop, Tablet, and Mobile, the correct value shows only if I apply the variable directly to the text layer.

But if I use the same variable inside a text style, the published site doesn’t respond to modes — it just shows the default (Desktop) size, even on smaller viewports.

This seems like a limitation or bug in how Figma Site handles mode-based variables inside styles.

Would love to know if this is expected behaviour or still under development. Happy to share screenshots or a test file if helpful.

Thanks!

 

    6 replies

    Yelnar_Bolatov

    They also published text styles breakpoint creation that works. But I am not sure how I’d want to engage this case more: through variables and modes or through text style breakpoint additions. I guess it would be cool if they added some kind of variable collection type: breakpoint modes, as the large table of variables is easier to handle than the small text style menu.

     

    https://help.figma.com/hc/en-us/articles/31242838116119-Customize-a-text-style-for-multiple-breakpoints

    Contact me on Instagram/BlueSky @ybdesigning
      Scott_Olsen2
      • Scott_Olsen2
      • New Member
      • June 3, 2025

      Just came across this issue myself. The modes work when looking at the fonts on the canvas, but previewing them they do not work. Connecting the variables to text breakpoints works, but it’s a hassle to have to add the values for something that shouldn’t need it.

        ksn
        Figmate
        • ksn
        • Community Support
        • June 9, 2025

        Hey all - thank you for reporting, and apologies for the delayed response.

        I filed a bug ticket on my end to double check on if this was expected behavior, and from the information I received, it is a bug on the engineering side that they need to address. At the moment, I don’t have an exact timeframe on when that will happen, but can confirm it will be worked on.

        In the meantime, ​@Scott_Olsen2 ‘s workaround may be helpful to try (if you haven’t already). For the time being, I’ll mark my response as the highlight, so anyone else who comes across this will have quick access to this info. Hope this helped clarify!

          Mortyakard
          • Mortyakard
          • Author
          • New Participant
          • June 11, 2025

          Thank you ​@ksn following up.  🙏😊

          peterdamrongpiriyapong
          Figmate

          Hi! Just wanted to follow up there that we just pushed a fix that should address the bug reported here!

          Thank you for reporting and please let me know if there are any further issues!

          Ron_Fernandez1

          Hello -- Still running into the problem. I’ve inherited a file and I’m trying to organize an existing set of type styles. The hierarchy is:

          “type style name” → “variable name” which has an iOS and an Android mode. 

          In the iOS mode it points to a primitive variable with a value of “100”.
          In the Android mode it points to a primitive variable with a value of “86”.

          However, the style picker in Android mode still displays the iOS value (100 instead of 86).
          The resulting text is 86, however. 

          This has been driving me insane. So, how do I organize this so other people working on the file don’t get massively confused? The dissociation between the “Appearance” and “Typography” panels makes it likely people won’t know what mode is applied and even if they do they’ll wonder why the type size is wrong. 

          Ideas? Thx. 

           

          Terms & ConditionsCookie settingsAccessibility statement