I've been waiting for this update for ever - I was building a product and decided to just stop development because I really need the typography peice for it to be worth my time. Now I can get back to it!
Your tutorials are so easy to follow, and have helped me get to grips with the more advanced feature in Figma. I have a quick question, I know it's best practice to set up primitives for colour and then link to them through semantic tokens, is this the same for typography? Your video suggests you just have a collection called Typography and all values are controlled within that. I don't know whether this comes down to personal preference, but I'd be keen to hear your suggestions on this :)
Hey! I think with typography variables being so new I'm still trying to figure out how best to utilise them. I think it all depends on how complex your system is and also if you need to use modes or not. Remember there is never just one correct way to do things, it's all about what fits you and your system best ☀️🙏🏻💛
OMG!! I didn't know I can use variables for font sizes now! This is a game changer!! I'll have to update a lot of styles, but I can finally have an easy way of switching the typography scale from desktop to mobile!!!
Thank you - excellent from the first minute, I like how you explain from the start rather than assuming people know stuff already - Figma's walkthrough yesterday was not very clear!
Thanks for the wonderful tutorial. Very helpful. And something way off the subject - I am not a native english speaker, so the way you pronounce the name of the font "Urbanist"is very cute :) (in the phrase : "…you see that the title styles use a font called Pridi and the body styles use a font called Urbanist”. So nice. Greetings!
Hi. Thanks a lot for great tutorial! Quick question: Why use both variables and styles in Figma? It seems a bit redundant to me. Any reason or benefit in using both?
Variables are still a bit limited when it comes to colours. For example, styles can store images, gradients or multiple colour layers in one, and variables can not. ☀️🙏🏻
Great question! When Figma announced Variables way back last year they mentioned they are working on Theming which allow you to switch brands like you want but sadly it’s not live yet :/ For now you can use swap library but I’m not sure if it works for variables too 😢 ☀️🙏🏼
Well explained! The combination of variable+style is more clear with your explanation than Figma's. I was waiting for this Figma update a lot. I used to create components variants for text sizes or use same size for both desktop and mobile. Many things were possible on code and now it's better. I just to learn more about Code Connect now, but first, I've to create all typography variants for my design system 😅
Thanks! 💛🙏🏼 I felt a bit disappointed at the start of framework when I realised it’s not new variables but just the ability to control them with variables but once they got into how to use them with styles I got onboard! ☀️🙏🏼
8 місяців тому
@@TDSunshine yes! I've to think how to structure primitives and semantics for this new family
I have a question I've been wrestling with, in my team we not only have desktop & mobile versions of text styles but different brand skews, any ideas on what your approach would to be setting this up?
Great question! Figma did mention they are working on themeing for variables but not sure when they will launch it :/ In the meantime, if you have everything set up as styles you can use the "swap library" function to swap between two libraries and automatically change all the designs to a different theme. I have a video about swap library going live soon so keep an eye out ☀️🙏🏻💛
Very nice demo, thanks for sharing. As you mention there are many different weight classes and family weight names. The body type could have a Heavy weight and not a Bold, and the title/headline could have a Roman instead of a Regular, or a Book instead of Regular or Roman. Then you need to make variables with all the weight names for both types I guess, but there's no way to assign several weight names to the same type with a comma. There's no way of having several of the same label names for anything in the same group either, so you can't have one Medium name for title and one for body, then Figma prompts you to make each name unique. This type variable function doesn't manage authentic scenarios 😆 I have heaps of variables but there's no scope panel, no check boxes. I'm on a Pro license. And the variable panel doesn't work properly with focus states or keyboard navigation, pressing Tab doesn't provide expected movement so I constantly have to move between section with the mouse. Figma is so buggy it hurts!!
Thanks! I think thats why Figma give the option to use string and number variables to control the font width. Yes, each family might name the widths a bit differently but you will usually find they all use the same numerical values for the widths they offer. So using a number might be better for you. About the second issue, that is odd! are you using the browser or the app? might be worth trying to remove and reinstall the app. I hope that helps! ☀️🙏🏻💛
Variables are super useful not just for designing for different operating systems! they are great for prototyping in a realistic way, maintaining a single source of truth for strings and so much more ! ☀️🙏🏻
If you are a beginner I would recommend my video - *Figma beginner crash course 2024* - ua-cam.com/video/OtOXEKKScg4/v-deo.html I hope that helps! 🙏🏻☀️
Little do you know how much training I get from these videos you make. Thanks a huge for the education, TD!
Glad you like them! ☀️🙏🏻💛
Great work! I've been waiting for typography variables forever
Same! Thanks for watching 🙏🏼☀️
You are saving my life at work, thanks so much for teaching variables in a fun and easy way.
ahh yay! glad to hear that 🙏🏻☀️💛
Great work! I've been waiting for typography variables
Thanks! ☀️🙏🏻
TD Sunshine is the go-to UA-cam Channel for me if I need to learn new concepts related to UI/UX
☀️🙏🏻
I've been waiting for this update for ever - I was building a product and decided to just stop development because I really need the typography peice for it to be worth my time. Now I can get back to it!
it's so good right?? ☀️🙏🏻
@@TDSunshine Really completes it in my opinion, now you can do some cool stuff with modes for different viewstates.
Wonderful, very well explained. Keep us updated
Thanks! ☀️🙏🏻
Your tutorials are so easy to follow, and have helped me get to grips with the more advanced feature in Figma.
I have a quick question, I know it's best practice to set up primitives for colour and then link to them through semantic tokens, is this the same for typography? Your video suggests you just have a collection called Typography and all values are controlled within that. I don't know whether this comes down to personal preference, but I'd be keen to hear your suggestions on this :)
Hey! I think with typography variables being so new I'm still trying to figure out how best to utilise them. I think it all depends on how complex your system is and also if you need to use modes or not. Remember there is never just one correct way to do things, it's all about what fits you and your system best ☀️🙏🏻💛
@@TDSunshine thank you so much for the reply, makes perfect sense!
OMG!! I didn't know I can use variables for font sizes now! This is a game changer!! I'll have to update a lot of styles, but I can finally have an easy way of switching the typography scale from desktop to mobile!!!
You really changed my (work) life for the better!
haha yay! Figma keep updating it's hard to keep up but all so great! ☀️🙏🏻
Thank you - excellent from the first minute, I like how you explain from the start rather than assuming people know stuff already - Figma's walkthrough yesterday was not very clear!
Glad it was helpful! 💛☀️🙏🏼
Great! Thank you so much for such a great overview and positive energy! ❤
Thanks! ☀️🙏🏻💛
Thanks for the wonderful tutorial. Very helpful. And something way off the subject - I am not a native english speaker, so the way you pronounce the name of the font "Urbanist"is very cute :) (in the phrase : "…you see that the title styles use a font called Pridi and the body styles use a font called Urbanist”. So nice. Greetings!
haha thanks! Im glad you enjoyed 🙏🏻☀️💛
Hi. Thanks a lot for great tutorial! Quick question: Why use both variables and styles in Figma? It seems a bit redundant to me. Any reason or benefit in using both?
Variables are still a bit limited when it comes to colours. For example, styles can store images, gradients or multiple colour layers in one, and variables can not. ☀️🙏🏻
Quick work, very interesting
Thanks! ☀️🙏🏼
Any idea of how to have the responsive Desktop and Mobile setup for a situation where you also have multi-brand setup?
Great question! When Figma announced Variables way back last year they mentioned they are working on Theming which allow you to switch brands like you want but sadly it’s not live yet :/ For now you can use swap library but I’m not sure if it works for variables too 😢 ☀️🙏🏼
Very Insightful
Thanks! ☀️🙏🏼
God you just nailed it😎
Thanks! ☀️🙏🏻💛
Thanks for the great content! Very informative and helpful
You’re welcome! 🙏🏼💛☀️
Really, Underrated UA-cam channel...❤
Thank you so much 😀☀️🙏🏻
Great tutorial as always. Thank you!
Thanks! 🙏🏼💛☀️
Your video always very helpful
Thanks I’m glad! ☀️🙏🏼
Thank u so much for sharing these content. you're so amazing .
You’re welcome! ☀️🙏🏼💛
Thank you, your videos are really helpful!
Yay thanks! ☀️🙏🏼
Well explained! The combination of variable+style is more clear with your explanation than Figma's.
I was waiting for this Figma update a lot. I used to create components variants for text sizes or use same size for both desktop and mobile. Many things were possible on code and now it's better. I just to learn more about Code Connect now, but first, I've to create all typography variants for my design system 😅
Thanks! 💛🙏🏼 I felt a bit disappointed at the start of framework when I realised it’s not new variables but just the ability to control them with variables but once they got into how to use them with styles I got onboard! ☀️🙏🏼
@@TDSunshine yes! I've to think how to structure primitives and semantics for this new family
Marvellous 🙌
Thanks! ☀️🙏🏼
You're My virtual Trainer 😍🥰😊
☀️🙏🏻💛
I have a question I've been wrestling with, in my team we not only have desktop & mobile versions of text styles but different brand skews, any ideas on what your approach would to be setting this up?
Great question! Figma did mention they are working on themeing for variables but not sure when they will launch it :/ In the meantime, if you have everything set up as styles you can use the "swap library" function to swap between two libraries and automatically change all the designs to a different theme. I have a video about swap library going live soon so keep an eye out ☀️🙏🏻💛
Thanks for sharing 👍
You're welcome! ☀️🙏🏻
Beautiful
Thank you! ☀️🙏🏼
Very nice demo, thanks for sharing. As you mention there are many different weight classes and family weight names. The body type could have a Heavy weight and not a Bold, and the title/headline could have a Roman instead of a Regular, or a Book instead of Regular or Roman. Then you need to make variables with all the weight names for both types I guess, but there's no way to assign several weight names to the same type with a comma. There's no way of having several of the same label names for anything in the same group either, so you can't have one Medium name for title and one for body, then Figma prompts you to make each name unique. This type variable function doesn't manage authentic scenarios 😆
I have heaps of variables but there's no scope panel, no check boxes. I'm on a Pro license. And the variable panel doesn't work properly with focus states or keyboard navigation, pressing Tab doesn't provide expected movement so I constantly have to move between section with the mouse. Figma is so buggy it hurts!!
Thanks! I think thats why Figma give the option to use string and number variables to control the font width. Yes, each family might name the widths a bit differently but you will usually find they all use the same numerical values for the widths they offer. So using a number might be better for you.
About the second issue, that is odd! are you using the browser or the app? might be worth trying to remove and reinstall the app. I hope that helps! ☀️🙏🏻💛
@@TDSunshine Thanks for the tip. In regards to the second issue it seems like a bug of sorts 🤔
Who's designing for mobile and desktop the use case for variables is so niche (multi brand and "web design")
Variables are super useful not just for designing for different operating systems! they are great for prototyping in a realistic way, maintaining a single source of truth for strings and so much more ! ☀️🙏🏻
Can we make ui design without figma?
Yo can you do a video of ideal structure with the variable updates showing ideal structure all in one? This exists like nowhere
Great idea adding to my list! they keep making updates it's so hard to keep up! 😵💫☀️🙏🏻
Can you create a roadmap to learn figma . What all things to learn in figma please
If you are a beginner I would recommend my video - *Figma beginner crash course 2024* - ua-cam.com/video/OtOXEKKScg4/v-deo.html I hope that helps! 🙏🏻☀️
cool i like it lean it from you ,
Thanks! ☀️🙏🏼
you are soooo cute and nice, and your videos are amazing, such a simple and clear explanation thank you so much
Thanks! ☀️🙏🏻💛