Hi there, we’ve been using the Figma Studio plugin to build our design token systems. Its been really useful and provided a number of advanced features. However, with the native integration of variables in Figma we would like to make this switch. While I understand that variables are still at its infancy. Do we have a timeline of when typography variables would be released? Is it a 2023 thing or only next year?
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:
-
The beta feature page is accurate! Variables can bind to individual parameters, and a text style can be used to apply multiple variables simultaneously.
-
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:
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 →
Our tutorial video:
Plugin API docs: Typography Variables
Thank you all for being patient!
4 posts were split to a new topic: Use % based line heights with Figma variables
A post was merged into an existing topic: Allow percentages for line height
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