Variables for Typography in Figma - The Ultimate Guide
Vložit
- čas přidán 30. 07. 2024
- 🚀 Get 2 free months of Skillshare Premium & watch my design course for free: skl.sh/2TVhf8z
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: • Ultimate Guide to Figm...
🔗 Ultimate Guide to Typography: • The ULTIMATE GUIDE to ...
🚀 The Ultimate Guide to Become a Product Designer: learnproduct.design
🚀 The Super Ultimate Guide to Design Systems: learnproduct.design/designsys...
🚀 Create an account on Mobbin for free:
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:
• The Mega Product Desig...
Webflow Course for Beginners:
• Webflow Course for Beg...
Photoshop Tutorials:
• Photoshop CC Tutorials
Illustrator Tutorials:
• Illustrator CC Tutorials
After Effects Tutorials:
• After Effects CC Tutor...
UI Design Tutorials:
• UI Animation/Interacti...
Design Resources, Tools and Softwares:
• Design Resources, Tool...
Adobe XD CC Tutorials:
• Adobe XD CC Tutorials
eSports Design Tutorials:
• eSports Design Tutorials
--------------------------------------------------------------------------------------------
Contact me :
Portfolio: chethankvs.design
Twitter: / kvschethan
Instagram: / design_pilot
Mail: designpilot21@gmail.com
Behance: behance.net/chethankvs
Dribbble: dribbble.com/chethankvs
--------------------------------------------------------------------------------------------
LIKE, SHARE, COMMENT & SUBSCRIBE :) - Krátké a kreslené filmy
Thanks for an amazing video.
Brilliant ♥♥
Great video kindly create a video on ideation phase
Hi Chetan sir, I am self taught UI Designer. I have worked as UI designer. currently struggling to get job. Do you also give online classes? I want to learn UX/product design to build my portfolio to land good job. lots of love ❤ for your content on youtube 🥰from India
Hi there, why did you assign the raw variable for the font family to each font style instead of assigning the font family to the semantic token?
Good question. Ideally you can either do it for the semantic token or the raw token. In this case I just have 1 font and I’ll never change it, so updating it won’t be a problem in the future if I ever have to.
Thanks. That is really helpful. Much better described than Figma did 😂
Ive been struggling to name the line height and letter spacing tokens and you skipped over it? Are you having difficulty with it also?
I added the line height at the end. I did all the letter spacing tokens. It’s not that hard
Are these large, medium and small categories of text are for mobile, tablet and desktop screens respectively?
Not at all
Hi! can you tie color to font style? I tried to create color property but i can't seem to connect it together with the font style
Why do you want to do that?
@@DesignPilot same here, because I'm working with a system that has different colors for Dispaly text, heading text and paragraph texts
@theafrotainer It doesn’t have to be connected
font styles dont support color.
The naming conventions are puzzling to me...I see use of XS, S,..and then 100, 200, 300 for Font size in particular. Any opinions on this? And looks like you wouldn't need 'Font-Size' in the primitive token name, just '100, 200...'. Many thanks for posting this.
Yes absolutely
Informative and helpful video again🔥🫡🙌
where can I get the design systems course?
Learnproduct.design/designsystems
I want to join your Discord group, but the link is not working! What to do? please tell me, sir!!!!
It’s been inactive for many years
@@DesignPilot I have some queries..how can I go ahead!?
@SwetaGhosh-sr2cf You can send me a message on Instagram
i am very intresting in one of your statement that ux research is overrated can you please make a video and justify this because in everyone's perspective ux research is most crucial and compulsory thing
Not sure what the context was when I said that. But I meant it was overrated in the sense that not every problem needs extensive amount of research to be solved. Not everyone problem requires all the 100 methods to be performed. There is no template or strict process or rules.
You look at a problem, identity what information you need and what is the best way to get that information. Simple.
@@DesignPilot actually you mentioned this in on of your chapter that ux research is overrated but it's in comming soon state