Let's Design a Tech Dashboard UI in Figma

hey guys P here in this video we're going to create this dashboard design in figma and just before you get started I want to remind you that I recently launched a figma cheat sheet which is going to enable you to have a list of all of the major figma shortcuts so feel free to check it out it's free to download now without further Ado let's jump right into the video the very first thing that we're going to do is we're going to create a frame which is going to be desktop 4040 pixels of width since that is a good size it's not too large it's not too small and what we're going to do is we're going to focus on the side menu as the very first element so as you can see right here we have the side menu I'm simply going to make the background just a little bit darker so that I can uh more easily see this uh um this dashboard and uh what we're going to do next is we're going to turn this side menu into a white uh color and uh we're going to do that by adjusting the fill and we're also going to add a drop shadow which is going to be very slight and we're not going to really have a lot drop shadow so we're going to reduce the opacity by probably 10% or so even 8% and just that we can barely see this division between the top level side menu and the background now we're going to get started by adding a circle right here and if you wish you could also create an outo layout out of the side menu and uh we're going to go ahead make it just a little bit smaller we're going to use one of my favorite plugins to find an image of a individual which is going to be over here on Splash and if you click on portrait you're going to find a bunch of different uh images we're going to go with this one because uh the composition is clear and also on the witer tones of the background for example also the white t-shirt that helps with the general composition as it's a light design and I know that not many people are actually focusing on these details but it really all adds up in the end now we're going to add the text which is going to be in inter which is a free Google web font so you can simply go on Google search for enter and you're going to find it right way and we're going to write um an Atkinson's and uh simply making up a name we're going to Center this uh text alignment make it just a little bit bigger and also I'm probably want to go with semi bold for this uh name and right below it going to write profile and uh make it just a little bit smaller and uh top of that we are going to change the color and for this project we're going to go with a color around these lines so a blue which is not too strong but uh it works really well for um basically SAS tech companies these kind these kind of things we're going to Auto layout this text we're going to basically out layout this one more time I just like like to have this group individually in the outo layout so that I can adjust in case the spacing of the text and while I want to keep these two separated now at this point what we're going to do is we're going to add some sort of a theant line so that it's just easier to see the visual division between one element and the other and I'm going to select a color which is a gray but just with a tint of blue because it really adds to the design not to make it just a dull uh pure gray element and I'm going to add the out layout again let's uh Center this vertically now at this point what we're going to do is I'm going to quickly duplicate this text using optional and I'm going to bring text over here I'm going to write labels and I'm going to basically make this old caps and let's increase the letter spacing going to make it at 12 and at this point I'm going to use a color which is somewhat similar to the gray that we used for the line but we're going to make it just a little bit darker just like that okay we to duplicate this one as well make it in a black color and we are in a good position overall so at this point I'm simply going to grab the icons from the original to save us a little bit of time instead of going and searching each and every one of them but in your case what I recommend you doing is uh download a software which could be for example nucle icons which is my favorite icon management software together with noun project and what nucle icons allow you to do is to search for icons for example social and I can literally drag and drop the icons and have them in SPG format which is super important so that it's scalable vector graphics you don't want to have flat icons in your designs as SVG is going to allow you to extend increase the size of the icon without losing any of the underlying quality so now that what that is done we're going to Simply add the different text which is probably going to be in the medium since we don't really want to uh make this as um much visual emphasis as the one above and I'm going to duplicate this using shift plus optional and then using command D just a few times so that I can quickly create dcat I'm going to select all of these I'm going to use this trick of distribute vertical spacing so how we can quickly organize this and I'm simply going to add some some text doesn't really matter for the time being um these menu items we just need them as placeholders for this project so I'm going to send drafts and then deleted favorite simply going to quickly add some more of course the icons AR representative of the actual text label but uh just want to get the point across and then in your example you can actually go ahead and curate all of these details now let's uh go ahead and uh we're going to create an auto layout for all of these elements as you can see instead of having to select each and every time um I can actually lock this layer so that I won't select it by accident using shift plus a for the outo layout and I'm going to basically outo layout all of these all right at this point one thing that I can do is just select all of these make sure that they are all well aligned within the AO layout and at this point I'm going to create a button which is going to be right here below so I'm going to sample the original color which we used right here I'm actually going to change this Color Oops or actually let's do it directly from here and I'm going to round up just a little bit I don't want to really overdo this and I'm going to add over here the text upgrade plan center this vertically then let's make this white and uh I'm going to use Auto layout and I'm going to duplicate this right contact support let's make it just a little bit smaller I'm going to example using the control+ C to use the same color and I'm going to make the field 10% opacity and here we have the two main CTO actions the side menu okay so now that the same menu is done we can actually go ahead and create the main uh areas so I'm going to use the rectangle tool in order to create this section and I'm going to change the color slightly so that uh we have this visual separation from the background rectangle all right so we're going to add the top header is going to be overview going to increase this quite a bit making it uh just like that and uh now we're going to add also a divider line and we're going to add another one again just to give us a brief idea of what do we want to keep um the main graph so what we're going to do is we're going to add some of these elements and I'm going to make it uh let's make it at the 10% opacity I'm going to grab the text add this is going to be seven and uh in order to make our lives easier simply going to lock this and I'm going to make this little bit lighter because we don't want as much visual emphasis okay good old out the layout and if all is looking good we could easily change this let's actually do one thing actually I don't think we we really needed the outo layout uh for this one so just to make our lives easier I'm simply going to group this and then I'm going to use shift plus optional and then uh I'm going to duplicate this this uh just a few times or actually a lot of times and uh I'm going to stretch these and here we go cool this point let's just rearrange the heights so it looks like a naturual graph there really isn't too much logic applied to this uh this very moment because it's not a real client project but of course if it was a real client project you would do all of the necessary ux decision making and due diligence so I'm just making this op right looking good now let's make a big spike at the end showing that there is some uh some activity some element which uh maybe require extra attention things of that nature all right so at this point uh what we want to do actually I want to have this section with more visual emphasis actually and uh I'm going to select all of this portion right here and I'm going to turn off the opacity so we have a layer of um like a visual layer simply going to right here so we going to repeat there's a bunch of ways that you can do all of these so don't feel limited by one method or the other the important part is that at the very end you're going to get to the result that you are actually looking for so there's always multiple ways to achieve a result and uh just keep that in mind going to have one two three four five six okay perfect so at this point we are definitely in a good shape and uh what we're going to do next is we're going to have some sort of label for the upcoming uh table so so we're going to go over here going to write users oops what did I do users and this one is going to be gray and the m b smaller then we're going to have over here status users Impressions and conversion okay let's write all this so status I'm going to show you a nice trick to organize all this pressions and conversion all right so far it's looking good and we're going to do that actually let's do it one more time because we're going to have the free dots menu at the very end and uh cool looking good I'm going to add some uh elements right here oops let's make this one in this dark color going to add some uh lipes here and stop this so we're going to copy the style we using option command C option command B this one is going to act the almost as a secondary label and for the status we're going to have right here going to write B outo layout all right so far this is uh looking good Center vertically Auto layout it's duplicated and this one's going to be another number let's write total Impressions this one's going to be conversions and uh let's be generous with the conversions all right now at this point we're going to add another icon which is going to be the three dots menu which you can see right here just borrowed it from the original design but you can easily find it pretty much anywhere on the web as an icon or simply create free ellipses you're good to go so at this point what we want to do is to actually add the well I'm actually going to add some uh uh an image which uh in this case we can use unsplash again so we're going to borrow the the one from the original and at this point I'm going to AO layout this these ones are already outo layouts and uh you can uh select all of this out the layout Bine it and uh at this point oops this point what we can do is to simply about these labels and we have our nice base and create an outo layout out of this as well we adapted since the position has been changed slightly and at this point what we can do is simply copying using shift plus the optional key came below and this from P write active active active actually one thing that I'm noticing is that this Auto layout is going to create some issues with the alignment here on the on the left so what you can do actually is to Simply uh disregard the out layout and be going to keep it for time being and uh let be going to copy just a few times various element oops copy the same and uh we can change uh all the other values so nothing crazy and uh here we go so cool we have uh our dashboard created and um yet again hope this video was helpful I have over 700 videos on this YouTube channel and I'm very active on Twitter Instagram U Tik Tok all the social media of there so if you're interested in learning more about design from a designer over a decade of experience feel free to check it out as well as all the freebies in the link in the description and I'll see you in the next one

Channel: Pierluigi Giglio

Views: 290

Keywords: ui design, ux design, web design, designer, design

Id: w73ilbFBQqA

Length: 22min 48sec (1368 seconds)

Published: Fri Mar 01 2024