Skip to main content
Adam_Gordon
Adam_Gordon
New Participant
May 3, 2024
Question

Typography/Size Variables: Styles don't respect applied mode for variables

  • May 3, 2024
  • 41 replies
  • 2379 views

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.

Screenshot 2024-05-03 at 12.19.39

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.

Screenshot 2024-05-03 at 12.37.55

And when detached you can see it shows the correct value

Screenshot 2024-05-03 at 12.38.09

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?

    41 replies

    Paul_Dierksheide
    Paul_Dierksheide
    May 3, 2024

    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.

      Adam_Gordon
      Adam_GordonAuthor
      New Participant
      May 8, 2024

      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.

        Adam_Gordon
        Adam_GordonAuthor
        New Participant
        June 4, 2024

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

          djv
          Figmate
          djv
          Community Support
          June 10, 2024

          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.

          As a temporary solution, as suggested by Paul, you can add a description to the text styles with the other mode values

            hummh
            hummh
            New Participant
            September 17, 2024

            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

              hummh
              hummh
              New Participant
              September 19, 2024

              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.

                hummh
                hummh
                New Participant
                September 19, 2024

                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

                  Adam_Gordon
                  Adam_GordonAuthor
                  New Participant
                  September 19, 2024

                  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.

                    hummh
                    hummh
                    New Participant
                    September 20, 2024

                    Hello,

                    it’s definitely NOT solved in the new UI.

                    Harald

                      Lea.P
                      Lea.P
                      New Participant
                      October 9, 2024

                      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

                        Show more replies
                        Terms & ConditionsAccessibility statement