OMG, this is so helpful. I was afraid about give it a try to this, but thank you for doing this tutorial and make a digerible video, I will try it know. I became a subscriber since now.
Hello, can you please create a video on responsive/fluid grid with variables and max/min width feature? Please take an example like dribbble where you have cards. Size and number of cards per row keeps changing based on screen size. That will be really helpful. By the way you're explaining really well, RUclips is the place for you. Just a suggestion to slow it down a bit while explaining. 🙏
This is basic of button components (States and sizings) but what about other component properties like layers, icon off/on etc.. Variables are not working for these. We still need components for these properties. isn't it?
Correct! ☀️ You will still need to use variants and component properties to control certain things in components. It all depends on what you need in your system. There is a great video from Figma that helps to clarify this a bit -> ruclips.net/video/RXQ8XVirzjs/видео.htmlsi=nP7ToHrIeF4BsyBr
A bit random, but does anyone know the name of the script font used for the chapter titles in this video, like at 04:18 "Creating Semantic Colour Variables". I would love to find it.
You could set it up but it’s not as simple as dragging a noodle between variants. You could say on tap set variable X to variable Y and that could swap colour or text for example or even the variant that being used
Cool but Im wondering one thing. How about the styles? Figma still keeps the styles because we can’t use viariables for everything. In terms of colours we can’t make for example a gradient variable, etc. But they will develop variables so the variables will becoming more and more powerful. Thus why do we need styles? You think that Figma will delete styles feature in the future? To be honest it’s getting more and more confusing and chaotic and I feel like they're slowly losing control of those features. But anyway, the question is simple . Should we reject our styles and change everything to variables? 😂🫣
Hahaha Kamil I am with you in this vortex of confusion don’t worry! I think it’s all about balance. As you said variables can be a bit extra so in some cases you might not want to get to that granular level and only need some quick styles to make your design process more quick and simple. I think styles will stick around for a long time and once the excitement over variables dies down a bit then we will all kind of figure out where and when to actually use them 🙏🏼☀️
I asked Figma about this specifically - they essentially said "we're not sure how they'll work together in the future". My impression is these will eventually be deprecated in place of variables once they support gradients, image fills etc.
@@TDSunshine thank you. Have you tested if the variables that you create in a Figma file can be used across multiple figma files? Like if you have design system that is linked with different figma files (hope it makes sense)
@@AUDIORESETROCK Yes I have! It worked well :) just remember to publish the variables from your design system and update the file that's using the design system
Hi @TD Sunshine, Could you help me, when I use the variable prototype in multiple inputs increment, at the same time when I click I work all the same time? How could I fix this? Thanks in advance.
@@TDSunshine In my increment component I use prototype variable #Count 1. I use those component all across my form layout. In view prototype, when I click increase 1 or decrease 1 the other component that I don't click also work at the same time (It suppose not to work when we don't click). Hope you get it!
@@thearaav6670 ahh ok! So you need a different variable for each text box. Basically if they are all connected to #count then when you change one , they all change. Each input in your form should be connected to a different variable and then when you prototype you initiate change to the appropriate variable alone ☀️
thank you so much for your video!!! I've working with Design Tokens for a while and this is a great step for Figma to finally integrate variables that work similarly as tokens. Just one question, did you manage to implement icons inside of your buttons and jump between the sizes with the different modes? I'm stuck on this one... I would really like to reduce the amount of variants on my button component, and to do so, I need to jump from my medium size button with a 24px leading icon, to my small size button with a 16px leading icon. I tried with boolean but I was unsuccessful :( . Any tips? thank you in advance!!
If you put the two icons sizes as 1 component with two variants “24px” and “16px”. Then create a text variable with those same names in the correct modes. Then you can connect the variable to the component so essentially the variable selects which variant to use. I go through something similar in this video at 4:52 -> ruclips.net/video/fB-4ikrt3mk/видео.html
Thank you for your video. I was wondering how to use variables in a design system or a library situation. I have a library which contains a lot of components for my projects but as soon as is pull a component from assets into another project the variables are missing I think this is not supported yet, is it ? Or am I missing somthing here ?
Variables can be published just like other reusable assets so make sure to publish them and update the files that’s use that library and it should carry across! ☀️
@@TDSunshine They are published, hmm. My first thought was, that this isn't possible at the current state of figma but i guess i'll have to check my files again. thanks for your reply.
I'm a newbie designer. I'm glad to say I get it. Information overload but I'll get there!
Glad it’s helpful! 🙏🏼☀️
OMG, this is so helpful. I was afraid about give it a try to this, but thank you for doing this tutorial and make a digerible video, I will try it know. I became a subscriber since now.
Aww yay! I’m glad it was helpful ☀️🙏🏼
Hello, can you please create a video on responsive/fluid grid with variables and max/min width feature? Please take an example like dribbble where you have cards. Size and number of cards per row keeps changing based on screen size. That will be really helpful.
By the way you're explaining really well, RUclips is the place for you. Just a suggestion to slow it down a bit while explaining. 🙏
I have a video one responsive design and those features coming up ! So keep a look out 👀👀
Your videos are fantastic! Thank you for sharing your knowledge
Thank you! ☀️☀️
You are smart, and you know how to teach. I hope you grow fast. Thank you!
I appreciate that! Thanks! ☀️🙏🏻💛
Insightful. Thanks
☀️🙏🏼
This is basic of button components (States and sizings) but what about other component properties like layers, icon off/on etc.. Variables are not working for these. We still need components for these properties. isn't it?
Correct! ☀️ You will still need to use variants and component properties to control certain things in components. It all depends on what you need in your system. There is a great video from Figma that helps to clarify this a bit -> ruclips.net/video/RXQ8XVirzjs/видео.htmlsi=nP7ToHrIeF4BsyBr
thanks for explaining, I got lost
Glad I could help! ☀️
A bit random, but does anyone know the name of the script font used for the chapter titles in this video, like at 04:18 "Creating Semantic Colour Variables". I would love to find it.
Hey ! The font is called bellaboo 🤗☀️
@@TDSunshine Thank you so much! GREAT tutorial by the way! ☺🙌
If you had created component variants, you could animate between the states via Prototype and "Change". This is not possible with variables, is it? :o
You could set it up but it’s not as simple as dragging a noodle between variants. You could say on tap set variable X to variable Y and that could swap colour or text for example or even the variant that being used
@@TDSunshine Thx for your response :) I have to tried it
This is what ive been thinking
@@TDSunshinethat's more complex than nodding things 😅
You're fantastic designer I've ever seen! Thank you so much!🤍
aww thanks! 🙏☀️
Thank you so much for this!
Yes you can! I have a video about responsive design coming soon 👀👀
@@TDSunshine oh my, yes! so exicted to see that
I don't think it's best practice to use modes to control variants... I don't think that's what modes are for...
They can be used in whichever way suits your designs and your design process best 🙏🏼☀️
Can we make it to components ? So we can use it from the asset panel ??
The button? Sure you can! ☀️
Cool but Im wondering one thing. How about the styles? Figma still keeps the styles because we can’t use viariables for everything. In terms of colours we can’t make for example a gradient variable, etc. But they will develop variables so the variables will becoming more and more powerful. Thus why do we need styles? You think that Figma will delete styles feature in the future?
To be honest it’s getting more and more confusing and chaotic and I feel like they're slowly losing control of those features.
But anyway, the question is simple . Should we reject our styles and change everything to variables? 😂🫣
Hahaha Kamil I am with you in this vortex of confusion don’t worry! I think it’s all about balance. As you said variables can be a bit extra so in some cases you might not want to get to that granular level and only need some quick styles to make your design process more quick and simple. I think styles will stick around for a long time and once the excitement over variables dies down a bit then we will all kind of figure out where and when to actually use them 🙏🏼☀️
I asked Figma about this specifically - they essentially said "we're not sure how they'll work together in the future". My impression is these will eventually be deprecated in place of variables once they support gradients, image fills etc.
@@TDSunshine Thanks for reply :) Yeah, I think you are right, for now we meet excitement because it’s a fresh topic 😊
@@jordan_hughes Oh really? That’s interesting but it makes sense in a long perspective, of course! Thanks :)
Yes to all of this. Anything on variables is so helpful
☀️🙏🏼
hi :) great video! Quick question why did you call it semantic and not TOKENS! I am crying to understand the differences (feel a bit embarrassed) :)
I would really recommend watching this session from config where they discuss tokens vs variables ! ruclips.net/video/M0NU5QFLCl4/видео.html
@@TDSunshine thank you. Have you tested if the variables that you create in a Figma file can be used across multiple figma files? Like if you have design system that is linked with different figma files (hope it makes sense)
@@AUDIORESETROCK Yes I have! It worked well :) just remember to publish the variables from your design system and update the file that's using the design system
Hi @TD Sunshine,
Could you help me, when I use the variable prototype in multiple inputs increment, at the same time when I click I work all the same time? How could I fix this? Thanks in advance.
Hey! Sorry could you explain your issue again? I don't think I understand 🙈
@@TDSunshine In my increment component I use prototype variable #Count 1. I use those component all across my form layout. In view prototype, when I click increase 1 or decrease 1 the other component that I don't click also work at the same time (It suppose not to work when we don't click). Hope you get it!
@@thearaav6670 ahh ok! So you need a different variable for each text box. Basically if they are all connected to #count then when you change one , they all change. Each input in your form should be connected to a different variable and then when you prototype you initiate change to the appropriate variable alone ☀️
That's very helpful, thanks
@@TDSunshine
thank you so much for your video!!!
I've working with Design Tokens for a while and this is a great step for Figma to finally integrate variables that work similarly as tokens.
Just one question, did you manage to implement icons inside of your buttons and jump between the sizes with the different modes? I'm stuck on this one... I would really like to reduce the amount of variants on my button component, and to do so, I need to jump from my medium size button with a 24px leading icon, to my small size button with a 16px leading icon. I tried with boolean but I was unsuccessful :( . Any tips? thank you in advance!!
If you put the two icons sizes as 1 component with two variants “24px” and “16px”. Then create a text variable with those same names in the correct modes. Then you can connect the variable to the component so essentially the variable selects which variant to use. I go through something similar in this video at 4:52 -> ruclips.net/video/fB-4ikrt3mk/видео.html
@@TDSunshine omg thank you much for the quick reply! I'll give it a try and let you know how it goes ☺
Thank you for your video. I was wondering how to use variables in a design system or a library situation. I have a library which contains a lot of components for my projects but as soon as is pull a component from assets into another project the variables are missing I think this is not supported yet, is it ? Or am I missing somthing here ?
Variables can be published just like other reusable assets so make sure to publish them and update the files that’s use that library and it should carry across! ☀️
@@TDSunshine They are published, hmm. My first thought was, that this isn't possible at the current state of figma but i guess i'll have to check my files again. thanks for your reply.
Simply amazing, thank you very much! 💯
🙏🏼☀️
Thank you :)
No problem 😊
💙💙
☀️🙏🏼