Designing Dark UI's | UI Design Live Stream

[Music] [Music] [Music] oh well welcome everybody happy Friday wherever you are at in this wonderful world hope you're having a fantastic morning afternoon evening or night let me know where you're coming from give me an emoji mixed with the Emoji should represent what you're going to do this weekend are you going to sleep in are you going to work out are you going to go for a walk are you going to eat some food let me know let me know where you're coming from because we already got a couple people in the chat already pretty cool pretty excited to be here with you uh we got uh abig Kumar what's up right back to you I'm very bad with names please forgive me I I just pray for your grace uh Adia chandre says hey guys I got Alonzo Johnson one of my design champions in the chat this morning Alonzo how are you my friend we are going to be talking about dark user interfaces today really really excited about that because dark UI is something that a lot of people struggle with they struggle to create these dark interfaces and you know maybe you don't struggle creating the light version of the interface but how do you actually create that dark version and here's here's something you should know most people um you know or excuse me most applications need to have some sort of dark interface iOS actually makes it a mandatory now because as a user I'm allowed to go into my settings of my iPhone and I'm allowed to turn on dark mode everything should comply right so it is a huge necessity to know how to design these dark user interfaces we got more people jumping in the chat uh honin says what's up we got Valentine from the Ukraine hope you're doing okay over there stay safe hey from India roit says hi welcome everybody from all around the world I love uh you know all the different emojis that are happening in there uh we are also going to be playing a really just fun Friday game of whle it's time to relax a little bit everybody and just have a good time hey speaking of good times if you're interested uh Alonzo's in the chat this morning he's one of my phenomenal design Champions if you're interested in having more live streams and time with me consider becoming one of my live or my design Champion excuse me we just had a design critique probably one of the most fire design critiques we've had in the community we had like over 22 or 23 people in the design critique spent an entire hour walking through three people's work and it was like above and beyond one of the best times you could just have learning how to critique other people's work to offer value to them to give them feedack back if you happen to be one of those people on the hot seat man the amount of growth you get from having 20 plus people feed into you pour into you and give you that objective lens for like 20 or 25 minutes at a time is like Priceless it's something you can't get uh unless you go to like design school and pay you know lots and lots of money uh but thankfully design Champs is like about the price of a cup of coffee so you know a fancy latte or two a month and you're in so consider that hey I'm really excited this uh session today all about dark user interfaces actually is coming directly from my new 30-day UI designer program I'm really excited y'all and last promo I promise but the uh 30-day UI designer program it's a 30-day immersive journey to master user interface design it's actually launching in a couple weeks oh my gosh I'm almost finished with production and uh editing is happening soon and all that stuff is happening so a couple more weeks if you want to sign up and become an early backer the first 200 people are considered early backers check out my early backer list I I just showed some emails I probably shouldn't have done that we'll edit that out but just know that I have 164 people signed up as early backers I got a couple more spots like 36 spots okay so um sign up as an early backer you can get half off lots of goodies lots of stuff if you're interested in what that looks like you can head on over and check out 30-day UI 30day ui.com go to 30 ai.com the link is down in the description and you can sign up right here and commit your seven bucks to hold your seat as an early backer it's going to be amazing all right let's jump in let's start talking a little bit about dark user interfaces shall we H really excited let's talk about dark UI and when we're talking about dark user interfaces we're going to cover the four pillars of dark UI design we're also going to talk about one of the most important elements or concepts of dark UI design and we're going to jump into figma start working together so if you want to open up a figma file you totally can let's jump into these four pillars okay first let's talk about uh these four pillars the first one being background the second one being text the third one being UI elements and the last one being imagery okay so all of these and when I when I say these are pillars these are the things you actually have to change you actually have to consider and make edits to and make some design decisions if you're going to actually design a good dark interface let's start with background color and then I promise after we hit these four we are going to then uh dive into that one big large kind of concept that's necessary but let's start first with these four pillars of dark UI design the first one being background uh we're talking about the body color or the background color of your interface it's very very important that you pick not a pure black but instead more of an off black we're going to pick a dark color you can actually do a really deep gray you can also tinge it we'll talk about this when we get into our fig file you can tinge it with a hint of your brand color I say tinge it that's a we we weird word you can just give a hint of that brand color uh on top of that deep gray or that off black and you can we're going to build a neutral color scale today and we're going to lay that a little bit of that brand color on top um we want to you know we'll go through that whole thing but we want to use Shades and states of white and black of these off-whites and the or excuse me off black and this white to denote dimensionality and and we'll talk about depth here in a second but the lighter the higher just remember that I said that the lighter that the color is then the higher it is let's talk about text that was the second thing that we mentioned here second pillar of dark UI design is your text um your headings and your titles should be Pure White now when you're doing dark UI design you don't really want to use or just UI design in general you don't really want to use pure white on pure black or pure black on Pure White because the contrast becomes a little too harsh on the eyes but when we say that what we mean is in Long forms of text right even the notes that I have the show notes that I have sitting in front of me it's on a dark background with white text but it's not pure black and it's not Pure White because if we read like that for like a long time it starts to actually strain our eyes open up any sort of reading platform open up your Kindle open up your iPhone or Android books platform where you can read um there's not there really shouldn't be uh definitely not in iOS but there is not a pure black pure white scenario there is off black with white or and offwhite and there is dark gray or deep Grays and there's sepia tones it's just it's too much right so we want but with our headings and our titles we can actually make sure that those are using pure white on that black because we can allow them to punch and give that contrast and hierarchy between headings titles and normal body body copy now the body copy should be a shade of gray we still want to maintain contrast we want this to be accessible we're looking for a double a rating of accessibility which we could talk about in a little bit but we just want to be very very careful how we use those we want it to be bright enough where it's accessible legible readable but not Dull so dull that we are struggling with accessibility the third one there is UI elements we're going to talk about your buttons your tags your chips all of your elements that are inside of your design we're going to have to make those colors a little less vibrant and I'll prove it to you in a little bit I promise we're going to make those colors a little less vibrant um and we're also going to reduce the amount of colors that we use so here's a couple of tips and tricks you're going to desaturate your primary color by 20 to 30% um and then you can also try desaturating brighten desaturate mixing these things together and we're also going to add if there's a drop shadow on your button we don't use dark drop shadows in dark mode we use probably the color of the element really light really opaque so it just looks like it now becomes a colorful glow so these are some of the differences and then the last one that we're talking about is imagery you will have to make some changes to imagery um you know imagery out of the box looks great in light interfaces but you might need to tweak the contrast and the saturation all right with that being said let's jump over and let's take a look at an UI element we'll do a little bit of work here talking about those four pillars oh my gosh excuse me we got to go back and talk about this concept of depth I almost forgot in your light mode and this is this is a guiding principle here okay huge guiding principle that becomes really really potent when we move into dark mode and it's this idea of depth in light mode a lot of times we are representing depth by having some sort of drop shadow we're creating dimensionality we're creating that depth we can't do that like I just said previously we can't do that in dark mode because this drop shadow on a dark interface just going to blend in it looks like mud right it looks very muddy and hazy it's not a good look so what we have to do is go very flat and instead we use shades of Darkness right to create a sense of depth the dark the darkest element is going to be your background you can imagine this being the background of your interface and then if we want to lift something off of that element like a button whatever it is we're going to use a lighter shade and what we're actually doing is we're creating what's called a zindex now when we're looking at like geometry we have the Y AIS that runs up and down we have the x axis that runs left and right and you actually have the Z AIS that runs towards you in three dimensions so when we're stacking elements when you're thinking about your interface like this interface that we're looking at right the very back is this white background that's step one right then you have elements sitting on top of it like text and images okay that becomes step two that's the second thing stack stacked now on top of it if you have your background and a chip well now the text inside of it that's actually step three so we have three steps and if you were to turn this to the side we're now in dark mode we're going to express this depth this dimensionality we're going to express that through this these varying degrees and tones of dark and light and so you can imagine this one being your background this one being your you know maybe your card this one being like a chip on top and this being your typography you're going to see this in play right now if you have questions please hit those in the chat I'm always excited to answer your questions let's zoom out a little bit and talk about our card that we have here we have this light Mode card right and it has some text and image some chips here we got some pricing information information and a primary call to action that has some sort of notification um and we have a secondary P call to action up here now what quite often what I see young designers doing when they say hey we need you to turn this into dark mode is they do something like this which is our bad example of dark mode is they basically just flop it to a you know some sort of dark background they they pull a dark background right and quite often this dark background that they pull is like just straight up black like this they're like hey that's dark mode we did it okay um so this is bad this is a no no let's not do this at all here's the things that are wrong with this we' flopped everything over to this dark Mode card and we we have still probably the same colors of our call to actions we're using bright white for all of our stuff it just this is a a a huge disruption as we're reading and if if we just think about General design principles hierarchy legibility I don't know where to look right in this card I know that my primary call to action is my big blue button but now all of these white chips this secondary these bright this bright text is all deviating my eye as the user from my primary call to action so what can we do to improve this well let's take our light mode and our bad dark mode and let's move this over and put it next to a little bit of a better dark mode okay and then we'll start actually building and breaking down what we did right so we picked a more neutralized background and I really want to highlight on this because this is important we're going to pick a background for our card that is you can see it is not a pure black it's an off black but also notice what's sitting on top of it ah a little bit of our brand color brought down at a 10% opacity so we are bringing that brand color into the background we're making the whole thing feel very themed right when you do this Everything feels very very like like connected like it's all intentional it's well thought out and really it's that idea of theming becomes very very important so remember remember our four pillars that we have been discussing background right text whoa I kind of hit that background text UI elements and imagery so all of these are going to require some sort of selections of colors we need to talk talk about how we arrived at these selections of colors and that's where our color scale comes into play Okay so let's pick a start out with a nice neutral color you select whatever you know off gray deep gray off black you want here's the tip I I would say when starting with dark mode think about the fact that we need to have the ability to have something behind it or underneath it that's darker so I don't want to be down here I don't want to be way up here because that's starting too light I like something in this area right something that's starting about a 13 13 13 why because it gives me the option to go even deeper if I needed to okay it gives me the option to go deeper if I needed to so we're going to pick and here's I'm I'm being serious about this just pick pick a neutral color pick a deep gray or or an off black color and go with it and we can tweak it and change it as we go but then the next step is to once you pick that we're going to then run a color scale and you can do this in figma really easy just open up something like you know color scale generator uh something like that boom right like we can grab a color let's just go up here and we'll choose that color and go 13 13 13 and say hey give me 10 steps of this color boom we're going to immediately create a neutral color scale okay and that started with our 13 13 13 and okay so we got something like that whatever it is okay um and from there you can take each of these and you can add whatever your brand color is let's find our brand color our brand color is this blue right here so we can come into our very first one and we can add a brand color on top pop it in like that and that's very very blue it's a little too themed for me a little too cringey right so I'm going to take that 10% I'm going to copy that style I'm going to put it on top of all of my other elements okay so I'm go like this boom pop it in all of a sudden look we're theming we're getting neutrals in our color scale that goes all the way down okay now if that's a little too much we can go back and fix that but this is the idea of giving you all of these neutralized colors that are themed that are going to be your scales of depth okay and we got uh ABA in the in the chat saying this is like Twitter's dark mode now I get why there's looks bluish right yeah because we're giving a little bit of that branding and it's not just for Branding purposes it's to knit the whole thing together it's to make the whole thing feel really connected and succinct right I think that word for me is like very important that knitting together of that like of that color right now we've taken that those colors all the colors that we actually have here let me just shrink this down so we can get this a little bit closer to our text here and I'm actually going to fill the background with pure black now you can kind of see look there's pure black there is our actual background color that's being applied now we start to ask ourselves and you actually you don't need this many stops on your color scale if you don't want to you probably need something like you know four scale or four stops on your color scale five stops on your color scale if you want to you can try to govern those and limit them a little bit but we have a lot of room to play with and none of these are actually a pure white right okay so you can notice this my headline up here is actually Pure White now we we've talked about our body copy let's move on to text let's move on to typography my headlines are pure white why because those are the headlines and and the the titles that I want to pop I really want them to stand out with hierarchy okay now next after that you'll notice what color is this okay it is pure white but we're bringing the opacity of it down what colors are these it's definitely not Pure White it's this D4 dde7 color which is like down here on my color scale do you notice boom this is what it is and now here's the tough thing I've added all these layers right of color and I've actually added some white so we can get it closer to like more of a pure white here and that's just how I chose to do my color scale there but like if you want to get the actual color you're going to have to draw a rectangle here and just sample the color there it is like de7 E2 there is is my color i' probably want to turn all of these into local Styles or using the new figma variables which we'll talk about here in a little bit but notice how I've applied that to all of the elements in my card right like this is a more subtle version of text it's it's still very legible if I was to run something like the Stark accessibility tools on this and try to get legibility like to see if it has good contrast let's do typography here okay yeah oh sorry cont uh I'm going to grab the whole thing and see if I'm getting a good contrast okay so my large text is getting that I probably need to make this a little bit brighter is what Stark is telling me okay so again lots of room to play with it I just want to make it a little bit more accessible okay and now oh somebody says does anyone now know how I do convert that mix of three colors into one I think I just showed you right so we grab those three colors that are being showcased over here just draw a rectangle angle over here on the side hit I for your ey picker sample it boom that is your color you can see it right there okay that's a great question hopefully I'm phrasing it in a way that works for you okay so that is your text and we're just going to like check for accessibility and contrast but then after that we're going to go to our our third step which is assessing the UI elements okay so our UI elements okay those need to those colors need to become less vibrant notice this in my white C C I'm using this bright blue color this o75 FF and I'm trying to use it again over here but the problem is that contrast is if we really just like drill in on these that contrast is very bright it's very bold it's way too much what is actually a little bit better is to neutralize that color and make it just a little bit more palatable okay so what we can do is honestly you can just take your color here and we're going to pull it back on our Color Picker just a little bit you want to find something in almost imagine like an arc happening over on this side you want to just pull it back and find more of a neutralized version now again this is something that you're going to play with and you're going to have a variable or local style for your light brand color or a light primary color and then you're going to have the dark version or dark UI of your primary or brand color you're going to have those two variables they're going to be a team working well with light and dark that's what they're going to do okay and so let's jump back in and take a look at our UI elements and here's an example of those right here's that here's that UI element like that initial one that light mode and here's the like desaturated neutralized version it just looks better okay now we can also instead of doing drop shadow we can add just a hint of a drop shadow and that drop shadow is not a dark drop shadow it's a little bit of a glow glow right that you'll notice just very subtle this glow we could crank this up so you can kind of see it that's a little too much glow that's happening behind my head we could bring it down something like 20% you can raise it up to 30% so again this is just another thing we're integrating that brand color and just glowing it that's going to give it less of it's less about dimensionality for the button and more about this glowing kind of hovering elevation thing that's happening okay so keep that in mind those are your UI elements we want to neutralize them we want want to choose less colors the same thing is actually happening up here notice this our secondary call to action it's secondary right so we need to kind of neutralize it a little bit okay so you know yes is this available it sure is but it's not going to detract from our primary call to action so we've done that with our elements and I don't know if you can tell this on screen but our fourth pillar is to establish some imagery changes here so you can see my image if I go to the settings nothing has been changed here on the image but in my dark mode image I've just gone in I've just made a couple little tweaks I've increased contrast saturation you know highlights little played with the Shadows a little bit but we just want our image to pop just like a little bit more okay now that is really like an art form to learn how to tweak imagery to like make sure that it has the right level of contrast it's not overwhelming but it doesn't look dead and that's the problem images can look dead when they go into a dark interface so we just want to increase that interest in them a little bit okay let's take a look at some examples of a full UI or a couple of different interfaces that have been built out but before we do that why don't we stop answer some questions and we'll come on back all right let's see if we got any questions in the chat uh we had that question or that comment from abaj just talking about Twitter's dark mode this idea of like blending together the brand color and creating this neutral branded color palette super duper important uh and let me see aditha says how do we show disabled ctas here that's fantastic so uh there's I mean honestly you're going to do the same thing that you would do when you normally create all the different states for a button you got like like default hover you know disabled pressed active um you know key down whatever it is you're this is where the design decisions come in right and I would actually flip all of those buttons that you have and we're going to need to create dark mode versions of them especially if you're working in like components variants of those components you're going to want to figure this out and implement it so I would say first thing is play a little bit the second thing I might say is if you're going to do like some sort of inactive State you probably want to flip it off of your primary color and you want to have a Deeper Shade of that primary color neutralizing the the button I mean we could try it real quick and let's just jump into it and see what it looks like right so if I was going to say somehow this was you know neutralized I'm not going to and I'm just going to put a color on top of it hide this I'm going to pick my let's see my brand color something like this um and let's make sure it's all the way up at 100% like the other one is but I'm going to neutralize it a little bit more I'm going to bring it down maybe like somewhere in here and just neutralize but I think the biggest thing would be I'm going to bring down the text inside okay so all of a sudden we get like a very neutralized version of the button again we'd want to play with that a little bit more but there's lots of things you can do like you can outline them you can you know just bring the opacity down to the whole thing uh we just want to be very clear like what is disabled and what is enabled uh Denny one Buck says we know that for usability sake we can't pick a pure black for the background but I started noticing more and more companies using it well mainly for apps any thoughts yeah I think it's very very very bad now again there might be a use case if you're an application that doesn't require lots of heavy reading okay I can see you validating it right like if you use pure black and pure white in your application there is going to be no you know giant design punishment that comes down from the sky to nail you okay you can use it if you want to but just know it's a faux paw when it comes to Long amounts of reading or large amounts of content if you have a lot of visual content okay we might be able to validate it you might even be able to validate it if you just have lots of charts graphs and kind of that type of information uh because you're probably not going to be staring that for a really long period of time but even that I would tell you yeah you you probably just are going to do better off taking a more holistic elegant approach and not using pure black and pure white that's a great question though uh Sarah Abdullah says can you please show us how to use Auto layout I've made entire videos about that you should definitely go check it out or if you are interested consider joining my new 30-day UI design program it's launching in a couple of weeks you're going to spend time with me every single day uh in this program and you're going to be learning the basics and the necessities of UI design to be like really an impressive UI design a UI designer within one month and then you will start actually applying you'll have portfolio pieces case studies um you'll have everything you need and all the skills that you need and the foundations laid to start applying so definitely consider that okay let's jump back into it and before we do I think we should actually I think it's time do you think it's time I think it's time to play whle It's Friday y'all let's just unwind a little bit and let's play a little bit of Wordle okay um all right if you don't know what Wordle is we're guessing we're looking for a fivelet word here and we are trying to guess it with only this many guesses we would like to get it by the fourth guess because we just have a higher we have higher expectations for ourselves around here okay so let's try you guys are totally free to help me I like to start out with something like uh oh somebody said whle that's right Shmi I love a good game of wle let's start out with a word like uh PR maybe prize I'm feeling today how you start is very very important and I want to make sure that we start somebody said start with audio I do like to start with audio as well because it's a lot of vowels in the word audio let's try audio let's you know what let's do it I like it okay let's do thiago's request here audio now if you don't know how to play what this is telling us is there is a u in the word there is an o in the word but they're in the wrong spot what it's also telling us is that the A and the D and the I are not in the word right so we got two that are in the word but they're in the wrong spot we're looking for green we're looking for that U and that o to be in a green spot here so okay so no a d or I let's talk about about oh what has an o and a u in it but doesn't have these three letters let's talk about how about Duo and is do Duo no no not Duos we can't have a D in it right okay come on we can think we can do this together I need your recommendations I need your help somebody said mouth Zed said mouth oo are we yes I like it tell Zed tell me that we got it right now if we got it right now Zed and that was your clue I'm going to give you one free month into the design Champs Community because let's try it oh so close okay so now we know those letters are not in it and also still the O and the U in the wrong spot so close so close so that means the O and the U have to be okay the O's not here the O's not here that means or the U's the U is neither one of these columns right so it could be something like oh something o and then the U could be here what's a some what's a o here and a u here somebody said Focus oo f o c us F ooh o that's no good because that doesn't go there right the O doesn't go there uh somebody said the O doesn't go in the second spot though right what goes in the second spot um it can't be Lotus because the O can't go there come on we're going to work this out together uh see oh somebody say cloud CL l oh u d that could be it sore W do we have it do we have it do we have it no but we got the U in the right spot we're making progress come on y'all this is this is it this is the time we're going to do it okay um let's try o cloud cloud cloud cloud somebody said flower but the L is not in there now we don't have an L so look down here these are all the letters the BL the dark gray letters those are the letters that are not not in the word let's focus up we are a team I believe in you and you believe in me okay so this there could be an F okay so let's do like something oh something I'm just going to put s for something something something something and I think the O the O might have to be at the beginning is the O at the beginning oh somebody said occur see like occur like that they're could be two C's and they are tricky about that somebody also said quick quick could be a good one CQ q i there's no o in the word quick though there's a q I like a cur I like abage just get like guests let's go with a cur oh oh it's a cur let's go that's amazing ABA that was your guess uh I am going to give you if you just uh just reach reach out to me just DM me APPA on on Instagram and I'm going to give you one free month in the design Champs Community because that was the guess you did it it was the word Ur get out of town what a great guess thanks for playing Wordle with me on this amazing Friday we're going to jump back into some dark UI design but I do I want abaja to DM me on Instagram find me on Instagram DM me let's make it happen let's get you in the community okay it's going to be really really exciting oh my gosh it's going to be really good I'm feeling frisky I'm going to give you like two months free I want you in there okay I want to be able to hang out with you and you be part of these Live Events and if the rest of you want to join and become a design champ it's only 15 bucks a month it's like the cost of two cups of coffee jump in Live Events we do have some really cool live events coming up I want to show you some of these I'm going to jump into design Champs really quickly and show you some of these live events coming up uh in a couple days here uh starting in a week we got we're going to be reviewing the book freelance and business and and stuff by Jen and Amy Hood so we're going to be talking about freelance business and then in November I'm going to be uh talking about sales it's the most important skill that designers don't tend to have and then we have another design critique coming up in November so we got Live Events you got access to premium videos and content resources templates notion files all of my client documents all that kind of good stuff and you get also access to members posts and you can get feedback through show and tell on all of your work um and and even ask tons of questions and get answers from the community so you know consider becoming U the links oh so Zed says can you share the link to those events all the events are really found at one link you just go to design champs. the link is down in the description of this live stream sign up become a design champ you get access to all of it it's just one monthly fee to have you know chat with me chat with others design critiques Live Events all that kind of stuff sign up for design Champs will be super dope okay let's get back and talk about some dark UI design because we're all most done I'm going to zoom in on a couple of really great designs here that are I think doing a really good job of showcasing dark and light design again let's use those four pillars right and assess this design on those four pillars background text UI elements and imagery okay background text UI elements and imagery the background here okay what are we using for the background we're not using pure black we are using it's it's pretty close but it's an black it's neutralized I'm okay with it right because they are it's not a lot to read here and they're putting the text on these lighter highlighted cards right okay so these cards right here are this 1717 so see how we're moving up in elevation okay then you have things like for instance text right like our subtitles here or the labels of the information is this lighter color right and it's actually it's a it's a pretty bright color but the opacity of it has been brought down which is a pretty good trick also and then you have the text is actually not even Pure White like these texts here are not Pure White they are fa fa so they're an off-white color okay let's zoom out and take a look again we could say just look at our color really quickly here I'm going to do r or and just draw a rectangle out let's just see right what do we got here we got a color for our call to actions right or all our our primary color it's being used in our little our little edit pencils in our tags in our large pay now button okay let's see if it's using the same color over here it is using I don't think it's using the same color it is using the same color so for me that's a no no for me I would want to actually uh now here's why it might not be a no no this designer because this is not my design but this designer chose not to use a like for our light version over here chose not to use a really bold color like this if it's a really bold color it's not going to look well over here so he actually did here she actually did a really phenomenal job at finding a color that works well for both light and dark and using that as that limited primary call to action color so in this I say congrats well done you're kind of cheating the system you're getting Best of Both Worlds but I would say though the reason a lot of applications use bold colors for their call to actions is because they tend to pop a little bit more do you see that the difference there may not may feel negligible to you but it's actually quite powerful so I would say that he's making that compromise for the dark and light mode potentially but I think he might be missing out on some of the punch and the potency of the color especially for these small small elements down here so that's okay um you know we're changing UI element color um you know same thing here for our text he's using kind of like this orange color it's this d85 color and is he using the same color over here he is okay okay so again I would say the same thing whatever this color is could probably help just to be a little bit punchier a little bit Bolder like that you know and our our buttons could be you know pretty nice if they were that color as well let's just change these really quickly and get the impact of it all Bo we'll change these to be a little bit darker again over here we're using this color over here we're using this color okay same thing see how this punches a little bit more now and this is desaturated I like that a little bit better okay um yeah and he's saying the red is giving a Denny one buuck in the chat is saying that the the red is giving the grand total like some sort of like an error Vibe I could totally see that so we might change the Hue maybe to be more of like a green and if you're going to do green for your grand total let's and actually what we might want to do is let's pick our blue that depth of color there and let's move it back to be a little bit more of a green okay and we could find a green right there and we might even want to play with it and darken it a little bit that feels pretty good but then we're going to have to rearrange our our green color up here that's being used uh for new okay so anyways we can do some color Explorations there for sure but I think that overall it's doing a pretty good job there's no imagery here but they are doing a pretty decent job of switching up um you know the background text creating that elevation you know they didn't uh from what I can tell they're not adding any sort of blur or excuse me like uh like you know radiating color um effect off the button that might help they might be going for a little bit of a cleaner look let's look at another example now notice this that like all of in our previous example all of our color styles are set up in those color scales kudos to them for doing this Alabaster you have all of your neutrals and wild sand it looks really really similar to your Alabaster but we're going to we're going to accept it and let it go so you know we're doing okay here but here's what I would say is I think a better way to do this is using the new um is using the new variables like ability inside of figman if you haven't played with variables that can be very very powerful I know they're still in beta and there's some discussion on whether or not they're going to be you know part of a free plan or paid plan they're probably going to be part of the paid plan but notice this that no longer like yes do I have color Style here sure I have color styles here and that's really great but I also have them loaded up as variables in this example right and what we've done is we've set all variables and I could could have renamed this as color variables or whatever but we have all sorts of different like elements like you have your Primitives and you have your tokens there's lots of I'm this is not a variables Lesson by any way shape or form there's lots of different ways to set up your variables but I will say this notice how we have color for heading and then we have the actual heading color over here okay and we have like for instance like our body divider or our form input filled everything is going to have a light mode and a dark mode version of the color and we can set up our Primitives you can see as soon as we actually choose a fill color for like a frame or a section inside of figma it it allows us to dictate the Primitive hey is this going to be considered the light mode or the dark mode right we can set up Primitives for other things like what language is it going to be in what size is it going to be these are that's the idea of overarching Primitives inside of you know logic or variables so we could set that up if I'm losing you right now stay tuned don't get too lost because check it out we have all you need to know is we have light and dark mode variables for every color you would use for something right when we click inside of a form field it's using a variable and that way when we're saying hey that variable is to be used inside of anything that is light mode but as soon as we drag it over into dark mode bang it immediately becomes dark mode and if you're like w

Channel: Jesse Showalter

Views: 5,424

Keywords:

Id: Enm2XtqIeHU

Length: 42min 7sec (2527 seconds)

Published: Sat Oct 21 2023