Figma is free to use. Sign up here: [ Ссылка ]

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: [ Ссылка ]

Check out Marcin Wichary's video to learn more fonts and font weight: [ Ссылка ]

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: [ Ссылка ]
Tokens, variables, and styles: [ Ссылка ]
Intro to design systems course playlist: [ Ссылка ]

Help center articles:
Guide to variables: [ Ссылка ]
Overview of variables: [ Ссылка ]
Create and manage variables: [ Ссылка ]
Apply variables to designs: [ Ссылка ]
Modes for variables: [ Ссылка ]
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): [ Ссылка ]
Instagram: [ Ссылка ]
LinkedIn: [ Ссылка ]
Figma forum: [ Ссылка ]

____________________________________________________


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

свернуть