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

hi guys welcome to today's video in today's video I'm going to show you guys how to create this dark mode and light mode inheritance frame here basically it's a mood switch that makes you switch between light and dark mode I'm going to click on this and I'm going to drag it to this particular section as you can see the entire design that was in the light theme just transitioned into a dark theme and you can drag this particular design to This Light mode and you will have your light mode designed back so guys um this is what we are going to be learning in this particular tutorial please don't forget to like subscribe and turn on the notification Bell so that you get notified whenever I post a new video in order to start creating our designs we are going to be making use of this product detail mobile UI that we have here and this design was gotten from an earlier video on the channel where we created this animating slider the link to this file is going to be in the description section so that you can download it and have a template to start working with so let's go back to our initial design file so the first thing we are going to do is to start creating our color variables here we have a range of colors that we used for this design file you can go ahead and Define them like this but it is not necessary you can always pick them from your design file so the first thing you're going to do to start creating your local variables is to click somewhere around in your design and make sure you're not selecting any particular layer or elements you're going to see this local variable option and you're going to click on it you're going to open up this collection panel and these collections basically just let you hold a collection of variables so the first thing we want to do is to rename our collection and here I'm just going to say products theme for instance you can name it anything so from here what you want to do next is to start creating your variables and in this case we want to create a color variable so I'm going to click on variables you're going to see a number of options in my previous video I talked about the number variable and the Boolean variable in this particular video we are going to be going into the color variable so I'm going to select color variable and for this color variable basically what we want to do is to log this particular set of colors into these variables and if you don't know what variables are variables are basically containers that hold a particular value so in this case we are going to have a color variable and we are going to be using a primitive format to save our color variables and we are not going to be using um the naming format that shows the intention behind the colors so for instance you can name your colors like background color or foreground color or text color for instance so in that we just naming it based on the instance but in this case we are just naming the colors themselves so I'm going to name this white and obviously this is the hex code for white so I'm just going to leave it as it is but if you want to select a particular healthcode you can click on this color click on this icon and then pick the color that you want so next to White I'm going to create another color variable and I'm going to call this gray 100 this is the format I am going to be using you can use any naming convention for your own values so for this gray 100 I'm just going to select the next shade of gray which is this very first one here and as you can see the value it is F6 F6 F6 I'm going to create another color variable and this is going to be Gray 200 and I'm going to select use this speaker icon to select this gray 200 color which is almost like our design files background color I'm going to create another variable still a color variable I'm going to pick the next shade of gray which is this and I'm going to rename this to Gray 300. I'm going to do the same thing again I'm going to have gray 400 but the color for this is going to be a darker shade of color I think I picked the gray 300 which is this 585 a5a so we are going to have one more shade of color which is going to be our gray 500 and I'm going to pick this last shade of gray here so I'm going to add one more color which is a black color which is the um all zeros so I'm going to name this black just like the way we have the white value up here and obviously I'm just going to make it all zeros so now we have a sets of color values for our color variables the next thing we want to do is to go ahead and tie this colors to the color variable so if I close this up and we click on this our product screen and I open this up you're going to see we just have this particular color codes that we have here so if you want to start replacing or attaching or linking those color variables to the colors you use in your actual design you can click on the section where you want to replace that color or to attach that color so for instance we have this product session and there's this background color here if I click on it we can go to the view section click on this particular style icon and we will see the list of variables that we added to our collection so here you can see this is this background color is F6 F6 F6 and if I open up this local variable you're going to see that this is gray 100 you can open this up click on your background color and try to match or try to match the values together so here F6 F6 F6 F6 you're going to see that this is gray 100 so so you can click on your Styles and select gray 100 you can also click on if you click on the entire page we are using for the field of the entire page we're using white you can select this and select whites what you can also do is to select this particular frame where you have all your colors and you're going to see in your selection colors or your list of colors you can go ahead to start attaching these variables to the colors from this section so I'm just going to continue from this section so this is our color code black all zeros as you can see here the last variable here I'm going to select this icon and I'm going to select black to attach it to a black variable so the next one is E5 E5 E5 which is a grade 200 I'm going to Select Grade 200 we have our white color as you can see I'm going to select this and I'm going to still select White we have 858585 which is our grade 300 I'm going to do select I'm going to do the same thing and Select Grade 300. so we have um F6 F6 F6 which is our gray 100 I'm going to do the same thing and select gray 100 so the importance of selecting from this place is that it selects a particular hex code and replaces it's all around in the file so for instance where we selected this section here we are still going to if we have other sections that have this color we are then going to go and start picking these colors individually but if we select it from our selection panel here it's just going to automatically select it from every other place where you have the same color code so once you've successfully attached your color code to your variables I'm just going to go ahead to close up this panel the next thing you want to do now is to create your mode so I'm going to open up that panel back I'm going to click randomly in the design panel go to this lookup variable section and open it up so what we want to do typically is to have two modes either a light and dark mode or you can name it day and night mode depending on on the naming convection you want to use I'm going to click on this plus button this plus button lets us create a new variable mode so basically when we have a value that holds when we have a variable that holds a single value if we want to have um to be able to if we want to be able to switch between different options of value for that particular variable we are going to create a new mode so I'm going to click on this new mode and as you can see it has changed the title of that value to mode 1 and mod 2. I'm just going to rename this to light and I'm going to rename mode 2 to dark mode so basically what we are going to do is we are going to now be setting the values for this dark mode and replacing it with what we have on the light mode so for instance if you see on here we have our gray 100 which is um this F6 F6 if I click on this section on the dark mode you're going to see that this is f a f a f a which is typically this gray 400 so what you're going to do is you're going to replace the value of this increase 400 with the value of this particular um White Steam so that once it's on dark mode it's going to have this value instead of this value but before we go into that I'm just going to undo this particular thing and I'm going to leave the values to be the same for it starts because I want to walk you guys through this transition step by step so I'm going to leave the values to be the same and I'm going to close up this model I'm going to go to the frame section and I'm just going to draw out a frame I'm going to make it slightly bigger than our mobile UI so that I can fit our mobile UI in it so now what I want to do is to give this Frame the dark mode values so in order to do that I'm going to come to this few section I'm going to click on this icon here that says Style and what I want to do basically is to add a new library so in order to add this new library I'm just going to name this local variable and I'm going to be fetching from our product team collection I'm going to click on create variable and here in our layers you're going to see a button appears so you can use this button to change variable mode so to change variable mode I'm going to come to this product team and I'm going to select dark mode now we have this Frame tied to the dark mode variable option that we have so if I take this our particular screen I'm going to duplicate it and put it here we are going to notice that nothing changed and that is because our values you're going to notice that nothing changes that's because our values here are the same so for instance here that we have white if I invert this and make this particular white background to have this hexadecimal which is this 333 here and I paste it you're going to see that it's automatically changes um the values here in our frame so I'm just rename this Frame to dark mode so that you can see how these changes are happening step by step so for this particular color code um which is the gray 100 F6 F6 that we're using for this place we want to switch it to this particular value which is 5A 5A 5A so we are going to come to this section here and for F6 F6 F6 we want to replace it with this particular one which is 5A 5A 580 now you can see that we are getting something that looks like our dark team representation and that is the only reason why we have this that thing here so that we can just have it side by side to make sure we are having the exact values so for black here which is this typical black that we have um which is the black text that we have and this deep black status bar here what we want to do is we want to make it white so for black here we're going to change these values to whites which is I'm going to copy the value of white and I'm going to replace it here and you can see how this is transitioning to be something really cool so what else um do we need to swap I think for now this is almost good so I'm going to click on this and you can see this is also White so I'm going to pick the value here which is this great 300 so I'm going to change grade 300 to White also so we also have some values that are not yet changed so for instance this whites icon here which is um every single white so we want to change it to Black which we did here but it's not showing here so I wonder what's happening this is white it's supposed to also change to Black but okay this is something we are also going to consider you can see here that because we are transitioning from white to black the white here is also um not visible so what I'm going to do is I'm going to select this section and I'm going to detach this particular white from it and here I'm going to detach this particular white and I'm going to leave it at the value of white one two three so as you can see here we have a proper representation of our dark mode and this is how you create a light and dark mode so now I'm just going to close up this model I'm going to duplicate this actually I'm going to duplicate this and for this new frame I'm going to change it from dark mode to light mode and you can see guys this is just automatically switching so if I delete the contents in this particular frames all right we can see that I can also delete this dark mode we don't really need it so you can see that these are product design here that we have as soon as we drag it and fit it in any of these particular frames it just automatically changes in value to the respective mode that our sets for that frame so guys I hope you guys really understood the concepts of these lights and dark mode and I hope you guys learned a lot um please do not forget to like subscribe and turn on the notification Bell and I'm going to see you guys in my next video thanks for watching and bye for now

Channel: Thefemijohn

Views: 31,387

Keywords: figma to real website, figma design convert to html, figma design to code, figma to website, figma to code plugin, figma to html, design to html, how to make light and dark mode for website, how to make dark and light mode website, how to make modes for the website, working with website modes, creating three different modes to the website, light and dark mode of website, how to design in the browser, figma, learn to make modes, convert website from light to dark mode

Id: DJrQbmH75lY

Length: 15min 43sec (943 seconds)

Published: Wed Jun 28 2023