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.
Really appreciate your effort. Scroll through a lot of YT videos on this typography variables but yours is the one that really easy to understand, straightforward. Thanks a lot.
You can also see the font weight by clicking on the Type Settings panel and then (with the font selected) you click on the label Variable :) But if the font you're using is not a google font, or only have one weight, the option "Variable" will probably not appear. Oh, and thank you so much for making this video, you saved my work!
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 ✨
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❤
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?
Good question! It all depends on what you need for your project. I like to show different ways of doing things and then people can use my examples as a jumping up point to create their own systems that work best for them ☀️🙏🏻💛
@@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....
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,
Great question! Modes are the best option because then you can flip between them easily (I show an example of this here - *Type and Gradient Variables* - th-cam.com/video/2DpDh1CyzPg/w-d-xo.html ). But if you don't have access to modes I would say to just create a different type group for them so it's easy to search for when assigning ☀️🙏🏻💛
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
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: th-cam.com/video/OrpcxfG_qY4/w-d-xo.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. ☀️🙏🏻💛
It started out good but the annoying distracting music is probably not a good idea when you are trying to communicate and teach. I made it to 5:16 before I couldn't stand it any more. Really wish I could have focused on her message.
Hello there, I have analyzed your TH-cam 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?
This is the best tutorial for working correctly with typography. Thanks for creating these videos
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! ☀️🙏🏻
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 appreciate your effort. Scroll through a lot of YT videos on this typography variables but yours is the one that really easy to understand, straightforward. Thanks a lot.
Wow, thanks! ☀️🙏🏻💛
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! ☀️🙏🏻💛
Love this! ❤ Yaassss for more design system stuff. Very useful and practical. Keep it up. 🔥👏👍
Thank you! Will do! ☀️🙏🏻💛
So organized! Thanks for the video 👏🥳
You're welcome! ☀️🙏🏻💛
Gracias por tu tiempo y enseñanza
Gracias! ☀️🙏🏻💛
You can also see the font weight by clicking on the Type Settings panel and then (with the font selected) you click on the label Variable :)
But if the font you're using is not a google font, or only have one weight, the option "Variable" will probably not appear.
Oh, and thank you so much for making this video, you saved my work!
Great tip! thanks! ☀️🙏🏻💛
Missed your videos, good to see you back!
Good to be back ☀️🙏🏻💛
I love your videos. you are the best
Thank you so much ☀️🙏🏻💛
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 ✨
aww Yay I'm glad it helped! ☀️🙏🏻💛
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! ☀️🙏🏻💛
It was a good learning video, thanks for sharing.😊
You're welcome! ☀️🙏🏻💛
After a long time 😢 really miss your lecture
Good to be back ☀️🙏🏻💛
Welcome back :)
Thanks!☀️🙏🏻💛
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 ☀️🙏🏻
Great Video! Can we get a video on detailed explanation on apple's HIG please?
Will add to my list! ☀️🙏🏻💛
Thank you so much for your videos. Can you please make a seperate videos for biggners to differentiate design system web vs mobile app?
You're welcome! A mobile design video is coming very soon! ☀️🙏🏻💛
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! ☀️🙏🏻💛
How would you combine this with the responsive typography from your other video?
Good question! It all depends on what you need for your project. I like to show different ways of doing things and then people can use my examples as a jumping up point to create their own systems that work best for them ☀️🙏🏻💛
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....
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,
Great question! Modes are the best option because then you can flip between them easily (I show an example of this here - *Type and Gradient Variables* - th-cam.com/video/2DpDh1CyzPg/w-d-xo.html ). But if you don't have access to modes I would say to just create a different type group for them so it's easy to search for when assigning ☀️🙏🏻💛
oh wow. i never knew dev mode would automatically assign a number weight to a font.
☀️🙏🏻💛
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! ☀️🙏🏻💛
can we export the styles through our figma projects?
Why Gap..... you teach amazing
Thanks! ☀️🙏🏻💛
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 ☀️🙏🏻💛
Your videos are good, but please avoid using shortcuts, and try to slow down the speed a bit.
Hey TD, quick question. Say you were creating variables for a typographic system like you've done on a previous video: th-cam.com/video/OrpcxfG_qY4/w-d-xo.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. ☀️🙏🏻💛
It started out good but the annoying distracting music is probably not a good idea when you are trying to communicate and teach. I made it to 5:16 before I couldn't stand it any more. Really wish I could have focused on her message.
Sorry to hear that! My music is on -40 volume but I guess it's still loud on some speakers ☀️🙏🏻
Hello there, I have analyzed your TH-cam 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 ☀️🙏🏻