Thank you very much. When working on large projects with multiple components, how do you then implement this dark mode in such a way that it matches properly. Especially when there may be further changes in color to those components
Quick tip: For the "error" that you encounter when a white text from a button that you dont want it to change to dark (black) color, you can manually select the layer that then select "change variable mode" and select "LIGHT" so it will keep those properties in dark or light mode.
Really needed this. Thank you! I noticed at 14:08, you decided to break open the variable to solve your problem. I think a new variable (maybe 'btn-color') might have been more "on topic" solution. 🙏🏾
This was a great video! The fact that you took us through the process step by step helped me understand exactly how mode variables work. That said, I think it would make more sense to name your colors differently. For example, you name the background color "white" but in dark mode it's not white! It would have made more sense to name it "background". Same for "text", etc.
Thank you for the wonderful video! Your explanations are incredibly clear and easy to follow, and I greatly appreciate it. I now feel confident enough to pass on this knowledge to someone else. 😆
Hi, very awesome and excellent effort. I am trying to design a form after watching your a lot of tutorials please guide me I want to display input field when I click on radio button otherwise field is hide can you guide me please to complete this task?
The color name is grey. But the 100, 200 … represents a range on shades of that color 50 being light color shades and 900 being deep shades. Some css frameworks like tailwinds uses this naming conventions too.
@@femijohn yea , still finding difficulty in responsive design, add beak point to it .. and about this light and dark design after creating your local variables colors , hitting the + to add new components of the light and dark do someone need upgrade?
I thought it's was free. It comes with payment
You can try to upgrade to educational account. Its completely free while containing every pro feature and doesn't need to verify much
thank you so much! you teach it well that it's easy to understand.
Glad it was helpful! You're welcome.😊
Thank you very much.
When working on large projects with multiple components, how do you then implement this dark mode in such a way that it matches properly. Especially when there may be further changes in color to those components
Great video! The information was presented effectively and is quite helpful.
Thank You
Quick tip: For the "error" that you encounter when a white text from a button that you dont want it to change to dark (black) color, you can manually select the layer that then select "change variable mode" and select "LIGHT" so it will keep those properties in dark or light mode.
Thanks for the tut! But looks like adding a mode requires Premium :(
Thank you 🙏 😊
its a payed feature :(
Really needed this. Thank you! I noticed at 14:08, you decided to break open the variable to solve your problem. I think a new variable (maybe 'btn-color') might have been more "on topic" solution. 🙏🏾
Thank you so much. A lot of people will need this. 🙏
This was a great video! The fact that you took us through the process step by step helped me understand exactly how mode variables work. That said, I think it would make more sense to name your colors differently. For example, you name the background color "white" but in dark mode it's not white! It would have made more sense to name it "background". Same for "text", etc.
Thank you for understandable good lesson
a shame you cannot follow this tutorial on the free version of Figma. You need to be on a plan to use more than one mode :(
I've watched different videos on utilizing dark mode. Yours was the easiest to understand. Great work, great explanation.
Awesome, thank you!
Thank you so much for this video, I have learned the concept of light mode and dark mode using variables
You're one of my fave youtubers.
Thank you so much 🥹😊
Very well explained! thanks, you have a 👍like
Thank you too!
Thanks a lot!
You’re welcome 😊🙏
Thank you for the wonderful video! Your explanations are incredibly clear and easy to follow, and I greatly appreciate it. I now feel confident enough to pass on this knowledge to someone else. 😆
You’re welcome! I’m glad this was helpful. Good luck 👍🏽
This is actually really interesting 😅. Figma did a thing here with this update for sure. Thank you for sharing ❤️❤️
You’re welcome 😊❤️
Ese gan ore mi
You're welcome. 😁
great video, i finally understood how to use color variables. thank you!
Great to hear!
Hi, very awesome and excellent effort. I am trying to design a form after watching your a lot of tutorials please guide me I want to display input field when I click on radio button otherwise field is hide can you guide me please to complete this task?
Okay, Sweet
I don't have to go rack my head around how to learn this
Great thanks 😊
Plot twist: a Figma update has to be learnt on UA-cam 💀
Well, that’s what it is. Hope you found the video helpful.😊
It's great. Thanks for the video. :)
Thank you too!
Well explained. Just what I needed to know. Thank you.
You are welcome!
wrr
Hello, I would like to ask, what do the gray numbers 100, 200, and 300 mean?
Is it the name of a color, or some specific value?
The color name is grey. But the 100, 200 … represents a range on shades of that color 50 being light color shades and 900 being deep shades. Some css frameworks like tailwinds uses this naming conventions too.
Thank you very much for your reply@@femijohn
Exactly what I was looking for! thanks!
Glad I could help!
Best tutorial ever. Thank you
You're very welcome!
Great video! Thanks.
Glad you liked it!
Thanks for this tutorial
You're welcome.
This was helpful. Thank you!
You’re welcome, I’m glad it was helpful
Great video 🎉🎉🎉
Thank you 🤗
Great and useful lesson, thank you!
You’re welcome 🙏
I just followed you on twitter sir
I saw it too, thank you Daniel. I hope you found the video resourceful 😊
@@femijohn yea , still finding difficulty in responsive design, add beak point to it .. and about this light and dark design after creating your local variables colors , hitting the + to add new components of the light and dark do someone need upgrade?
Really helpful
Glad it helped.
👏🏾👏🏾👏🏾