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

Check out Marcin Wichary's video to learn more fonts and font weight:    • I Pressed ⌘B. You Wouldn't Believe Wh...  

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 to variables  
Tokens, variables, and styles:    • Tokens, variables, and styles - Updat...  
Intro to design systems course playlist:    • Introduction to design systems  

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/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: https://forum.figma.com/

____________________________________________________


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