Variables for Typography in Figma - The Ultimate Guide

Подписаться 100 тыс.

Просмотров 6 тыс.

50% 1

🚀 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 :)

Кино

Опубликовано:

30 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 23

@akhadir27 11 часов назад

Thanks. That is really helpful. Much better described than Figma did 😂

@user-jz9vs4gn4j Месяц назад

Thanks for an amazing video.

@anikislam6842 Месяц назад

Brilliant ♥♥

@shafaquesiddiqui6644 Месяц назад

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

@AICreations432 Месяц назад

Great video kindly create a video on ideation phase

@juliec5798 Месяц назад

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?

@DesignPilot Месяц назад

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.

@hardboiled2000 21 день назад

Ive been struggling to name the line height and letter spacing tokens and you skipped over it? Are you having difficulty with it also?

@DesignPilot 21 день назад

I added the line height at the end. I did all the letter spacing tokens. It’s not that hard

@user-iu8mn6du2s 16 дней назад

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

@DesignPilot 16 дней назад

Why do you want to do that?

@theafrotainer 6 дней назад

@@DesignPilot same here, because I'm working with a system that has different colors for Dispaly text, heading text and paragraph texts

@DesignPilot 6 дней назад

@theafrotainer It doesn’t have to be connected

@nourhanbatheesh7966 28 дней назад

where can I get the design systems course?

@DesignPilot 28 дней назад

Learnproduct.design/designsystems

@SwetaGhosh-sr2cf Месяц назад

I want to join your Discord group, but the link is not working! What to do? please tell me, sir!!!!

@DesignPilot Месяц назад

It’s been inactive for many years

@SwetaGhosh-sr2cf Месяц назад

@@DesignPilot I have some queries..how can I go ahead!?

@DesignPilot Месяц назад

@SwetaGhosh-sr2cf You can send me a message on Instagram

@DragonWolfGamer 18 дней назад

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

@DesignPilot 18 дней назад

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.

@DragonWolfGamer 18 дней назад

@@DesignPilot actually you mentioned this in on of your chapter that ux research is overrated but it's in comming soon state