Designing a Dashboard UI in Figma

All right, folks. In today's tutorial, I'm going to walk you through designing a sleek management dashboard in Figma using MUI's material Figma library.

We'll start up with some customization and design a order screen app all using components straight from the library.

Quick heads up, we've got a free version up on the community platform. It comes

in the form of instances, which means you can't tweak the components, but hey, they're perfect for putting together quick mockups. All right, let's get

quick mockups. All right, let's get cracking. First things first, since I'm

cracking. First things first, since I'm rolling with the default styling of the library, I'm going to tweak a few styles a bit. And by the way, if you're curious

a bit. And by the way, if you're curious about how to apply your own brand style, check out our dedicated video on that.

Now, I could have gone on the route of designing my app in a fresh file, which I usually recommend, but in this demo, I'm just focusing on one screen, so I'm

cool with doing all the same all in the same file as the library. Starting with

a blank canvas, set standard width of 1440 pixels. I'm going to switch up the

1440 pixels. I'm going to switch up the background to default background following the API's default behavior. I

like to map out the whole layout right from the get- go. For the demo, I'm drawing inspiration from Gmail and visioning a rounded main container with

a transparent left navigation.

Let's give that main container a white color. That means using the paper

color. That means using the paper elevation variable. All right, I'm

elevation variable. All right, I'm pretty happy with how the layout's shaping up. Now onto the left

shaping up. Now onto the left navigation. Let's kick things off by

navigation. Let's kick things off by adding some padding using the spacing variables. Tossing in a placeholder logo

variables. Tossing in a placeholder logo just to get us started.

For the links, I'm going to go with the Lyon component since it's got all the bells and whistles I need. like icons

and a selected state.

Default height feels a bit too much. So,

let's slim that down by making it dense and disabling the padding from the properties panel.

Duplicating the list items with some madeup page names. And let's toss in another batch of list items down on the bottom of the left navigation.

[Music] All righty. Feeling a bit too simple.

All righty. Feeling a bit too simple.

So, let's spice things up by adding a main action button. Quick note, Figma tends to mess up the shadows when you tweak the border radius. So, if you

catch me fiddling around with the with the radius, you know why. Looking great

so far, but we're missing icons on the list items. So, let's enable the icon library, so I can drag them out from there.

[Music] Icons color do not propagate with swapping them out. So, I have to manually flip back to my default icon color, which is action.active.

All right, let's shift the attention to the main content. Starting off with the top bar. I'm thinking of keeping it

top bar. I'm thinking of keeping it simple with breadcrumblings and some few elements.

Noticed a weird shadow effect on my container. Turns out it's from the clip

container. Turns out it's from the clip content. Always have to take that option

content. Always have to take that option to proper shadow rendering. That's

looking good. Moving right along to the page title.

Wrapping the title and what comes below in a container with a max width picked from my break points variables for easy adjustments down the line.

Throwing in a button for exporting the table contents which we'll design next.

Here I'm dropping in a card component though I'm noticing a bug not rendering my shadow correctly. Not sure what's causing it. If you got any insights feel

causing it. If you got any insights feel free to share.

deciding to detach the card elements, finding it too time consuming to replace them while keeping them undetached. I'll

show you how to keep the component intact with the table below, but sometimes it's just not worth the hassle.

[Music] Cleaning up the necessary elements from the card and adding what I need. using

auto layout for just about everything because it's way handier for responsive screens.

[Music] making the third card an action for the page itself because I'm not really a fan of super repetive ative content.

Moving right along to the table. I'm

starting fresh with a card component.

Since you can swap out the inside instance of any component, let's replace it with a table or a data grid depending on your needs.

Dropping in some simple filters wrapped inside a container.

Continuing [Music] the filters using a select.

Once that's done, I want to show you how it looks on a larger desktop screen just in case I miss some of the use cases.

Yeah, I was right. So, there is a mistake. So, let's center the container.

mistake. So, let's center the container.

All right, back to our table. Quick

renaming the table headers. Selecting

all the ending cells using command or control-click and simply pressing delete. Adding a margin between filters

delete. Adding a margin between filters and the table with variable value. Since

I need a custom cell here, I'm going to have to create the contents of the cell as a separate component, then come back here and replace it. So, let's get to it.

to replace all at once. I'm selecting

all those cells I want to switch up and simply replace the typography instance with our newly created component.

Running into a minor constraint issue here. I'm going to investigate and fix

here. I'm going to investigate and fix it.

We need to make all the layers occupy all the content they have available.

Same deal with the next cells, but this time replacing the content using a stack component instead of of starting from scratch. What you'll see me do quite

scratch. What you'll see me do quite often is selecting the parent component by pressing a slash keystroke.

[Music] for the third cell which will be a date.

Leaving it as it is and using a plotting plug-in for generating some dummy dates.

Checking how it looks on smaller screens and it looks good to me.

Final check with a dark mode. Noticed

the paper elevation.