Skip to main content

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


Jairo

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

  • 5 replies
  • June 29, 2023

👆 This!
It would be Sooooo helpful ❤️

Just so that you know, there is already an topic for that. Add the option to set the size of texts in local variables


Jairo
  • Author
  • 50 replies
  • June 30, 2023

C´mon fig guys… You know you want us be able to this:


Mark_McIntyre

Firstly new variables are mind blowing …

Can you imagine being able to drive your font sizes with a variables.
Or swap the font typeface with a string variable.

You could then set a mode for Desktop Tablet and mobile.- even media selector/ break points.

Then easily flick between modes or drag components from a Desktop frame to a mobile frame and WHAM!! not only can colours, text and numbers change but you could truly create one component that works across any screen size - without the need to variants.


YES the example above is exactly how we want to set up our variables, but at this stage Figma doesn’t allow text size as variables — what the?!


IanCox
  • 4 replies
  • July 9, 2023

Absolutely,
In addition to having support for variables inside of the text settings menu (font-size, line-height etc.) I would love to have support for variables inside the the variable-font axis picker.

I want to be able to shift the axis of the variable-font (weight, optical size, width) so that I can optimize my components for dark mode and smaller text on mobile.

In dark mode, I could make text slightly thinner to optimize legibility.

CSS-Tricks – 23 Apr 20

I came here looking for this! It’s confusing being able to create variables for several elements in a responsive design but not text when it’s the main thing being adapted. Figma, we really need this to work 🙏


COSCO_Editor_2

It seems coming soon …

  • Typography variable type: We’re exploring how we want to support typography variables. We want to provide a way to switch between combinations of typography properties, like font families, sizes, spacing.
Figma Learn - Help Center

Muhammad_Hamza_Munir

yes we need this to happen


Anthony_Swierkosz

The new Variables beta is really nice, but I would love the ability to use number Variables for variable font properties. For example, I like to set the font grade/weight higher for dark mode versus light mode to compensate for visual bleed and improve contrast.

Variables already support modes for light/dark, but adding the ability to use number variables for font properties would be fantastic. Thank you!


Celine_D
Figmate
  • Community Support
  • 3381 replies
  • August 25, 2023

Hi @Anthony_Swierkosz ,
Thanks for your feedback, we’ll pass along to our team for consideration.

FYI, as variables continues to evolve and grow, our team is also exploring how we want to support typography variables. We want to provide a way to switch between combinations of typography properties, like font families, sizes, spacing. Stay tuned! More info here.


Robert_Powers1

I think it would be just as efficient if we had a style variable so a variable could be linked to a specific style which would allow for font customization for each variable mode. This would be huge for responsive.

This has also been requested here:


Nikolaj_Krogh_Kjaer-Rasmussen

Bump that notion! Please make it happen, Figma!


alexanh20
  • 1 reply
  • September 28, 2023

I was looking for the same think for iOS Accessibility, to easily check different Accessibility sizes.


Alex_Barton
  • New Member
  • 1 reply
  • September 29, 2023

Looking forward to this feature!


Lucas_Buckels

October 2023 checking in 🤠👉👉


macaspac
  • 2 replies
  • October 16, 2023

I’m designing an app where people can add themes and text overlays to their camera, and it’d be great to build a working prototype for the team where I can use variables to test out different themes (colors, fonts, font sizes, uppercase, etc) for a single layout.

I’d love to see more flexibility with variables 🤞t3:


Scott_Clee

I’ve hit this limitation today. Could really do with font size as a variable. Come on Figma team… an early Christmas present perhaps?


Leonid
  • 2 replies
  • October 23, 2023

We need this update. Come on, Figma


Richard6
  • 1 reply
  • October 24, 2023

100% agree! So important to really use the variable system productive. When can we expect typography support?


Cassie_Wallender1

I’m just a designer, standing in front of this font size, asking it to accept variables.


Jairo
  • Author
  • 50 replies
  • October 25, 2023

#metoo
I was there playing with this new variables thing up until i wanted to set the font size… got me at least half an hour trying to figure out why i couldn’t put variables on the font size… it seemed so obvious and logical…


Remi_Maringer

This is the only piece that I miss to finally get a a responsive Design System easy to maintain. I hope you’ll find soon a way to implement it ❤️


Hoby-Van-Hoose

Come on Figma, please up the priority of this feature. Our design systems are languishing in half states of variable conversion. This is literally the only reason many of our simpler components still have variants.


Yexing_Sha

Would love to see this happen! As our products are platform-native, being able to switch from SF Pro to Segoe UI with a single click would be a huge productivity boost.


Daniel_Amann

I need this to manage different density themes in a design system.


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings