Figma tutorial: Variables for typography

[@aaditiakolkar3317]

Much awaited feature is finally here. Thanks to the entire Figma team. Gonna save tons of work here with this typography variable.

Need variable support for percentage numeric values for line-height. Also need variable support for multiple variable font axis, like font width, font slant, etc... currently only supports font weight.

[@manuelesposito2521]

Same here, percentage values for line-height would be awesome.

[@gdbriggs4]

Echo this - line-height percentages please.

[@NadiaWiegand-lz7ys]

oh yes, that would be so great. also the option to calculate within the values

[@nicolelachenmeier8041]

100% agree!

[@nobody-bt7mu]

Up!

[@wonsunparque4788]

Finally!!! Awesome! Thank you!!! Next: opacity support in color variables please.

[@ny1984]

Already supported. We’re missing gradients tho

[@Figma]

@ny1984 Hi, you can also assign variables to gradient color stops as well! Check it out here: help.figma.com/hc/en-us/articles/15343107263511-Apply-variables-to-designs#h_01HVA5YEDGTPSZFW2KCT2G8N5P

[@wonsunparque4788]

Sorry, I meant to add opacity when referencing a color variable. For example, after making a primitive color variable of a color, I want to create several tokens of different opacities of that primitive color.

[@serhiytorba]

@@wonsunparque4788 I also want to join to that party with alias opacity tokens)

[@Krasniysharigg]

​@@Figma Everyone is waiting for the ability to add a gradient to a variable, not variables as gradient colors. (P.S. However, this functionality has not yet appeared, although some variables have appeared for fonts, is this a bug or are you really adding functions piece by piece?)

[@RIPKaunas]

Finally! Well done, you made a feature everyone will use it! Thanks!

[@GlebSoin]

The voice of the speaker is awesome, and really easy to understanding for nonnative speakers. Thanks a lot!

[@Dampealx7]

Bro. Couldn't agree more! I do feel she knows how amazing her voice is and is having fun with it 😅

[@exgeeinteractive]

I find it the opposite. NGL, the softness of her voice irritates me.

[@filimon.grigore]

actually, I almost fell asleep a few times because of how calm and sweet the voice is. I love and hate it at the same time for that.

[@xuchen4829]

so sweetie voice!!!

[@JuliaM206]

I don't think this is a real person's voice. Its definitely AI

[@AndreiValentim]

Good! But my variables for line height and letter spacing are in %, not #!

[@trevorsmith4597]

I really dislike that figma does this. Dev teams don't know what to do with % on letter spacing because CSS does not accept % for letter spacing

[@lhauschild]

@@trevorsmith4597 We also had this, solved it by teaching them that 3% is just 0.03em, for example.

[@valeassiso89]

@@lhauschild not really, that depends on your base, but you should have the number, it's as easy as multiplying you number times 1.20 or 1.50 depending if you are using 120% or 150% and it will give you the same result. It takes time but its easier for everyone in the long run

[@lhauschild]

@@valeassiso89 True, we did build our DS with that in mind though. Thanks for adding to the discussion.

[@feelcollins4358]

It seems this has been changed? Cuz mine is in px instead for letter spacing and line height

[@lucidsam9949]

Finally, well done to the Figma team!!! I have wanted this feature for a long time now. I can't wait to see what else the team brings out. 💙💙💙💙

[@robertopatron2132]

Definitely I want a deeper video regarding variables and variants! what a phenomenal work!

[@jeremydennis6908]

Love to see it. It would be great in a future update to allow for bulk updating. Perhaps you update one font family and are prompted to apply the reference changes to all similar fonts?

[@deepeebee62]

Great stuff! Wonderful video. ⭐ When you're using number variables for typography only, you can use "Number scoping" for "Text content" (to avoid cluttering the variable selection for other things).

[@Figma]

Great tip!

[@rammaduthuri]

give an example @deepeebee62

[@sachaaaj]

Oh no, I can't add a variable "-2%" to my letter-spacing 😢

[@platinumdynamite]

This seems to be the eternal problem with variables - there's always a compromise in order to use them. I respect the ongoing work by the development team, don't get me wrong - but I think there needs to be a clear line drawn as to what direction variables is to go in, and whether it's going to become the standard or an awkward advanced sideline.

[@kai1218]

Nice! It has finally arrived! Definitely going to try it out!! 🎉

[@BrunoAlves-uy3sl]

Yes, I'm interested in a deep dive when to use variables vs styles.

[@dirtbagmoto]

New to Figma but now wondering what's the best way to add support for dark mode for multiple typography modes. Very cool tutorial though, this is much appreciated.

[@accountNameBlank]

Welcoming this update with open arms, thanks Figma! ❤

[@lianahakobyan1016]

I wish I could work for at least a month at Figma Company. With every update, you allow us to save our time and nerves :D

[@alfiematthews9314]

Awesome! Excited to get stuck into this additional feature -- can you do a video on documentation, how to present variables to developers? As designers we cannot expect developers to view every page and work out our scale, colour and usage variables. Will dev. mode soon allow developers to view only the variables popup?

[@yourdan-j3z]

No % values allowed for line-height (number) variables, only solid numbers? 😥

[@kp_porter]

Exactly! What a major oversight.

[@sangio_davese]

A clear and succinct walk-through with a solid follow-along community file. Hopefully, % for line height comes soon! I am definitely interested in a deeper dive on when to use variables and when to use styles.

[@mishanpatel7440]

We really need a video for when to use variables and when to use Styles. !!!!!!

[@Krasniysharigg]

It's simple: use styles until variables are out of beta (they're still very limited, don't support gradients, and half the typography functionality)

[@PerpetualEducation]

Styles might just be the way we combine variables.

[@fryonthemoon]

That's a cool feature, thanks!

I'm watching the Framework presentation right now. I've to confess how excited I'm feelling with all these updates. I think today I'll start working on typography variables 😁

[@cinderful]

I felt Marchin's presence in this video from the start. Thank you Figma team for all of the very detailed and nerdy thinking that went into this!

[@Sanny.V]

Thank you! This is a huge benifit in our workflow. 🎉

[@almudenadenoriega600]

Thank you very, very much!!! Absolutely, I'm super interested in a deeper dive into when to use variables or styles.

[@Mizko]

Great update!!! But now I need to re-film all of my Variables course lessons 😅

[@Fabian-fk8qs]

😄 Lucky is who already bought your course and get's the update for free. You are doing great work Mizko!

[@xinyueeeg]

Great! The switching of text variables between mobile and web interfaces works really well with Breakpoint design.

[@miurellgonzalez5785]

Nice! I was waiting for this!! :D

[@ulvinomarov]

Since Figma launched in 2012, I have been waiting this functionality 🤩

[@JacobODonnellDesign]

This looks very useful! Could we get CSS Grid mode for Auto Layout and Z-Index control sometime as well? Then Figma would have pretty much everything I could want for a web design tool.

[@horoman]

We have layers that act in a similar way as the z-index. Could you please explain it more in deep?

[@JacobODonnellDesign]

​@@horoman The biggest issue for me is when you turn on auto layout, the z index is determined by layer order. It works great the vast majority of the time, but it can cause issue with dropdown menu hover effects. If I have a dropdown menu when hovering over a button, if the button is inside a child frame where there is a parent frame set to auto layout, the hover dropdown can be overlapped by the content in the next child frame. This occurs because the position of the child layers are tied to their order in the layer panel. It can mitigated by turning off auto-layout in their parent container so then the position isn't tied to layer order, but then you lose out on auto layout. Hopefully I explained that well enough to get what I mean. It is much easier to show an example, but I don't think I can add a link in youtube comments.

[@abhimestri5319]

@@JacobODonnellDesign We can use negative spacing in auto layout.

[@horoman]

We are using percentages for our line heights. This feature still needs to be developed yet, right?

[@nasmith67]

Could a string variable be used for that??

[@horoman]

@@nasmith67 I attempted to apply it, but it is not being “recognised” as a property for the line height.

[@AndreiValentim]

@@horoman same here

same...

[@lhtram85]

same issue..

[@ChristTheKing70]

5:58 I experimented on that and found out that using T-String is actually better than using #-Number, though the only change you could make from the video above is actually changing the name to its weight number, For eg: Variable: T-String Name: 400 Value: Regular The reason being: 1) NumberCluster: When you use the #-Number style to name the font weight, its value also appears on the variable dropdown when you wish to apply a variable on your font size (funny I know). This could lead to confusion or endless scrolling when searching for what you want. 2) Versatility: The T-String naming style will be especially important when you're working on projects that has italicized text (ie italics), sadly this is where the #-Number style falls short. You could name your italicized text this way: Variable: T-String Name: i400 Value: Italic Hope this helps, God bless. P.S: The speaker's voice is angelic😇

[@Angie.K_ProductDesigner]

와 귀에 쏙쏙 들어오는데요!!! Thank you!!! ❤ What a clear & cozy voice!!!

[@anjumayoub9077]

It's great, but I'm only thinking that it's time consuming to manually apply variable one by one for each text style. Suppose we need to apply font family "DM Sans" to each sizes, we can select all sizes and apply that font family variable, it would be easy 😅

[@fortyozsteak]

Yea but what's the point? Are you ever going to change your font...

[@Navid-UX]

You can follow this workflow: export styles to Json file > make batch changes in a text editor (e.g. Sublime Text) > import Json to Figma. Its really simple and quick.

[@vietdo493]

Great! Thank you!

[@martynbowis4570]

Unfortunately, updating the characters of a text node will still break any applied formatting. Try formatting one of the words in a text node bold using the new variable method, and you will see it turn bold. However, now try and update that text node characters and you will see the bold break and all the string revert to look the same.

[@djashawe88923]

Thanks, Figma, for the great content as always. We use Primitives and Tokens for color aliases. Isn't it best practice to do the same for Typography (font weight, size, line height, etc.)? 🤔

[@Dushan-rv7to]

Are we going to pretend component variants don't exitst.. Wouldn't changing the typography through the variable modes break components with mobile variants?? For instance, if the component is set to it's "Desktop" variant and then you change the variable mode of the text to "Mobile" then it would be the wrong text for the "mobile text" for the "desktop" variant of the component. Am I missing something?

[@ahzootube]

Hey @figma Would it be possible to launch variables library presets? What I mean by that is maybe a basic or fundamental collections and variables to simply fill in and optionally add more. I think many designers would appreciate some kind of structure to aliases to develop faster with better understanding.

[@imtiazqazi]

Great. can I use % in line height ?

[@lhtram85]

same question, i can't use % with #number, and If I use % with #string, it will not appear when selecting a variable in the text style.

[@perliva]

Great! Finally! Please allow percentages as line height-

[@Jizansanu]

Thank you maam, after long wait, now most of the things are possible. Thank you for the gradients to the variable, thanks for giving full control over fonts and values. This is awesome🎉

[@randallparrish5696]

Question: I’m trying to build a library for iOS and Android simultaneously. Type is the only differentiator so I want to consolidate. How do I set it so that I can easily set up a token framework that’ll easily let me switch between SF and Roboto from the layers panel dropdown?

[@M0ELgendy]

I don't know what is the actual benefits for creating all of those variables to the font preferences while those set of fonts already defined as a "Styles"? is it just to have the scaling system in a memory or there something more I missed? this is an important question because I feel it wasting a huge time building those variables for each property and this will consume a lot of time to the client. thoughts on that?

[@CrummyKyle]

Are there any plans to add the ability to use strings for line-height? I'd love to be able to put in a percentage value rather than have to make px based line heights for every font size.

[@BrialMusic]

Just in time 👏

[@MarcinBauer]

Finally... but is this the pace a big (and highly valued) company should move in? Seems features like this take ages for Figma, where Framer is releasing features like this on a monthly/weekly basis.

[@chriscasey2353]

would be good if line-heights could be percentages of the font-size

[@KD-tp6er]

What's annoying is, say if the title Space Grotesk had different font weights in the design system, you have to create text styles for each, like title/300, title/400, title/700. Why can't I create a text style, but then use variables to tweak the font weight as and when?

[@visibleghost1]

coolio, love seeing variables become more and more useful!

[@NadiaWiegand-lz7ys]

thank you for always updating figma with lovely features that us designers really need for better processes. this is game changing and awesome to use. i'm still missing the option for type settings like text decorations within my variables. also there is a huge need within the community to rearrange variables within the panel (f.e. drag and crop / copy paste). is this something you have on your roadmap?

[@rohitjadhav8744]

Wow!! Any chances to have variables for auto-layouts as per resolutions??

[@НиколайМакаров-щ6к]

It would be great to add the ability to calculate paragraph spacing mathematically. For example, body paragraph spacing = body line height * 1.5, title paragraph spacing = title line height * 1.25, etc.

[@GuoqingZhao-d8s]

at first how can i learn in this sweet voice？？ then that‘s so nice 🤣🤣

[@canaiv9154]

We need variable support to resizing, text alignment, case and decoration as well.

[@danwallin9028]

@figma Love this feature, but it seems to fall short for our use case. We are hoping to use variable modes to switch styles between our 3 brands, 2 of which use all caps for headings, the other brand uses title case. Is there any way to control the case of a character style using variables? If not, then when switching from one mode (brand) to another, we are getting whatever the default case is for the character style. If this isn't a feature now, do you have plans to add this in the future? 🤞

[@mayowaogundeji]

Hey I seem to be struggling with the same problem. We currently have 2 brands with different Header fonts but the same body font. This is for marketing but for the products we use 1 font family with different font styling. After watching this I got confused on how to create modes for these use cases as well as file naming : eg - BrandName/font/family.... Can you help please?.

[@maximenes]

There's a way to do this. Go to the Properties' advanced settings once setting up the Token. One way to do that is to select the typographic style in question on the Design panel, click on the "More" icon, and on the Properties panel, click again on the "More" icon. In there you have tens op options, divided within the tabs "Basics", "Details" and "Variable". The case can be adjusted on the "Basics" tab

[@danwallin9028]

@@maximenes Is this in beta or something? I see the "Basics" and "Details" tabs but don't have a tab for "Variable" unfortunately. I'm able to adjust the case in the basics tab just fine currently but would like to be able to control the case from one mode to another by binding a variable to the case. If this is possible, please let me know. Thanks!

What do you recommend when you have a design system as a library on one file and a bunch of files for separate projects and different teams ?

[@panther0920]

I hope that it will become possible to specify two font families in a single text layer. We need to control both Latin and Japanese characters.

[@megaroeny]

💡What if you have a generic "Dimensions" set of tokens, and then you could reference those into the line-height, font-size, etc. values? Would that not be recommended?

[@fryonthemoon]

Would be great to link variables to text and boolean properties of the component instances. Hi @figma team any plans for that?

[@ludovicabonaldo]

Amazing 🚀🥳

[@BS-gr3bi]

Great, now please make possible to set colors for gradients with variables.

[@mischugo]

Font weight or underline or both -> possible for selected part of text? ;-)

[@cocabangaa]

Finally. Thanks. 👍

[@ily2a]

why isn't the line height support % value? I've always used % ...

[@Krasniysharigg]

0:30 fonts string variables isn't available for me (But at the same time, font's number variables are available). Strange, is the functionality enabled gradually/in parts? 🤔

[@grlcanrock]

I like this new feature but do people still find that it's actually helpful to have both a desktop and mobile variant within a component side by side rather than just having one variant and then going to the page layouts to change the type variable to mobile?

[@Underhills]

You don't get to make any variables if your using a designsystem, cause all of them will be created, stored and administrated from there. You can use the String values for some local interactions, but that's mostly it.

[@pelangos]

It would be cool if we can apply variables to an entire project too so they apply on all design files within that project

[@jossandqvist]

This is awesome but we NEED to be able to use percentages

[@PerpetualEducation]

What are you most excited about with variables for typography: This is a great start! Having relative line-height as we do in CSS with just 1.4 would be ideal, and if not a float, then 140%. But having variables for HSL color type things - and for gradients would be much higher on our list. HSB(@hue, 60, 100) etc. EDIT: looks like we have the ability to use color variables in gradients now! : )

[@koma7252]

i love your voice, please put more hiss in the audio it's very pleasant

[@janniklas.design]

Love it. Thanks

[@VanillaVercetti]

Reminder that having 5 Variable Modes and above is locked behind a $75/month paywall

[@selinov]

Variables are useless to my team if they only apply to non-nested components. Coded apps and enterprise product designs are made from many nested components. We can use variables once we can apply and change variables to the child components.

[@AlejandroOrtizJr-fi4xj]

Isn't this where Aliasing comes in if I understand it correctly?

[@ajsupanatp.4314]

Line height as % please.

[@MaxWeir]

Great update ❤

[@1deplatt]

hmmmm. keeping styles huh?

[@itsaboy]

Finally 🔥🔥🔥

[@aamasudbdc]

Great stuff!

[@varunsaini6764]

Hi, Could you please tell me how to create a variable for the "Auto" line height in Figma. The line height field does not accept string variables.

[@ViruX93]

When I created responsive typography styles with variables like shown at 10:00 I found out that the thumbnails of the sizing variables shows the wrong values. For desktop my mobile values are shown, vice-versa, depending which values are defined in the first column. It's a display bug I believe.

[@djnizzi]

LOOOOOVEEEEEE😍🥰🤩

[@ricksande2210]

Slowly making styles redundant? I feel like they have duplicate functionality. Or is that wrong?

[@mvjdk]

They have addressed this a few times. Styles are seen as a combination of multiple variables and variables are only single atomic values.

[@mrshahbaz82]

need update about Code fullfill code

[@valeassiso89]

I have a problem, I have 4 modes already, interface desktop and mobile and banner desktop and mobile (don't ask why it was like this before my time) and the designers are not ready to change to variables. Can I determine if my style type is in a mode or another so my designer can just keep doing thinks the way the are until we can make a workshop?

[@LuisPauloLohmann]

Where is the layer section to select variable mode in the new UI? I can't find it anymore.

[@LuisPauloLohmann]

Nevermind... it's in the little gear in the Appearance section now.

[@millionrashon]

Can't find font family variable, I do have variables on other stuff but not on font family, any suggestion?

[@MrRubiNguyen]

Wait Effect (Shadow....) Variables, Value by percent, Rixed Ratio

[@steffsamtoy3310]

🥰🥰🥰🥰🥰🥰 Love it !

[@liamfarrell3281]

how do we control type colour with variables?

[@fortytwo244]

You can't lol

[@yakaspectrum]

Does anyone know how to fix this issue? I can see variable collections from other projects in my current project. How can I configure it so that when setting the theme, I only see variable collections from the specific project I'm working on?

[@bradmacdonald6591]

The Habits design team may want to adjust the line-height value for the title 3xl style - at 48/40, we run into the issue of descenders and ascenders overlapping, which isn't ideal for legibility/readability.

[@Figma]

Hello, thank you for spotting this error! That was a production mistake on our end. We've updated our Figma community file (www.figma.com/community/file/1298672675597243186/habitz-design-system-with-variables) to reflect the accurate line-height value.

[@bradmacdonald6591]

@@Figma You're welcome, thanks for the reply :)

[@psddesignernet]

How to add line/height but in % ?

[@nguyenlong-qr3fd]

OMG 1 thay đổi thật tuyệt vời!

[@АлексейКраснополин]

And this whole wonderful system fails when I have a h6 of 14 pixels in the mobile version (such a specific font), and my body text is 16 pixels in both the web and mobile versions. Cascade system of text styles for different resolutions still looks much easier and clear to use and support. Wish Text Styles tool could be more friendly in Figma UI (larger window or separate selection panel, ability to copy groups, visible parameters when selecting font layer etc.).

[@musikundspiel1008]

Finally 🎆

[@lolidolux]

Line heigh - impossible to calculate and use. We need to use % somehow.

[@Евгений-г9щ7у]

Where is the basic text size like rem in web?

[@lepdien]

I don’t appreciate it, unless you support percentage in these stuff, especially line height, letter spacing, I prefer using percent to pixels. I also HATE the feature of copying unpublished variables without asking. It makes my files a mess. People in the company don’t quite know variables so so added in the file after each time they copy and paste. Then they will accidently use those pasted variables instead of existing ones in library.

[@horoman]

I agree on the line height limit. We also use it, it is much more efficient. Regarding the publishing issue, I usually exclude specific variables from the publishing, and you can achieve this by editing each variable and activating hide from the publishing.