Figma tutorial: Variables for typography

Thanks! Share it with your friends!

You disliked this video. Thanks for the feedback!

Added 1 week ago by admin

5 Views

Figma is free to use. Sign up here: https://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: https://www.figma.com/community/file/1298672675597243186/habitz-design-system-with-variables

Check out Marcin Wichary's video to learn more fonts and font weight: https://youtu.be/kVD-sjtFoEI

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: https://youtu.be/1ONxxlJnvdM
Tokens, variables, and styles: https://youtu.be/JyCmacSyDY4
Intro to design systems course playlist: https://www.youtube.com/playlist?list=PLXDU_eVOJTx6vqOWJSWH87Zb5-riiG63A

Help center articles:
Guide to variables: https://bit.ly/3Nh7JaK
Overview of variables: https://bit.ly/44bD2dG
Create and manage variables: https://bit.ly/447B9im
Apply variables to designs: https://bit.ly/3qVsnWo
Modes for variables: https://bit.ly/3qS3GKk
The difference between variables and styles: https://help.figma.com/hc/en-us/articles/15871097384471-The-difference-between-variables-and-styles

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): https://twitter.com/figma
Instagram: https://www.instagram.com/figma
LinkedIn: https://www.linkedin.com/company/figma
Figma forum: https://forum.figma.com/

____________________________________________________

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