Figma tutorial: Variables for typography

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.

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:

Help center articles:

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 ⬇️

____________________________________________________

#Figma #Config #FigJam #Tutorial #NothingGreatIsMadeAlone #design #tips #DesignSystems

[wonsunparque]

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

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.

[GlebSoin]

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

[RIPKaunas]

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

[robertopatron]

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

[aaditiakolkar]

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

[lucidsam]

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

[deepeebee]

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

[AndreiValentim]

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

[BrunoAlves-uysl]

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

[TylerColbyRichardson]

Welcoming this update with open arms, thanks Figma! ❤

[Angie.K_ProductDesigner]

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

[sachaaaj]

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

[lianahakobyan]

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

[mishanpatel]

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

[jeremydennis]

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?

[kai]

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.

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

[yourdan-jz]

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