Figma tutorial: Variables for typography

Figma is free to use. Sign up here: bit.ly/3msp0OV
Variables and styles support a wide spectrum of design systems by boosting workflows and easing long-term management. We're excited to introduce variables for typography in Figma! In this video, we’ll create variables and incorporate them into an existing typography system. Then, we’ll use modes to power a responsive design.
Grab a copy of the community file to follow along: www.figma.com/community/file/...
Check out Marcin Wichary's video to learn more fonts and font weight: • I Pressed ⌘B. You Woul...
If you haven’t already, make sure you’ve caught up with the basics of variables, variable modes, and text styles. Check out the resources below ⬇️
Figma video tutorials:
Intro to variables: • Figma tutorial: Intro ...
Tokens, variables, and styles: • Tokens, variables, and...
Intro to design systems course playlist: • Introduction to design...
Help center articles:
Guide to variables: bit.ly/3Nh7JaK
Overview of variables: bit.ly/44bD2dG
Create and manage variables: bit.ly/447B9im
Apply variables to designs: bit.ly/3qVsnWo
Modes for variables: bit.ly/3qS3GKk
The difference between variables and styles: help.figma.com/hc/en-us/artic...
Video chapters:
00:00 Intro
01:22 Apply variables to font family
05:04 Apply variables to font weight
08:00 Apply variables to font size and line height
10:00 Set up modes for responsive designs
12:20 Outro
____________________________________________________
Find us on ⬇️
X (formerly Twitter): / figma
Instagram: / figma
LinkedIn: / figma
Figma forum: forum.figma.com/
____________________________________________________
#Figma #Config #FigJam #Tutorial #NothingGreatIsMadeAlone #design #tips #DesignSystems

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!

[@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

[@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)

[@Osigot]

​@@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?)

[@aaditiakolkar3317]

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

[@RIPKaunas]

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

[@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!

[@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.

[@TylerColbyRichardson]

Welcoming this update with open arms, thanks Figma! ❤

[@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!

[@Angie.K_ProductDesigner]

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

[@kai1218]

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

[@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.

[@Sanny.V]

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

[@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🎉

[@xinyueeeg]

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

[@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

[@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.

[@almudenadenoriega600]

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

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 😁

[@miurellgonzalez5785]

Nice! I was waiting for this!! :D

[@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!

[@ulvinomarov]

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

[@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?

[@fryonthemoon]

That's a cool feature, thanks!

[@BrunoAlves-uy3sl]

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

[@daniel397]

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

[@kp_porter]

Exactly! What a major oversight.

[@mishanpatel7440]

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

[@Osigot]

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.

[@vietdo493]

Great! Thank you!

[@janniklas-design]

Love it. Thanks

[@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?

[@MaxWeir]

Great update ❤

[@BrialMusic]

Just in time 👏

[@aamasudbdc]

Great stuff!

[@ludovicabonaldo]

Amazing 🚀🥳

[@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! : )

[@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!

[@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?

[@cocabangaa]

Finally. Thanks. 👍

[@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😇

[@perliva]

Great! Finally! Please allow percentages as line height-

[@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?

[@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?

[@selinovaldes]

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.

[@rohitjadhav8744]

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

[@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.

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 ?

[@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.

[@itsaboy]

Finally 🔥🔥🔥

[@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.

[@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.

[@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?

[@user-vo5sb8xr7h]

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

[@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.

[@djnizzi]

LOOOOOVEEEEEE😍🥰🤩

[@SachinGawas]

This is ❤‍🔥

[@michaelschultze3595]

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

[@koma7252]

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

[@canaiv9154]

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

[@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.

[@steffsamtoy3310]

🥰🥰🥰🥰🥰🥰 Love it !

[@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.

[@nguyenlong-qr3fd]

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

[@chriscasey2353]

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

[@fryonthemoon]

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

[@1deplatt]

hmmmm. keeping styles huh?

[@BS-gr3bi]

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

[@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?

[@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..

[@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?

[@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?

[@tethron.]

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

[@DeweyChris]

Finally 💥

[@millionrashon]

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

[@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?

[@Osigot]

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? 🤔

[@musikundspiel1008]

Finally 🎆

[@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.

[@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.

[@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

[@nikolar91]

That's all great but seems like I still need all my 30 styles. I still need to make Body S Regular, Body S Medium, Body S Bold, and then the same logic for Body M and Body L? I see that I can add variables for regular text except for font name and font weight. Why??

[@psddesignernet]

How to add line/height but in % ?

[@jossandqvist]

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

[@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.

[@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.

[@ily2a]

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

[@mrshahbaz82]

need update about Code fullfill code

[@ajsupanatp.4314]

Line height as % please.

[@liamfarrell3281]

how do we control type colour with variables?

[@fortytwo244]

You can't lol

[@MrRubiNguyen]

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

[@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 :)

[@lolidolux]

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

[@user-jj9hu2lu7z]

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.).

[@user-zd1sy3mk6o]

Where is the basic text size like rem in web?

[@ozbiljnik]

I expected new variable type for typography.

[@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.

[@LukasFigely]

❤❤

[@VanillaVercetti]

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

[@paulXmbingu]

Companies in the world should learn how Figma builds product, they listen to understand it's users needs first before jumping into building out features. Problem with most startups, feels like, is they were either mislead or misunderstood the meaning of the agile method of software development they are constantly changing out garbage hopping that customers will use only for them to realize that they have been wasting resources. Long story longer, thanks to everyone who worked on these updates.