How to Design a Dashboard UI in Figma (Tutorial)

hey guys in this video we're going to create this dashboard from scratch using figma and just before we get started i want to remind you that i recently have a discount on my figma course so feel free to check it out if you're interested in learning more about figma but now without further ado let's jump right into the video alright so we're back in figma and the very first thing that we're going to do is we're going to create a frame so let's go under the desktop presets and we're going to select 1440 pixels of width and at this point we're going to double click on the frame name we're going to rename it to one now one more thing that we want to do is to round up the corners so that we already have this user-friendly feeling to the app and that we're also going to add a drop down just for the fun of it in order to visually differentiate it from the background and we're going to make it very light maybe around the 10 percent we're also going to give it a little bit of a y um direction meaning that we want it to be a little bit more towards the bottom section so at this point we're going to create the three main menu options so let's go ahead and let's just create this uh first rectangle and then we're going to simply click on ctrl c and ctrl v or command c in command v and we're going to duplicate both of these now we're going to make them white and the reason being is that we're going to change the background of the frame so let's go under fill we're going to select the background similar to this one right here but we're probably going to make it just a little bit lighter and the less give it just a little bit less hue and tonality all right so at this point i think we have our base going i'll probably make this a little bit uh more wide and i'm going to duplicate it one more time in order to start to get the main structure of this dashboard so let's increase the width let's bring this one over here i'm going to duplicate it so we can already see from a high level what this is going to entail let's duplicate this again let's make the width and let's adjust it okay so we're going to bring this one down here we're going to bring this one here and this is going to allow us to see from a high level if all of the main building blocks that we are creating or working or if we need some refinements because it's always good to work high level first and then go into the details of the project all right now that we have our base going i'm going to select all of these and i'm going to group them together and i'm also going to lock them so that i can easily work on the actual project without having to worry about the details all right so i'm going to go over here i'm going to create the three dots which are going to symbolize the um close options as well as the other options which we have usually at disposal we're working on an app or actually when we're using an app and this will do all right now let's continue and let's create a logo for this so here's going to be the main logo i'm going to use a stroke for this let's increase the stroke size and then maybe let's make it just a little bit smaller and now i'm going to create a search field let's bring it up here let's bring it here let's increase the radius now at this point as we're working on the search field i'm actually going to use the same color as the one below and i'm probably going to make it just a little bit bigger in the size and now what i'm going to do is i'm going to use nuclear icons in order to find a search icon and i'm probably going to use something around these lines and by the way this is a reminder of a that this is a dashboard which is um uh taken inspiration from a dashboard from ui8 which recently launched it's a dashboard website website builder i'm going to leave the link and if you want to check out the full project because it's really interesting one uh it's literally a dashboard that you can drag and drop so and literally create the dashboards in a very fast way so really cool project um really like this dashboard so check it out on ui8 and now let's continue over here i'm going to go with lotto which is a free google web fund if you've been following the channel for a while you know that i'm a fan of latto i really like this this font overall and i think it suits well a range of ui design related projects all right let's make this one smaller let's bring it over here and here we go i'm going to use the [Music] command icon which uh i'm not sure if i'm going to find here yes i am a lot always have you covered and let's make it smaller i'm actually going to make this both black all right probably make this one bold cool so we have our search field right here and now one thing that we're gonna do is we're actually going to go ahead and create a button that allows us to basically create a new section in this app so we're going to select our main blue color which might as well be this let's make this one bold i'm going to go ahead and create a plus i'm probably going to i could convert it um let's make it outline stroke yeah so as you can see you can create a you can convert it to an outline and this is going to help you out essentially to just have this individual uh element not as a text field but as an icon so that's going to help just edit it and you know work work your way around anything that you might want to do and we're going to bring it here might as well create a component out of it let's rename it to button and might as well add all these components outside here we go all right i'm going to write message i'm going to find a message icon so let's do something different let's do one of these so let's do one of these center it let's increase the size i'm going to add a notification right here so i'm going to use this same color as this one all right and we have our good all the notifications trying to select the small part and here we go all right perfect so i would say we have our top level section just need to add a profile picture so let's bring this one here let's add the profile picture here on the right i'm going to go ahead use content real i'm going to go under image and i'm going to use an image which is neutral in color it's going to be something like that maybe let's try one which is even more more white clean yeah this i think looks um looks really well also in considering the colors so we're simply going to leave it there and yeah this is starting to take shape and now we're going to move on to the side menus so for the side menus i'm going to grab these elements right here just to have a base to work on probably going to make it just a little bit bigger and i'm also going to add the arrow on the right so probably let's go with the cliff just to find somewhat of some bulkier options if you wish let's increase the size of this let's bring these all the way to the right it's going to be home we're going to make these bold right we're going to find the icons in just a moment but for the time being what we're going to do is we're just going to duplicate this just a few times we're going to add the different labels all right let's make these guys just like the smaller let's fix the proportions very important and now let's write some text and find the right icons for each and every one of those um elements so let's find a basic icon for the house maybe um yeah now let's let's go with something something like that we're going to write product we need to find icons which not only match in style but need to they need to match in [Music] when it comes to the actual um stroke size and you know we can refine that later but it's always important to and like figure out some of those elements beforehand we're going to have customers so let's try and search for users and we're going to write shop and that's going to be let's call it 20 dollars and for the promotion let's write in promote now what we're gonna do since all of these icons are basically like things that match the and as you can see the moment that i bring them above i think i have like an issue with the ram or something but essentially very easy way to overcome that is you find a similar width that works for each and every one of these let's increase it probably it's going to be somewhere around the lines of 27 but as you can see different icons have different strokes so what we need to do is to unframe them and then the stroke make it one which is universal so let's go with 2.5 center all of this and here we go let's bring this right here all right um what we're gonna do next is we're going to use the same color here i'm going to delete all of these guys let's bring all of these icons on the side menus all right we're going to make this one the selected one select select and then we're going to basically create a duplicate of this rectangle i'm going to bring it right over here i'm going to bring this guy more or actually let's delete it all together and uh yeah i think this is gonna work let's just bring this one a little bit more on the on the right we're going to simply make these arrows go more towards the left to compensate visually and we are pretty much sorted all right so at this point what we're gonna do next is we're going to have a section below which is essentially going to be a help and getting started section and we're also going to have a divider line and we're going to create the line here above let's bring it all the way down and let's use a color such as that one let's make it just a little bit more dark let's search for a help icon i mean this one's gonna work let's increase the size just a little bit now what we're gonna do is we're going to add a almost like a tag option let's bring this one below all the way down we're going to just make it all the way rounded we're going to make it white and color wise let's try this one um not too sure about it i don't want as much visual emphasis so what i'm going to do is i'm going to make the 8 of this color and this one is going to be turned down to 10 percent opacity let's bring this one here and let's uh just bring it a little bit above so we can also have a logout option right in exit we're going to find the option right away okay perfect so at this point what we're gonna do is uh i'm going to increase this size just a bit i'm going to make this a stroke of two let's bring this one up and let's see how this looks in context so it's really important i'm probably going to change the color of this one to a blue i don't want as much visual emphasis on the number eight i do want this to be a little bit bigger and yeah i think we're pretty much there now let's bring this text over here let's write in dashboard let's increase the size quite a bit and i think we are at a good point now one thing that i noticed that i didn't do earlier but we can definitely do it now is to simply select those layers that we locked initially the background layers and i'm going to go ahead and select all of these four guys and then and add a little bit of a border radius so that it's going to look more user-friendly overall now at this point what we're going to do is we're going to go ahead and add the overview text we're going to start building up this section right here so as you start actually let's make this one even smaller we're going to grab this element right here i'm going to write in all time and we're going to bring it here on the left let's bring this one all the way here and let's grab one of these icons of the arrows and we're going to basically snap it over here let's make it just a little bit smaller and here we go let's group it all together let's bring it here on the right and we're pretty much good to go and continue so i'm going to bring this rectangle right here let's increase the size and let's create a smaller version this let's make a white let's reduce its size and this overall is working quite well we're also going to have some uh um some opals right here so let's make a hundred by a hundred that's going to make sense in in just a moment and let's add the text the same property so i'm using option command c in order to copy the style then option command v in order to paste it and let's duplicate this a few times all right so we're going to go over here and we're going to start dragging and dropping this text components i'm going to bring them all the way up i'm going to write in customers and bring this element right here i'm also going to go ahead and add this text and i'm going to add a value let's make this even bigger and here we go all right say this is moving on pretty well now at this point what we're gonna do next apart from making it just a touch smaller it's going to be using this tag that we already created i'm going to bring it here on the very top also going to just make the um corner radius a little bit less rounded let's say eight percent i'm going to center it let's bring this one like that and i'm going to give it a positive value and that's that all right so far so good and what i'm gonna do next is i'm simply going to remove this all together i'm going to write in income let's add a big value let's bring this one here on the right and probably let's change it to a white background so we can have further contrast all right now let's go on and let's fill up this section right here so i'm actually going to go ahead and just duplicate this text which was duplicated over here that's totally fine let's add a little bit of bold indentation here i'm going to write some other names let's also add some some surnames all right now what we're going to do is we're going to go into content reel and we're going to add some images let's like them for some reason i wanted to see all of them yeah that's essentially what i wanted to do now let's add some white background images or at least some light background images um this one let's try this one maybe this one is even more clean so i'm kind of looking at the images which overall look clean in their composition and that the colors don't distract too much so as you can see these two are quite dark and although the image itself is really good looking i think that you might want to check out some alternatives to that and even these ones are looking more [Music] these ones are looking a little bit too alike this one looks like a fashion icon so probably let's change it with something with one which is a bit more um neat and professional this one yeah that'll work all right so we have our basic uh section of the gallery and now what i'm gonna try and do is i'm going to add some dividers in between let's try and copy and paste the style this line icon item and use command d all right perfect so now let's uh move on to the next section popular products and i'm going to add over here basically some text elements products and then earnings and what i'm going to do is i'm going to duplicate this guy bring it here product day and i'm going to go ahead and just create a rectangle right here round it up bring the text on the right and probably going to have some reference to the earnings let's write in a value and let's also add one of these divider lines all right i'm gonna group it together duplicate it just a few times products it's on the stroke of this color let's bring this up a bit all right now at this point so we're going to change the values over here and what we're going to do for the products themselves is we're going to use this kit called lam which is from ls graphics really good looking kit for other reason it's temporarily fixed so let's go ahead let's bring this one these two elements also this one here and feel free to use any um any kit that you like or any icon really and is this one loading up yep actually that's like this one first let's copy the style let's paste it in all right all right perfect so let's move on to the next section which is going to be this one here let's write in comments and we're going to just add a few different lines of text over here i'm going to add the date let's bring this one right on on the right side and over here we're going to write a small lipson text let's just delete everything that is not really relevant for the text itself let's make this regular bring it down like that and let's also add a divider line in between these two elements all right and for the main graph we're actually going to uh find one of the previous ones which from one of the previous videos i'm going to paste it in as i think it works totally fine in this case as well we're simply going to duplicate it maybe change the color of these elements it's not it reflects this current and design better we're simply going to duplicate these guys just like that it's right in the month and then we have january again let's just tweak these just a little bit so that they are not identical in to the other ones and let's go ahead and let's try and match the left line okay let's copy and paste this style as well i'm going to stretch these guys just a little bit now what i'm going to do is i'm probably going to just oops make them smaller and here we go all right i think overall this is working out pretty well let's bring this one down all right let's bring these ones let's distribute them vertically let's also have one of these elements right here and on top of that we're going to add the filters option that's because i wrote it incorrectly and yes let's go with something like like this one all right so we managed to get to the end really hope that this video was helpful and i want to remind you that to my youtube channel you're going to find many other videos covering these type of tutorials also sharing my over 8 or 10 years of experience in uiux design so really hope you enjoyed this video and i'll see you in the next

Channel: Pierluigi Giglio

Views: 843

Keywords:

Id: EFSef5ntYjI

Length: 40min 41sec (2441 seconds)

Published: Sun Dec 05 2021