Light and Dark Modes with Color Variables in Figma. How to Create Mode Inheritance.

Learn how to use the new Figma Mode feature with color variables to create light and dark modes with ease.
Link to the product UI design file.
www.figma.com/community/file/...

[@leespringer1796]

I've watched different videos on utilizing dark mode. Yours was the easiest to understand. Great work, great explanation.

[@whennn]

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.

[@eny_codes]

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.

[@femijohn]

Thank you so much 🥹😊

[@aniebietoluwa]

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. 😆

[@femijohn]

You’re welcome! I’m glad this was helpful. Good luck 👍🏽

[@akornion666]

great video, i finally understood how to use color variables. thank you!

[@ra9r]

Well explained. Just what I needed to know. Thank you.

[@keneanyaegbunam9325]

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. 🙏🏾

[@femijohn]

Thank you so much. A lot of people will need this. 🙏

[@ramazanguler6066]

Thank you for understandable good lesson

[@TheChefAine]

This is actually really interesting 😅. Figma did a thing here with this update for sure. Thank you for sharing ❤️❤️

[@femijohn]

You’re welcome 😊❤️

[@dhruvgroove]

Great video! The information was presented effectively and is quite helpful.

[@femijohn]

Thank You

[@MrJesusAmos]

Very well explained! thanks, you have a 👍like

[@DemoShipper]

Exactly what I was looking for! thanks!

[@femijohn]

Glad I could help!

[@flaviomasson]

Great and useful lesson, thank you!

[@femijohn]

You’re welcome 🙏

[@monalynnacap1060]

thank you so much! you teach it well that it's easy to understand.

[@femijohn]

Glad it was helpful! You're welcome.😊

[@Ms_Chu_]

Best tutorial ever. Thank you

[@damilolajuliana6534]

This was helpful. Thank you!

[@femijohn]

You’re welcome, I’m glad it was helpful

[@username78657]

Great video 🎉🎉🎉

[@suhanamedappa2480]

Great video! Thanks.

[@femijohn]

Glad you liked it!

[@chitturitulasiram3415]

It's great. Thanks for the video. :)

[@femijohn]

Thank you too!

[@NNNedlog]

Thanks for this tutorial

[@femijohn]

You're welcome.

[@TamaraBode]

Okay, Sweet
I don't have to go rack my head around how to learn this

[@femijohn]

Great thanks 😊

[@nonsobright6496]

Really helpful

[@femijohn]

Glad it helped.

[@GGeeaazzyy_broo2345]

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?

[@user-st4eh2zh9n]

Thanks a lot!

[@femijohn]

You’re welcome 😊🙏

[@nonsobright6496]

I thought it's was free. It comes with payment

[@maiquynh7098]

You can try to upgrade to educational account. Its completely free while containing every pro feature and doesn't need to verify much

[@danielalfred9982]

I just followed you on twitter sir

[@femijohn]

I saw it too, thank you Daniel. I hope you found the video resourceful 😊

[@danielalfred9982]

@@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?

[@dawang9760]

Hello, I would like to ask, what do the gray numbers 100, 200, and 300 mean?

[@dawang9760]

Is it the name of a color, or some specific value?

[@femijohn]

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.

[@dawang9760]

Thank you very much for your reply@@femijohn

[@reezus_]

👏🏾👏🏾👏🏾

[@brianruizy]

Thanks for the tut! But looks like adding a mode requires Premium :(

[@femijohn]

Thank you 🙏 😊

[@samsudeenafolabi]

Plot twist: a Figma update has to be learnt on RUclips 💀

[@femijohn]

Well, that’s what it is. Hope you found the video helpful.😊

[@davidaffran7447]

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 :(

[@zes7215]

wrr

[@pigeonanimations6118]

its a payed feature :(