Launched: Typography Variables

Hi @Adriaan_Steyn ,
Thanks for your question. I’m glad you already got to use the new Variables feature! We made a reference to the timeline in our Config deep dive: Deep Dive: unlock design system scalability with variables - Luis Ouriach, Jacob Miller(Config 2023) - YouTube
The aim is to get this feature out by the end of the year, though there are no guarantees.

You can also check out the features that are coming soon here: https://help.figma.com/hc/en-us/articles/4406787442711-Figma-beta-features#variables , and keep an eye on our Release Notes. Thank you!

It’s really important that - when you finally implement typography variables - Engineers will be able to easily see & use the typography variable name in Dev Mode separately to (perhaps instead of) the CSS because at the moment the style name is shown within a “/* */” block in the CSS but that’s not obvious enough, see here:

Plus as with the other variable types we’ll need to specify the exact name that the Engineers see so that it can be different to what Designers see - e.g. with the example above we might want Designers to choose “Content/heading/large” and Engineers to see “sb-typography-heading-large” which would be the name of the CSS class in our design system codebase.

Preferably any/all of the CSS rules relating to the predefined typography style/variable would also be hidden by default (because engineers should just need the name) but still available via a “Show CSS” toggle/similar - perhaps if needed by someone such as an external developer not using our system.

And of course if the designer has chosen to break / override the style/variable (e.g. to apply a different color, text-align, etc) then this needs to be displayed VERY clearly to the engineer so that they know and can implement (or preferably check with the designer first).

Hey @Celine_Figma !
Are there any news on when variables will support typography? I am building a Design System for a big client 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

Hey all,
Thank you everyone for your interest on Typography on Variables! The team who works on our Design Systems features is working actively on this.
To give you some visibility, originally we had earlier estimates, but the world of fonts (especially when factoring in complexities like 18k+ axes for variable fonts) is particularly challenging and the team needs a bit more time. While we can’t share a timeline, be sure we will keep you posted. Thank you so much for your patience!

@Celine_Figma Hey Celine, appreciate your update!

Recently I noticed that in Figma Beta Feature page, there’s a direction being shared. It says Figma is planning to use the existing Text Styles as the ‘group’ or ‘composite’, while allowing the individual parameters like font size to bind with Variables.

This approach is now seen in your solution to Effect Styles. It’s also hinted by some Figma Advocates in some Variable related sessions. Basically in design token terminology, Variables are singular tokens, while styles are composite tokens.

My question: While patiently waiting for Typography Variables to come live, can we at least have a confirmation on the direction of solution that’s shared in the Beta page?

And a follow-up question: If yes, considering the massive need across all Figma users, can Figma consider to roll out the binding of individual parameters in phases? Like, at least allow us to bind font size, or line height, or anything that’s less challenging?

Looking forward to hearing any update. Keep up the great work!

Theo

Hey @Theo_Cai,
Thanks for your detail feedback!
After checking internally with the team, here our responses to your questions:

1. The beta feature page is accurate! Variables can bind to individual parameters, and a text style can be used to apply multiple variables simultaneously.

2. Currently, there are no plans for a phased rollout. I’ll pass it along to our team for consideration.

Hope this clarify 🙂

in Figma Beta (116.17.8 version), theres no typography variable I checked.
Could you tell me where it is?
I really want to see it.

There is not. It’s not yet available and they why we are all here waiting for. I’m just saying there’s a direction of the potential solution being shared from Figma, not the function itself.

Hi Celine!

Regaring point 2 by Theo:
Yes, rolling it out in phases would be super helpful! The “simple” option to use number variables in the font size and line height field would probably be enough for many of us to continue with our work on design systems using Figma variables.

But I understand that this might be impossible, depending on how Figma is appraoching typography support in variables.

For me, it would already be very helpful to at least have some kind of rough timeline: Are these basic options (number variable within font size and line-height) coming this quarter, the next quarter, the end of the year? Because any of these options would drastically affect any DS plans. Currently it is very hard to know what to do and what to communicate to clients…

Thanks in advance to you and the whole team working on this! I hope all these repeated questions and posts first and foremost highlight, how much we love Figma and the new variables!!! 🫶 🫶

It appears that support for typography as variables is on the horizon, according to this LinkedIn post
Event is planned for April 16 🤞

Is there any new about this?
It’s a bit frustrating that it doesn’t included yet.
Text and Line height would probably be enough for 99% of Designer right know, the complicated stuff can also be released late in my opinion. Its been 9 month its been teased, with no info when it will be available. Without this feature we can’t really build good working Design Systems 😭

Yes, they planned an event on the 16th of April where they will show us typography variables.

The release may be on the same day, or at least they should set a close release date.

Tadaa:

4 posts were split to a new topic: Use % based line heights with Figma variables

Odd, I am not seeing this is Figma.

Love the new update. Quick question, I design for iOS and Android app and our design system has 2 separate font styles that uses native fonts like SF pro and Roboto. Now, my question is can I use typography variables and take advantage of modes to automatically switch typefaces for iOS and Android? The challenge I see with playing around with the text variables is that there is no 1:1 mapping between IOS and Android in terms of number of weight, sizes used.

I see text variables working for responsive website, trying understand if there is a use case for an iOS and Android version of the same app that uses system fonts that has different set of type style specifications.

@Peacemaker Set up your variables like this to cover any differences, using Android and iOS as modes.

And then your styles like this, using those variables

A post was merged into an existing topic: Allow percentages for line height

This is such a major fail. It is still a STYLE. Just because the number can be a variable and set in a style, that is literally of zero value to us. Eliminate styles by bringing the full capability to variables.

Variable setting of TEXT would easily be able to allow setting of all the style elements.

Think of it as a composite variable. Just a more advanced version. But to have it just be a numerical value in styles that we still have to manage in the library anyway? Pretty anticlimactic.

Is it correct to say that the only way of setting the font-style to Italic is to use a string variable?
For example with Inter typeface for a Medium Italic one should set the string variable to “Medium Italic” for a Regular italic one should set the string variable to just “Italic”.
No number variables are possible such as 400, 500 etc…

This is not working very well with code, where most frameworks require separate properties for font-weight and font-style to define text appearance. Converting those string variables would then require additional convoluted logic to generate usable tokens for code.
Wouldn’t be better to handle the font weight and font style as two separate variables?

Not being able to set line-height in percentage makes the whole typography variables thing kind of pointless.

Just want to add my voice to this, our design system does not work without percentages (or em).

We use them on letter-spacing to have real responsive typography.

Just curious, why would a composite variable add value to you, but a composite style would not?

To me it’s the same thing, just a different name.

You might be correct here Slava. In reality, the styles there are today in Figma are just that “composite” thing. So maybe it IS just that there are styles.

For us, the issue is like gradients or effects. There are no variables for these.

My frustration is that we are splitting the use cases for variables. IF I have to create a style that has different settings for font-weight, letter-spacing, etc…I will just use numbers for those. Having a variable to add the value here is ultimately much more confusing and problematic. Too many moving parts. If I want to adjust the letter-spacing, AND I have a style where thet is set, going to set it in a variable so that it adjusts in a style that then feeds my design is entirely a problem.

It is not the same thing (“composite” varable and style) if you think about it from that standpoint. A style that uses variables to set the settings cannot be the same as one that is not controlled by variables. But that is just semantics. But, your theory is spot on. We don’t need both!

If I create an entire text style as a variable, then that solves my frustration…but I think your question makes more sense! I think I am not looking for a variable for text styles…I think I am just not a fan of setting variables that set text styles. Just put the numbers in the text styles directly. Less to maintain and manage on a cognitive level.

Having to have styles in addition to variables is problematic. As I said, too many moving parts. Too much opportunity for failure or error. Both for managing a design system and for onboarding new designers. Better organization means better productivity.

Thanks for your question. I think you made my issue more clear for me. I just don’t want variables to populate styles. Too much hassle. But you took my objection away from wanting a “composite” variable for text because that is just reinventing the wheel which is a style.

Thanks.