Variables for Typography in Figma – The Ultimate Guide
30.2K views on YouTube
๐ Book 1:1 Tutoring Sessions with me and take your Product Design journey to the next level: https://www.learnproduct.design/sessions
In this video, I will talk about the all-new Figma Typography Variables. We will start by understanding if you really have to use variables for typography. Then we will take inspiration from Uber and Shopify to set up typography variables for a real project
๐ Figma Variables: https://youtu.be/r4t5FlcRPg8?si=DTKR0VtFhYj6456_
๐ Ultimate Guide to Typography: https://youtu.be/xnqdvs4zp2o?si=HpqTzb1dbCjOVhXy
๐ The Ultimate Guide to Become a Product Designer: https://learnproduct.design
๐ The Super Ultimate Guide to Design Systems: https://learnproduct.design/designsystems
๐ Create an account on Mobbin for free:
https://mobbin.com/?via=chethan
๐ถ Chapters:
00:00 Introduction
01:41 Overview of Color and Typography Tokens
03:54 Uber Design System
06:31 Shopify Design System
10:02 Should you use Variables for Typography
11:20 Defining the Token Structure
14:14 Font Family Tokens
18:00 Font Size Tokens
27:40 Font Weight Tokens
31:27 All Tokens
—————————————ยญ—-
Mega Product Design Course for Beginners:
Webflow Course for Beginners:
Photoshop Tutorials:
Illustrator Tutorials:
After Effects Tutorials:
UI Design Tutorials:
Design Resources, Tools and Softwares:
Adobe XD CC Tutorials:
eSports Design Tutorials:
——————————————————————————————–
Contact me :
Portfolio: https://chethankvs.design
Twitter: https://twitter.com/kvschethan
Instagram: https://instagram.com/design_pilot
Mail: designpilot21@gmail.com
Behance: https://behance.net/chethankvs
Dribbble: https://dribbble.com/chethankvs
——————————————————————————————–
LIKE, SHARE, COMMENT & SUBSCRIBE ๐