Skip to main content
Jairo
Jairo
June 29, 2023

LAUNCHED - Typography Variables (Font size, Font weight and style...)

  • June 29, 2023
  • 77 replies
  • 22904 views

I would love to be able to set variables for font sizes.
That way i could define the reduction amount for the mobile versions of our designs.

Set a vaiable of 40px and a mode “mobile” with the value 32.
This would make this kind of conversions a breeze: If a text looks to big, opt for its mobile version. done.

    77 replies

    Show previous replies
    Anonymous
    April 17, 2024

    This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.

    Celine_
    Figmate
    Celine_
    Community Support
    April 17, 2024

    Hey everyone!

    We are glad to let you know that we launched Typography Variables! 🥳

    🆕 Variables can be bound to typography fields and saved as a style.
    Now our typography drop:
    → Font family
    → Font weight and style
    → Font size
    → Line height
    → Letter spacing
    → Paragraph spacing and indent

    ➕ For more information, please check:
    ⭐ Our blog article →

    Figma

    ⭐ Our tutorial video:

    Figma tutorial: Variables for typography

    ⭐ Plugin API docs: Typography Variables

    Thank you all for being patient!

      Remy_B
      Remy_B
      New Participant
      April 17, 2024

      Very awewome! Been waiting for this and very hyped! Just started using it, thank you very much!!

      Only I have 1 suggestion, I think it is in the pipeline, but was wondering if/when it would be possible to set the line-height in percentage.

      Thanks again!

        Greg_Soper
        Greg_Soper
        April 17, 2024

        Really excited to incorporate these into our design system.

        We are using a variable font - I haven’t found a way to apply both font weight and font width via these new variables yet - any tips?

        I know I could use a string to specify a named font pre-set, but none of our weight + width combos line up with any of the packaged font styles…

        So we’re reliant on specifying both weight and width via setting both values individually.

        To illustrate, rather than any of the named presets above we’re using these oddball combos. Haven’t figured out how to get the variable to accept these as values.

        CleanShot 2024-04-17 at 13.47.41@2x

          Pavel_Kiselev
          Pavel_Kiselev
          Power Member
          April 23, 2024

          I cannot make it work via pluguin api

          I am getting an error like this

          in setBoundVariable: variable of resolved type ‘FLOAT’ cannot be bound to ‘fontStyle’

          when I try to call textStyle.setBoundVariable('fontStyle', fontWeightVariable) where fontWeightWariable is a number that represents font weight

          image

          Is it a bug or I am doing it wrong?

          Celine_
          Figmate
          Celine_
          Community Support
          April 24, 2024

          Hey @Pavel_Kiselev ,
          After checking internally, you need to bind to the fontWeight field, not fontStyle. More information here: Working with Variables | Plugin API Hope this helps!

            Pavel_Kiselev
            Pavel_Kiselev
            Power Member
            April 24, 2024

            Ah, seems like overlooked that completely. Thanks for pointing out @Celine_Figma, much appreciated

              Terms & ConditionsAccessibility statement