Figma Typography Variables | A Setup + Overview Guide

Figma's latest release on type variables is here! This video provides an overview of how to use type variables, and our initial approach to setup your type variable library!

0:00 An Introduction
0:28 Type Variables Overview
5:31 Brand Collection
10:32 Alias Collection
18:36 Mapped Collecton
30:31 Tying Everything Together

#figma #uidesign #uxdesign

[jainulabudeen]

dude this looks quite complicated. do we actually need alias and mapped collection for typography? when will these branches and alias become useful?

[wonsunparque]

I think this is a bit over-engineering, especially since this is a brand new feature and we don't exactly know where the optimal place is, it is better to build a simpler version and only expand when needed. Especially in case if Figma makes some changes and we may need to alter our approach later.

Also, it may be better to organize the aliases simply by style like "body", "H1", "caption", etc, and then within the group of "body", we have "font family", "weight", "line-height", etc. This makes reading and selecting them for font styles later much easier and less prone to error.

[mischugo]

Thanks a lot. But with the number of settings and then all the scrolling to find the desired entry (see Time Stamp 32:00 and further), I prefer to stay with my settings. Styles instead of variables :-)

[AkashUpadhyay-hj]

How do you use underline or Caps properties when defining typography tokens?

[kareemmohammed]

great!!
Now, how will this method be prepared and presented to developers in a simplified manner?

[Underhills]

Why did you assign your heading in an invers manner, with secondary to the primary weight and the primary to the secondary weight? I went back and forth to see if I could understand that but never did.

[nicolasmatiasnegri]

I really like this video but what is the advantage to use these tokens instead of styles? Isn't simplier just to use styles?

[mikedawson]

If I have two brands that use different colours and fonts, does it make sense to define these in the same 'theme' collection? What I'm envisioning is that I would have a single brand dropdown in Figma (mode selector) which would allow me to toggle between brands - having the colors and font family update in unison. Are there any drawbacks I'm not considering?

Another question - how do you enable the designers consuming the system to add brands (assuming they don't have access to variables library/theme variables). The use case is theming a UI for a client/guest customer rather than a house brand - which we would set up as the design systems theme. Thanks!

[DerrickRollins]

Our design system needs to support three platforms (web, iOS, Android) each with their own font family. Web also has size variation depending on the breakpoint. Will you be covering how to properly set that up in a future video?

[Underhills]

Figma should add an easier way to directly see the px values of the alias variables in the variables panel, now we need to detach the alias and then undo the operation in order to get that info just like you demoed. It could be a preview on hover, and perhaps tie that to a view option that could be defined in a variable settings section or simply in the view options in that top left global menu or something. The way it works right now is too quirky. The variable feature is out of Beta, but as you pointed out it's still a bit buggy at times. 🐛

[iPAINTCODE]

Font styles must be a typo from Figma or they’re adding a new option for CSS supported font-styles in the UI. Then again it’s mainly 2 values used in CSS but still a property of the spec. If you watch their intro video they put it under Strings but there’s no way to use it in the text properties panel.

W3C:

The font-style property is mostly used to specify italic text.

This property has three values:

normal - The text is shown normally
italic - The text is shown in italics
oblique - The text is "leaning" (oblique is very similar to italic, but less supported)

[cyberfiber]

Please help me, how do i use toggle button to change font style? For example when i toggle it on it will change to Poppins. But if i toggle it off, it will change back to Inter. Just like how toggle dark mode & light mode works except this is fomt style please 🙏

[hardboiled]

The company I work for has multiple brand & we design for web & mobile, we are trying to setup mode swapping to cut down on reskinning work (and hell of a lot of typog style swapping), whats a good approach?

[ounasi]

This is obviously a half-baked feature with existing design requirements but a rough presentation. In my opinion, this feature can be ignored for now, and Figma will definitely bring new operational logic in the future.

[AmishEspacial]

Hi! Thanks for the video. I've created a collection with its typography and created a desktop and mobile mode. I have also created (previously) both breakpoint styles: desktop and mobile. Now, is the use of a mobile style still necessary? How do my developers read the variables I have applied to the typography in both modes? The issue is that if I create a card and apply the mobile mode: the whole card will be mobile mode but if the dev clicks on each piece of text, it will still appear as a desktop style (with the mobile value variables). I don't know if this is understandable :D

[exploresque]

Man, I am wondering, why should we make it this much complex when we can just set font styles?

[anoldasgupta]

Is there any way if we could use % in letter spacing as I was trying it changes to pixel only...as we know the letter spacing varies basis font size...pls suggest a best practice to overcome this problem...

[timothychinye]

Seems like I'm going to continue using Tokens Studio

[yakaspectrum]

it's so hard... figma turns into photoshop step by step. There are so many things that are not intuitive: I created a new file and for some reason I see tons of variables in the new project. I don't know how to manage these cross-file variables... I feel like an old grandpa with the latest technology in my hand

[lolacademy-yn]

This figma shit is getting complicated day by day, Lets jump to framer and build Product direct, , WTF, , Grow up . this is getting too technical,