How to create a dark mode design in Figma - Fast Method

hey everyone it's been a little while since my last video in fact i actually did a a live video last week but this is it's been a little while since i did my last um proper youtube tutorial so today's going to be a really quick one and it's going to be around how to create a dark mode really quickly using figma and i'm going to be doing that today using a design file that i found in the community um the community on sigma is an incredible resource of um templates uh widgets plugins all the good stuff and there's some really really quality stuff on that like really high quality stuff on there so i recommend you go through the community and just have a look around see what's on there maybe send some of your own stuff to the community and share with the greater design community which is really cool um so today i'm going to be taking a app um that's been pre-made and then i'm going to apply a dark mode to it using a plug-in and i'm going to show you what we can do to then tweak it and refine it and make it really good and just in like a really short space of time so you could spend ages doing a dark mode but um there is a shortcut so i'm going to be using this one by blush um which i believe blush is pablo stanley's um company um and he he does some really awesome uh illustrations of things i think he used to be one of the lead designers at envision or something like that um so yeah probably should have looked that up but i'm gonna be using this today i haven't actually tested this up front i'm going to be doing this um all on the fly so as per all my videos if something goes wrong i'll show you how to fix it and we'll work for it that way so here we go let's have a look i've not actually looked at this file yet i just spotted it just before starting this video it looks like um it's full of some really really nice stuff some style guides a nice cover and some components illustrations styles and these templates so what i'm going to do is i'm just going to pull in one of these screens and we're going to use the plugin so let's take this song view right here that was weird as i copied it it loaded in an image that's strange anyway let's have a look in fact these are quite similar so i'm going to take one of those and i'm going to take one of these [Music] and i'm going to take these two so we've got four four artboards that we're going to work from and frame sorry it's not illustrated i'm just going to create a new page call it dark mode here we go so now we've got our four screens i'm just guarantee put them all side by side and make sure they're evenly spaced because it looks nicer okay so for this plug-in to work and this plug-in is called if i can find it dark mode magic so you can download that from the community again just click home go to community type in dark mode magic and you can add it and it will take probably less than a second to install um but this this needs you to select an entire frame you can't just select say i put in this rectangle let's make it red and then plug-ins dark mode magic it says it's applied but it needs an actual frame to do it so let's have a look let's do this one so i've no idea how this is going to turn out um so let's just have a look and this is probably the kind of workflow you all have when you try and do this um you just got it's a bit of trial and error initially you don't really know what's going to happen but you can have a bit of a guess so where are we right there dark mode magic and there we go we've instantly got a dark mode applied now this one hasn't worked as expected because we're actually using an image here and that image can't the colors can't be changed on that image so what you'd want to do here is rework this illustration um with some new colors and same here well actually no not the same here but uh same here you want to go through and refine things so this is a dark blue that's that's not gonna work for us so you might want to pull in a lighter blue and then everywhere that darker blue was used you'd then um swap it out for this new one so let's have a go with this one what we've got here so we've got some we've got some images so these images might not work these are also images but here we've got some text and it's black and our background is uh where the inco 706 is uh which looks like it's just an off-white so we're going to try with this one let's have a look plugins magic there we go we've got an instant dark mode um it's taken all the the color codes and found kind of corresponding ones for a dark mode and then so i mean this looks pretty good i think you might disagree but this looks pretty good to me so what we could do is we could take this um gray here and just replace replace all our whites with that gray just to like soften it a bit let's click this again when you click a um the frame itself it will show you all the colors being used in that frame which means that you can really quickly change colors in bulk so let's say this this background here is just a little bit dark so we're going to first of all move it into the blues we're just going to tweak it a little bit like so so it's just it's just taking it a little bit off that um real dark mode like that and just moving it ever so slightly so it's less intense like that and then maybe maybe you want to change this gray so um we can see that's the one for one f 28 so if we go back here and find it in our list one for one f 28 and maybe we want to make this slightly different as well maybe we want this to be kind of more complementary with that background now that we've changed it so there we go we've got a dark mode already um and this hasn't required us to do an entire kind of color branding exercise um just being able to do that really quickly what i quite like to do is to draw some rectangles and then just use that to color pick some of the the main colors that we're using as well there's probably a plug-in that lets you export the colors out directly so you can kind of have those colors together let's grab that oops keep missing let's grab that font color we've got there see we've got a really nice color palette here these are really complementary and then we're actually using this kind of purple here um as our accent color so let's pull that out as well because that really really stands out against these other colors so now we've got this really nice color palette you can see that that kind of um lavender really stands out against the black and the grays this is a really nice color scheme and and this has taken barely any effort so this is a really really good way of experimenting with creating your dark mode now i'd suggest you you work really hard on your dark mode and refine it don't just click the plugin and go with that because i mean you want to make sure that it's actually um accessible as well so i'd argue this gray on this background doesn't really stand out enough so we probably want to grab this number 656 f77 and just tweak that a bit um make it stand out a bit more there it is so we probably want to bring that up a little bit not too much because we still want it to um be a little bit knocked back from our primary uh text color um because it's not the most important information here it's kind of a secondary piece so we want it slightly knocked back but it was if we look back before it's that's quite hard to see but applying a little bit more light into there that's quite nice and because we've done that using the selection colors from the overall frame itself we can see that everywhere it is actually changed so i'll just go and undo it again and you can see it's changed here as well perfect so that's a really really quick way of doing it i'm just going to pick that color as well just so we've got it and this isn't the best way of doing it but i'm just going to like that yeah see that's not the best way of doing it so let's actually pick it like that oh no i actually got the color right and let's just swap these two over whoops if you select multiple objects you get these little pink highlights and you can just swap them around like that which is really cool okay so that's this is the color palette we're kind of working on now so we can now bring this over to our next artboard i keep saying artboard i mean frame and we can quickly do the dark mode again there we go see this hasn't quite worked as well that uh kind of i don't know what what color this is and accent blue going to uh figma file it doesn't quite stand out on the black um background too well so let's let's go pick that's that looks a bit nicer let's go to our frame and grab our background which is this one i believe and let's apply that to it great so yeah that's been updated and then i would say this doesn't stand out very well so let's quickly just try that color here yeah i'd say that still doesn't stand that well so let's bring that up to a full white which looks a bit nicer and then we can use this as our secondary in this case because it's on a lighter background yeah that looks pretty good same for all these a nice light color here and then secondary whoops i don't want to grab that let's make that that purple as well see what that looks like yeah that looks okay and pick a secondary one there cool so there we go we've we've got a dark mode already like i said we still need to swap out uh this background but um probably just cheat at the moment and do a anyway and let's do our last one here magic i mean this plugin is so good it's really sped things up and again that blue hasn't worked for me so let's let's grab whoops let's grab our accent color and replace all of those again instantly that stands out so much better here's our background color that we want to make sure works with the rest of them there we go and let's make that and that's our primary thing let's make that white these are also quite important so let's make those white make them really stand out i actually want to make these white as well so that pause yeah that looks good make both of these a purple and just having a look how this file works that's quite nice but let's make it match the rest of our design so change the color a bit there actually that might be knocked back a bit too much now so i might need to in fact i'm going to go back to the original way that works nice there let's grab these icons make those white and there we go we've really really quickly taken our design that we've in this case pulled from um from the community um and again it is uh blush blushes music app ui you can find this in the community check it out it's really cool um and then we've used that plugin again that was dark mode magic to quickly apply a base for our dark mode we then created a really quick color palette just by tweaking some of those colors and making sure they work and then we've applied that to all of these so the only thing left to do now is to probably head over to blair's website and change this the color of this background or you could do it in photoshop or something like that um that probably doesn't work so let's quickly change that to our accent as well there we go so we've got a dark mode music app and how long did that take probably 10-15 minutes um so that's a really really quick way of doing a dark mode i really hope you like this video let me know in the comments below if uh it was helpful um let me know your your techniques for applying dark mode um and if you want to take this a little bit further it'd be really worth um downloading some accessibility plugins and just making sure that for example um this this gray stands out on this background like that's readable and that passes and the accessibility checks so it's really important to use accessibility plugins when working with your color schemes and for both dark mode and light mode or just in app design and web design in general um so yeah please like and subscribe um share this video with your friends or on social media that would really help the channel and look forward to seeing you in the next tutorial and let me know if you want to see more live tutorials as well my live tutorials use um streamyard as a service and that means that you can ask me questions from any platform that i've streamed to um and i can answer them either in the livestream or after the live stream in the comments section in youtube so please do check out my live videos as well and i look forward to seeing you in the next video cheers

Channel: Will Brett Design

Views: 7,056

Keywords: darkmode, dark mode, figma dark mode, how to create a dark mode, app design, figma, figma app, blush, dark mode magic, figma tutorial, will brett, will brett design, figma darkmode, darkmode design, dark mode design

Id: pulxAOwPsY0

Length: 16min 35sec (995 seconds)

Published: Mon Feb 07 2022