Using Variables to drive font sizes and typefaces

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.

13 Likes

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.

4 Likes

yes we need this to happen

2 Likes

Bump that notion! Please make it happen, Figma!

1 Like

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 :crossed_fingers:t3:

1 Like

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.

RE Font sizes for Desktop, Tablet and Mobile I’m all for it!
Noticed this the other day looking for someway to set font sizes across breakpoints: https://medium.com/@roozbeham/dynamic-fonts-in-figma-248e1c37d6e9

Want it. In real casy, sorry for critics, but it looks like variables for type size - more necessary than variables for shadows…

Variables for font size and other settings - functionality for making true-responsive design.

Variables for shadows, strokes and other - it’s just a UI upgrade, but not really wow-thing.

Please add this feature!

1 Like

I need this functionality - would love to have the ability to create ‘one’ set of mobile designs - with separate modes for ios and android.

1 Like

Hey Figma team!
Are there any news on when variables will support typography? I share the issue with many other designers here, in the sense that I am building a design system for a big client (soon it will be 2) and we decided to go with the Figma variables (which I LOVE btw!!!) and to not use any plugins. Our decision was based on the claim, that the necessary typography support would come towards the end of 2023. I knew, that it would be unrealistic, that this target would be hit exactly, but now it is February 24 and there still are no news. It would be helpful to get some kind of timeline so that companies and designers can plan and decide how to proceed. So in case there are ANY news or a rough timeline, I would highly appreciate it! Thanks so much in advance <3
Katharina

Hi Thank you all for sharing your thoughts on variable typography support. We greatly appreciate your input.

As variables continue to evolve and expand, our team is actively exploring ways to support typography variables. We understand the importance of being able to switch between different combinations of typography properties, such as font families, sizes, and spacing.

While we can’t make any guarantees or promises when to release this, rest assured, we are working on it!
For more information on upcoming features, including typography variables, please visit our “What Figma features are in beta?” page under Variables. You can find it at here

To stay updated on all the latest features and announcements in Figma, make sure to check out our Release Notes and our Blog.

Thank you once again for your valuable feedback!

Thank you so much for taking the time to reply!
I couldn’t find any hints towards a rough timeline within the sources you shared. Can you provide any information here? It is getting harder and harder to justify the decision to go with Figma variables and especially: It is getting harder to plan the next steps. I would HIGHLY appreciate any information regarding the timeline :heart_hands:
Thanks on advance and have a wonderful day!