Hi, I just subscribed to your channel. I like your energy and how you explain things in a very clear and easily digestible way. Showing an example is always the most effective way to get the concept. Keep up the good work!
Of course! Here's an improved version of the text in English: Hey there! I've been searching high and low for some good tutorials, and I must say, yours are among the most practical and amazing when it comes to teaching us how to use variables efficiently and concisely. Also, I was wondering if you have any tutorials on using variables to create responsive designs for different devices. Looking forward to your insights!
Thanks! ☀️🙏🏻 I have this video that touches on that a bit - *Responsive design with variables and autolayout* - ruclips.net/video/Akj0TvfUlmc/видео.html
@@TDSunshine Btw, using your example made a quick image gallery and it works (with some tweaks) like a charm! Still struggling with applying border changes on active thumbnails but I think I'm pretty close to get it! Once again, thanks a lot!
Yay! Happy to hear you’ve been able to apply it! Yeah variables require lots of trail and error I find 🤪 still getting used to them too but they are so fun I can’t resist haha
Great video! the only problem is that we have 4 mode maximum so thats mean we can only present 4 shoes for example in your example. I hope figma will find a solution to extend the amount of mode because I would like to present more than 4 elements for my projects.
@@TDSunshine thank you for your answer, I have a question, hope you can help me, is it posible to change variants via variables when the component is made in another file (library)? I have been trying to do it but I have failed; for context in my project we maintain a library/design system, so change in variants from those components will be pretty useful, but currently I only can change text and values, no instances :(
@@JaimeSellaoH So at the moment you can’t link nested instances to a variable :/ you can link the original component to a variable and then that will carry through to all instances of that component (nested or not). Maybe if you publish the variables from your file and then link them to the original component in the library file? Hope that helps!
Thank you so much. Besides Figma youtube channel, im learning from your channel also. Im hoping we will get more interesting design tutorial done by you using figma updated feature ✊
Just updated my existing Design-System. Variables aren't perfectly implemented yet because my parameter are somewhat different then yours but man... that makes life so much easier. Better not tell my Boss that I can do my work 10x faster now. haha Thank you so much for your tutorials and your resources on FIGMA. @@TDSunshine
Hi your video is so nice but here's a little question about when I'm trying to copy the prototype properties then paste to other cards just like you did at the end of the video, it turned out to paste the exact card contents instead of properties :/ (I hover on the interaction sections but my hove isn't blue but grey I don't know why lol). Is there something setting need to be done before that? Thank you!
Hey Cawabanka! You need to select the interaction by clicking on it (just left of where it says “tap”) and then copy and paste 🤗 let me know if that works! 🤞🏼
Thank you for the tutorial! I tried to follow along, but for some reason, when I ran the prototype, it didn't recognize the other modes. When I checked the interactions for each card, the variables' values for each mode are correct, but after running the prototype, it didn't work. I can't figure out what I did wrong.
@@zicttoc I found out that someone posted a similar issue on Figma's community forums and it turns out this might be a bug. It works when you hard code it though, like type in "Shoe 2" instead of the variable. I've been doing it that way as a workaround even though it's a little annoying.
there are some bugs still floating around with variables so it might be that! sorry to hear you have to go a bit manual with it to make it work 🙃 I also find that sometimes just recreating one of the elements in the mix helps. ☀️
I don't think it's a bug at this time, but a change they've done to how it works. I've tried to achieve the same and it's not possible unless you hard code it or specify which mode you want to get when interacting with it. They showed that same thing in the config and it worked, but if you check the file the guys from Figma shared, the same thing that worked in the demo no longer does it. It's so weird.
@@MIKE-1NE I’m hoping it’s a bug still 🙈 like you said because they already showed it that way I don’t think they would change it without putting out an official message. Fingers crossed we get some update soon ! ☀️
Nice video. I have a question, what if once I click on the shoe 1 and I wanted to swipe the products images to see more about the product how would I do it? How could I add more images to the product since I am not working directly with the component?
Great question! I think I would set up an atom component that has a few variants for different images and some swiping interactions and then use an instance of that component in the shoe component we made. Nesting components can be really powerful! I hope that makes sense ☀️🙏🏻💛
I have created called price just like in your example with shoe 1 shoe 2 modes. When I go apply the price to a shoe, I only see #price 100 which is the value for the shoe 1. Why do i not see the others? I don't think I explained it well, but maybe someone will understand what I mean.
Try to change the variable mode and then you should see the other value too! The button to change variable mode is in the layer section of the design panel ☀️
@@TDSunshine Thank you for your reply. I think what I don't understand is how you connect variables to a layer because you have to click on the page to even set the variables ( local variables) in the first place. In the layer section there is no variable button. Sorry for taking your time
We'll have to wait for the image variable update to fully realize products cards to their full potential. You can match images with strings but it won't work once you make it a component (the image component will automatically detach itself to those variables.
Yes, I know 😢 image variables will really change the game! also nested instances can't be connected to variables BUT if the original component is connected to a variable and then you nest it than it does maintain the connection!
You can set a light and dark mode in the collection where you store your colour variables and then easily swap the variable mode for the whole frame (if those colours are used in the frame ) ☀️
Yeah, sadly nested instances cant be controlled by variables :( There is lots of talk about this in the Figma community, so hopefully we will be able to do this in the next release! ☀🙏🏻
Great explanation but how is this simpler and less time-consuming than just using different screens that are created with Component and Component Properties which allows the designer to quickly change information within the screens all at once and is also faster to make and apply changes when needed? These examples are great if the designer works with people that do not require tons of changes and reiterations. And I am referring to changes where you need to add elements or entirely new sections to the design that impacts the entire layout. Then it becomes a hustle to keep track of all these collections and connections between the components and variables. Perhaps it is just me but this new Figma update is helpful in creating better and more automated design systems but also creates confusion. I did not even mention adding conditions that are a different type of headache.
Sometimes it is a bit more complex and can create some confusion even. But if you use it in a thoughtful way in your design systems and files you could really speed up your work for the future! Initially the set up might take a bit longer but it might be worth it in the long run ☀️ I go through some best practice on how to use variables in this video if you want to check it out :) ruclips.net/video/WMDJY86RhLo/видео.html
full of energy, charming, witty, intelligent, and knowledgeable - you will grow in YT for sure ... ;)
🥺💛☀️
Hi, I just subscribed to your channel. I like your energy and how you explain things in a very clear and easily digestible way. Showing an example is always the most effective way to get the concept. Keep up the good work!
Thanks! ☀️🙏🏼
Of course! Here's an improved version of the text in English:
Hey there! I've been searching high and low for some good tutorials, and I must say, yours are among the most practical and amazing when it comes to teaching us how to use variables efficiently and concisely. Also, I was wondering if you have any tutorials on using variables to create responsive designs for different devices. Looking forward to your insights!
Thanks! ☀️🙏🏻 I have this video that touches on that a bit - *Responsive design with variables and autolayout* - ruclips.net/video/Akj0TvfUlmc/видео.html
The best explanation I've found out there! Not even the Figma guys can do it better! Kudos and THANKS A BUNCH!
Aww thanks! 🥺💛☀️
@@TDSunshine Btw, using your example made a quick image gallery and it works (with some tweaks) like a charm! Still struggling with applying border changes on active thumbnails but I think I'm pretty close to get it! Once again, thanks a lot!
Yay! Happy to hear you’ve been able to apply it! Yeah variables require lots of trail and error I find 🤪 still getting used to them too but they are so fun I can’t resist haha
Thanks. Just what i was looking for. Keep the tuts coming. 🔥🔥
Thanks, will do! 🙏🏻☀️
SO GOOD! Keep up the good work. We need more videos like this that break down the complexity and make things more digestible. Great work
Thanks! I appreciate it ☀️🙏🏼
Hi from Turkey, Raally awesome lesson about Figma Variables and modes, thank you
Thanks! ☀️💛
Fantastic video. Really useful. Incredibly impressed by the hard work that went in to this
Thanks! 🙏🏼☀️
Already my favorite place on youtube!
🥺💛☀️
The amount of knowledge you are putting out there for free is unimaginable! I would even work for you for free just to learn learn learn.. Thank you:)
Thanks!! 💛☀️🙏🏼
Your whole channel is so helpful! Thank you.
Thanks! ☀️🙏🏻💛
Hey Sunshine, this is really great work! Keep it up and also keep up the warm energy on the channel.
Thank you! Will do! ☀️🙏🏼
My favorite channel on RUclips 👏
Thanks! ☀️🙏🏻💛
Great video! the only problem is that we have 4 mode maximum so thats mean we can only present 4 shoes for example in your example. I hope figma will find a solution to extend the amount of mode because I would like to present more than 4 elements for my projects.
Yes agreed! I keep reminding myself Variables are still officially in Beta so there is so much more to come! ☀️
Amazingly explained 👏
Thank you! ☀️🙏🏻
Thank you so much, im using your videos to spread the potential of variables in my team. ty for the tutorials!
Yay! Good luck 🤗 I'm also trying to bring everyone at my work aboard the variable train 🚂 ☀️
@@TDSunshine thank you for your answer, I have a question, hope you can help me, is it posible to change variants via variables when the component is made in another file (library)? I have been trying to do it but I have failed; for context in my project we maintain a library/design system, so change in variants from those components will be pretty useful, but currently I only can change text and values, no instances :(
@@JaimeSellaoH So at the moment you can’t link nested instances to a variable :/ you can link the original component to a variable and then that will carry through to all instances of that component (nested or not).
Maybe if you publish the variables from your file and then link them to the original component in the library file?
Hope that helps!
Very helpful. Thanks for doing it thoroughly.
You're very welcome! ☀️☀️
Hey, thanks for sharing such a amazing and knowledgeable things of config 2023, I really appreciate your hard work. Keep it up and keep posting.
Thanks ! ☀️🙏🏼
Thank you so much for sharing this valuable lesson.
You're very welcome! ☀️🙏🏼
Thank you so much. Besides Figma youtube channel, im learning from your channel also.
Im hoping we will get more interesting design tutorial done by you using figma updated feature ✊
More to come! ☀️
Very instructive thank you
Very welcome ☀️🤗
Nice and clear explanation on the new Figma features - thanks
Happy to help! ☀️
This is fucking magic. What the fuck.
I know right?!?! ☀️
Just updated my existing Design-System. Variables aren't perfectly implemented yet because my parameter are somewhat different then yours but man... that makes life so much easier. Better not tell my Boss that I can do my work 10x faster now. haha Thank you so much for your tutorials and your resources on FIGMA. @@TDSunshine
very informative.. take love
thanks! 🙏🏻☀️
Where are you From?
I am From Bangladesh🇧🇩
Great video!!!
☀️🙏🏼
Thanks for your tutorial
You’re welcome! ☀️
Very well explained. Love it.
Glad it was helpful! ☀️
Hi your video is so nice but here's a little question about when I'm trying to copy the prototype properties then paste to other cards just like you did at the end of the video, it turned out to paste the exact card contents instead of properties :/ (I hover on the interaction sections but my hove isn't blue but grey I don't know why lol). Is there something setting need to be done before that? Thank you!
Hey Cawabanka! You need to select the interaction by clicking on it (just left of where it says “tap”) and then copy and paste 🤗 let me know if that works! 🤞🏼
@@TDSunshine Ah!!! Magic happens now! The gap space is really small :D Thanks a lot
Thank you so much❤.
Create a mobile bottom navigation bar like this❤.
🙏🏼🤗 will add to my list! ☀️
NIce and clear videos ✅
Thank you! ☀️
Thank you for the tutorial! I tried to follow along, but for some reason, when I ran the prototype, it didn't recognize the other modes. When I checked the interactions for each card, the variables' values for each mode are correct, but after running the prototype, it didn't work. I can't figure out what I did wrong.
I also had the same problem, were you able to find the cause?
@@zicttoc I found out that someone posted a similar issue on Figma's community forums and it turns out this might be a bug. It works when you hard code it though, like type in "Shoe 2" instead of the variable. I've been doing it that way as a workaround even though it's a little annoying.
there are some bugs still floating around with variables so it might be that! sorry to hear you have to go a bit manual with it to make it work 🙃 I also find that sometimes just recreating one of the elements in the mix helps. ☀️
I don't think it's a bug at this time, but a change they've done to how it works. I've tried to achieve the same and it's not possible unless you hard code it or specify which mode you want to get when interacting with it. They showed that same thing in the config and it worked, but if you check the file the guys from Figma shared, the same thing that worked in the demo no longer does it. It's so weird.
@@MIKE-1NE I’m hoping it’s a bug still 🙈 like you said because they already showed it that way I don’t think they would change it without putting out an official message. Fingers crossed we get some update soon ! ☀️
Nice video. I have a question, what if once I click on the shoe 1 and I wanted to swipe the products images to see more about the product how would I do it? How could I add more images to the product since I am not working directly with the component?
Great question! I think I would set up an atom component that has a few variants for different images and some swiping interactions and then use an instance of that component in the shoe component we made. Nesting components can be really powerful! I hope that makes sense ☀️🙏🏻💛
@@TDSunshine It makes sense!! Thanks
great tutorial
Thanks! ☀️
I have created called price just like in your example with shoe 1 shoe 2 modes. When I go apply the price to a shoe, I only see #price 100 which is the value for the shoe 1. Why do i not see the others? I don't think I explained it well, but maybe someone will understand what I mean.
Try to change the variable mode and then you should see the other value too! The button to change variable mode is in the layer section of the design panel ☀️
@@TDSunshine Thank you for your reply. I think what I don't understand is how you connect variables to a layer because you have to click on the page to even set the variables ( local variables) in the first place. In the layer section there is no variable button. Sorry for taking your time
@@streamx2 2:40 I go through has to assign variables to an element on the page and at 3:12 I show how to change the variable mode ☀️ hope that helps!
🔥🔥This is amazing supprrb
☀️🙏🏻
We'll have to wait for the image variable update to fully realize products cards to their full potential. You can match images with strings but it won't work once you make it a component (the image component will automatically detach itself to those variables.
Yes, I know 😢 image variables will really change the game! also nested instances can't be connected to variables BUT if the original component is connected to a variable and then you nest it than it does maintain the connection!
Amazing :)
Thanks! 😄
💙
💛
could u pls talk about, How to toggle dark/light modes with color variables - Figma
You can set a light and dark mode in the collection where you store your colour variables and then easily swap the variable mode for the whole frame (if those colours are used in the frame ) ☀️
The image workaround almost works - once I nest that instance into another component it gets stripped out.
Yeah, sadly nested instances cant be controlled by variables :( There is lots of talk about this in the Figma community, so hopefully we will be able to do this in the next release! ☀🙏🏻
Would it go back automatically
which one?
I think they could made it a bit more intuitive. You should be able to select a mode on the frame without having a child using a variable of the mode.
🙃
Hi how are you
☀️
Great explanation but how is this simpler and less time-consuming than just using different screens that are created with Component and Component Properties which allows the designer to quickly change information within the screens all at once and is also faster to make and apply changes when needed? These examples are great if the designer works with people that do not require tons of changes and reiterations. And I am referring to changes where you need to add elements or entirely new sections to the design that impacts the entire layout. Then it becomes a hustle to keep track of all these collections and connections between the components and variables. Perhaps it is just me but this new Figma update is helpful in creating better and more automated design systems but also creates confusion. I did not even mention adding conditions that are a different type of headache.
Sometimes it is a bit more complex and can create some confusion even. But if you use it in a thoughtful way in your design systems and files you could really speed up your work for the future! Initially the set up might take a bit longer but it might be worth it in the long run ☀️ I go through some best practice on how to use variables in this video if you want to check it out :)
ruclips.net/video/WMDJY86RhLo/видео.html
Thank you for a super helpful video
You're welcome! ☀️
thank you
You're welcome! ☀️
Thank you so much! This is a really easy explanation 🥹
Glad you think so! ☀️💛