Dark And Light Modes Using Color Variables | Figma Tutorial [CONFIG 2023]

In this step-by-step guide, I’ll show you how to effortlessly create dark and light modes using Figma's new color variables to make your designs more scalable and consistent. Whether you're a design enthusiast or a professional, this tutorial will equip you with the knowledge and skills to elevate your design game. Get ready to wow your audience with visually stunning interfaces that seamlessly adapt to different modes
Figma link: www.figma.com/file/8x7trbx1Jd...
_______________________________________________________
Video chapters:
0:00 - Intro
0:19 - Design dark mode
1:06 - Create you color variables
4:09 - Link colors with variables
5:44 - Test your designs
6:34 - Outro

[@RemedyOnlineGh]

I'm from Ghana and I just subscribed to your channel. I don't normally do that to new channels but your style of presenting the design process alone is crazy bro!
Kudos👊🏻👊🏻

[@Kickdrumsnare]

Lifesaver! Thank you 🎉

[@maiquynh7098]

Thank you so much! This is very useful

[@amirreza3638]

Thank You!

[@SYDESIGNING]

you made it very easy bro, way to go :)

[@fendrapunu4657]

very useful, thank bro for your effort to make this tutorial... :)

[@iGraphical]

Thank you dude

[@user-el2hj2pr7y]

Very useful, and easy way to do. thanks bro

[@user-nh6ws4xp8x]

really really useful for me, thanks a lot

[@ProductSensei77]

You are welcome!

[@lanh-lanh]

it's useful for me, thanks

[@ProductSensei77]

Glad to hear that

[@izaaclem1376]

Bro I have subscribed because you did something amazing. Make more of this.

[@ProductSensei77]

Thank you, I will

[@user-yi8be6dr3y]

Nice! Can you please add toggle switch to change dark/light mode?

[@lucianarosa3201]

Nice tutorial, very useful, but i missed the part when you explain how to prototype it. Do it have buttons to the modes?

[@wollem5136]

Hi there, is it possible to add a toggle button to activate the dark-mode and to go back to light-mode?

[@00RaiserRock]

Yes, but you have make it as component. E.g. Make light mode card as master component and make dark mode as a variant, then rename your dark mode card layer name to "Dark mode = True" and "Dark mode = False" for light mode card. You should see the toggle button once you use the component instance

[@chiduugochukwu4201]

Thank you. This was well detailed. However, I am unable to create new mode. Does that mean I have to pay to be able to use that feature?

[@S0ulH0und]

Is it possible to link it to a button?

[@Underhills]

This a very buggy feature. Sometime it works, sometimes it don't. The issue is almost always the transition between frames and if the frames detect what mode it's in. Very often no change is applied when moving things between mode frames. Variables have many other issues as well, it's very risky to trust this thing in a real project 😱