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!
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!
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!
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! ☀️🙏🏼
Před 3 měsíci
@@TDSunshine yes! I've to think how to structure primitives and semantics for this new family
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 ☀️🙏🏻💛
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. ☀️🙏🏻
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 ! ☀️🙏🏻
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 😢 ☀️🙏🏼
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 ☀️🙏🏻💛
If you are a beginner I would recommend my video - *Figma beginner crash course 2024* - czcams.com/video/OtOXEKKScg4/video.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!
Great work! I've been waiting for typography variables forever
Same! Thanks for watching 🙏🏼☀️
Great work! I've been waiting for typography variables
Thanks! ☀️🙏🏻
Wonderful, very well explained. Keep us updated
Thanks! ☀️🙏🏻
Marvellous 🙌
Thanks! ☀️🙏🏼
Great! Thank you so much for such a great overview and positive energy! ❤
Thanks! ☀️🙏🏻💛
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 tutorial as always. Thank you!
Thanks! 🙏🏼💛☀️
Thank you, your videos are really helpful!
Yay thanks! ☀️🙏🏼
Quick work, very interesting
Thanks! ☀️🙏🏼
Thanks for the great content! Very informative and helpful
You’re welcome! 🙏🏼💛☀️
Thanks for sharing 👍
You're welcome! ☀️🙏🏻
Very Insightful
Thanks! ☀️🙏🏼
Thank u so much for sharing these content. you're so amazing .
You’re welcome! ☀️🙏🏼💛
Your video always very helpful
Thanks I’m glad! ☀️🙏🏼
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! 💛☀️🙏🏼
Beautiful
Thank you! ☀️🙏🏼
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.
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 🙏🏻☀️💛
Really, Underrated CZcams channel...❤
Thank you so much 😀☀️🙏🏻
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
cool i like it lean it from you ,
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!
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. ☀️🙏🏻
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 ! ☀️🙏🏻
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 😢 ☀️🙏🏼
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 ☀️🙏🏻💛
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* - czcams.com/video/OtOXEKKScg4/video.html I hope that helps! 🙏🏻☀️