Glad to see you back! I did exactly like that but I've also use a responsive collection (with modes for desktop, laptop, tablet and mobile) for font sizes. Body doesn't change size, but headings and display font sizes adjust for mobile perfectly. Another thing, for some weird reason, maybe because I was using a custom font, weight numbers doesn't work, so I recommend to test each font with Weight number and Weight text variable. As always, a great video! I've been missing you.
Omg you're so back!! I've been bingeing your videos so badly lately, I feel like my figma acknowledgement was disappearing since you stopped uploading videos hahaha. I hope u ok❤
This is so beautiful Tair - I've created my own Typography system, and understood the Variables so easily 🎨❤. Really Appreciate you! & Hope you're having a good week ✨
How should I create typography variables if there are design systems for mobile and desktop screen? For example, if there are 2 kinds of font size for heading, subheading, title, subtitle, etc? Thank you,
Oooo great question! It would be a mix of primitives and tokens I think! This is a very good question though Ill add it to my list for a future video ☀️🙏🏻
I absolutely like all of your videos and this one is also great. The only question that I have is regarding H1 TO H6 Headings. SEO wise it would be better if we have all of those headings. What do you think about this idea?
Thanks for this preciuos explanation! awesome! Just i wanna know if we want set a typo for all breackpoint, i tryed to set them in a different mode but it dosnt work, the only way its create a different style for all of breakpoint? Body xl, body md, body xs for example? the typescale it the same, just we can use a different combination and weight of the same scale? Thanks for this helpfull channel
@@1980nikolov yeah number variables - so if you want 120% as your line height then calculate 1.2 * (font size) and that will be your variable for let's say "body small"
@@arjunjacob1505 Excuse my ignorance (I am new to design) but if you then change the Font Sizes then the Line Height would not change automatically (since not percentages), right? With Styles we could remedy that, no? But again, I understand that Variables would not be a "Single Source of Truth" in that case....
Why go through all those steps with variables in the texts if, when you create text styles and make a change, those changes apply to all texts that have that style?
Great question! It's because with this technique you can effect multiple styles at the same time! I show this at the end of the video where I change one font family variable and it changes a few different styles at once ☀️🙏🏻💛
Hey TD, quick question. Say you were creating variables for a typographic system like you've done on a previous video: ruclips.net/video/OrpcxfG_qY4/видео.htmlsi=qehCcn2MqUyQ7xrC What would be best practice? Would you have to create typography tokens for each of the different style weights? (e.g. Titles/H1/Bold, Titles/H1/Regular, Titles/H1/Light, etc)
Great question! The best practice is to "back yourself up" with variables. BUT sometimes that can be a bit excessive, so make sure to use what works for your system size and style. ☀️🙏🏻💛
Hello there, I have analyzed your RUclips channel and found out some problems, because of which you are not getting views and subscribers, do you want to talk about it for a while?
So organized! Thanks for the video 👏🥳
Glad to see you back! I did exactly like that but I've also use a responsive collection (with modes for desktop, laptop, tablet and mobile) for font sizes. Body doesn't change size, but headings and display font sizes adjust for mobile perfectly. Another thing, for some weird reason, maybe because I was using a custom font, weight numbers doesn't work, so I recommend to test each font with Weight number and Weight text variable. As always, a great video! I've been missing you.
Thanks! It's good to be back ☀️🙏🏻💛
Really cool! I would like to see a new design system series with all the new changes happening lately. Make it and I will follow along for sure!
Great idea will add to my list! ☀️🙏🏻
Gracias por tu tiempo y enseñanza
Love this! ❤ Yaassss for more design system stuff. Very useful and practical. Keep it up. 🔥👏👍
Thank you! Will do! ☀️🙏🏻💛
Like how you both sound out and caption your "shortcut moves". Little nuggets bring me to your tutorials all the time. Thanks, TD!
Can you tell I love keyboard shortcuts?? 🤪☀️🙏🏻💛
Can't wait to see more design system guide videos! Great job!
Thanks! ☀️🙏🏻💛
Omg you're so back!! I've been bingeing your videos so badly lately, I feel like my figma acknowledgement was disappearing since you stopped uploading videos hahaha. I hope u ok❤
Good to be back! ☀️🙏🏻💛
Welcome back :)
Thanks!☀️🙏🏻💛
It was a good learning video, thanks for sharing.😊
You're welcome! ☀️🙏🏻💛
After a long time 😢 really miss your lecture
Good to be back ☀️🙏🏻💛
This is so beautiful Tair - I've created my own Typography system, and understood the Variables so easily 🎨❤.
Really Appreciate you! & Hope you're having a good week ✨
How should I create typography variables if there are design systems for mobile and desktop screen? For example, if there are 2 kinds of font size for heading, subheading, title, subtitle, etc? Thank you,
Missed your videos, good to see you back!
Good to be back ☀️🙏🏻💛
to make different sizes for various screen sizes would you use modes at the primitive level?
Oooo great question! It would be a mix of primitives and tokens I think! This is a very good question though Ill add it to my list for a future video ☀️🙏🏻
I absolutely like all of your videos and this one is also great. The only question that I have is regarding H1 TO H6 Headings. SEO wise it would be better if we have all of those headings. What do you think about this idea?
Thanks! yes great tip! if you are working on a website than using H1-H6 is a great idea for SEO especially! ☀️🙏🏻💛
Thanks for this preciuos explanation! awesome! Just i wanna know if we want set a typo for all breackpoint, i tryed to set them in a different mode but it dosnt work, the only way its create a different style for all of breakpoint? Body xl, body md, body xs for example? the typescale it the same, just we can use a different combination and weight of the same scale? Thanks for this helpfull channel
Thanks! ☀️🙏🏻💛
Great Video! Can we get a video on detailed explanation on apple's HIG please?
Will add to my list! ☀️🙏🏻💛
Great video as always, why wouldn't you assign line-height and letter-spacing to variables as well vs letting the styles handle them?
Is that possible?
@@1980nikolov Yeah, there's an option to use a variable for line-height and letter-spacing
@@mirabilis-3000 How do you that? Number variable? Not with percentages though, right?
@@1980nikolov yeah number variables - so if you want 120% as your line height then calculate 1.2 * (font size) and that will be your variable for let's say "body small"
@@arjunjacob1505 Excuse my ignorance (I am new to design) but if you then change the Font Sizes then the Line Height would not change automatically (since not percentages), right? With Styles we could remedy that, no? But again, I understand that Variables would not be a "Single Source of Truth" in that case....
Why go through all those steps with variables in the texts if, when you create text styles and make a change, those changes apply to all texts that have that style?
Great question! It's because with this technique you can effect multiple styles at the same time! I show this at the end of the video where I change one font family variable and it changes a few different styles at once ☀️🙏🏻💛
Why Gap..... you teach amazing
Thanks! ☀️🙏🏻💛
Hey TD, quick question. Say you were creating variables for a typographic system like you've done on a previous video: ruclips.net/video/OrpcxfG_qY4/видео.htmlsi=qehCcn2MqUyQ7xrC What would be best practice? Would you have to create typography tokens for each of the different style weights? (e.g. Titles/H1/Bold, Titles/H1/Regular, Titles/H1/Light, etc)
Great question! The best practice is to "back yourself up" with variables. BUT sometimes that can be a bit excessive, so make sure to use what works for your system size and style. ☀️🙏🏻💛
Hello there, I have analyzed your RUclips channel and found out some problems, because of which you are not getting views and subscribers, do you want to talk about it for a while?
No thank you ☀️🙏🏻