Create an Interactive Dark Mode / Light Mode UI in Figma

-- Today, we're going to step into the world of Figma to design a mobile UI that has an interactive toggle for turning on/off dark mode. This is a video lesson from the DesignCourse curriculum. We'll design the full UI first, and then use some color theory to quickly create an iteration of the design that's in dark mode.

0:00 - Introduction
0:57 - DesignCourse
2:05 - Designing the UI in Light Mode
12:43 - Dark Mode Iteration
14:34 - Toggle Button Design & Prototype
18:21 - Final Thoughts

Let's get started!

#ui #figma #darkmode

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS!

^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Come to my discord server or add me on social media and say Hi!

[Hamyhamster]

Hi Gary,

i first discovered your tutorial 8 months ago and fell in love with UX because of the way you taught. 8 months later, i now got a job doing UX among other things. But just wanted to let you know that because of you, i took a leap and never looked back. thank you for your contents.

[Foxuniverso]

how would it work on websites with different pages? like if i keep the dark mode on the top right and im lets say the user is on an "about me" page, wouldn't hitting the night mode button send them to where the button is connected to?

[jd]

Hey Gary I would love a video where you explain when it is OK to use letter spacing. I know you usually advocate to just leave the letter spacing at default (which is what I do now) but it would be nice to know the few situations where it would be appropriate to have some letter spacing.

[salnoto]

It seems like you kinda did the coloring very quickly. How important is it to have a color palette? Is there any easy premade color palettes that you recommend?

[elaheansari]

Thanks for your fantastic and useful video👌

[abymathew]

You are awesome Gary. You are really a great designer.

[nayabnadeem]

Great video, really helpful but my question is do we need link the variants? Or linking the screens only would work?

[pexeixv]

Thanks Gary for being such an inspiration to me❤️

[abhishekvaghela]

Wow you are legend Simon bro
I am from India and I am in love with this tutorial brooo🤩🤩🤩🤩

[tartarefinance]

Cool stuff! Didn’t know about these component variants!

[akshaysainiAK]

try dark mode magic plugin with figma, and then tweak some colors

[antonellazambon]

How to achieve this in a more complex prototype? Help me,

[rimpybhatia]

Hi, thanks a lot for sharing this info. Your video is really helpful to me. I have been following your other xd tutorial videos too. Great work!

[Shc-wi]

Don’t follow this tutorial. Is not the way to work with Figma. You should use components and styles for light/dark mode

[remoomohsen]

Excuse me,
Do I can get a job with google UX certificate?
UX jobs required programming languages?

Thank you

[Jwarddesign-ca]

"And here's the variants." Variants. Variants. Omicron? Or Delta? Did you learn a new word from all the BS news?