Design Kickass Dashboard with Figma | Components and Color Style

let's design a kick ass dashboard in figma let's start with the basic artboard for macbook pro then we'll adjust a bit since the browser window doesn't get to use the 100 of the screen [Music] then we will set up a 8 pixel grid system which will come handy later on next add a page to organize the file since figma doesn't automatically create symbol page like sketch we need to add the components manually to the components page setting up only shades of gray now not any accent colors [Music] we'll set up this colors to the style on sigma [Music] back to dashboard let's start with the sidebar since we have chosen a 8 piece of grid system we need to choose only sizes that multiplies with 8 even with the spaces we'll also use the colors only for our safe color styles [Music] it's time to make components [Music] remember we're making the placeholder components to replace with the actual icons and logo later on [Music] make sure your naming structure is accurate [Music] start with the icon and logo [Music] we'll go to the asset tab and start dragging the components into our design [Music] we're going to change some of the icons to indicate which step is active [Music] now adding a welcome text [Music] [Music] and a basic one pixel divider [Music] [Music] [Music] now create more components [Music] make sure you to use auto layout feature in figma so whenever you change the button title it will update the button with maintaining the same padding [Music] [Music] now we are creating an icon container that can be used as cta and navigation as well [Music] remember to make it as a component [Music] here we are using three icons container to have search add a notification [Music] for the main layout we will use three column layout to accommodate the design shipping and the theme or credit option [Music] on the top we'll have a row for the ongoing order view [Music] let's fill up this layout with actual [Music] content [Music] when using a pair of text make sure they have a significant size difference between them to maintain the good typography hierarchy [Music] [Music] we'll also use auto layout feature on any text pair we're gonna use in the [Music] future let's adjust the cap let's group this and name order [Music] i know we can use the text style feature to organize the typography but let's save this feature for the next video since the text pair can be used multiple times and multiple places will make this pair as a component [Music] [Music] uh [Music] [Music] [Music] [Music] uh [Music] [Music] [Music] [Music] now we're creating shipping list and making as a component [Music] let's add another divider between the top row and the bottom color and reposition them to match the space between them [Music] so using divider between each of the items [Music] so [Music] [Music] [Music] [Music] [Music] [Music] we're using the same text pair component for the team feature as well [Music] we need to add avatars for displaying the team members [Music] so [Music] let's set the maximum number of the averages can be displayed to 5. [Music] [Music] [Music] [Music] [Music] oh [Music] [Music] so [Music] so [Music] [Music] [Music] [Music] now create the cards for the credit [Music] balance [Music] for them i picked just one blue color and used adobe color wheel to get this rest of the colors [Music] there are lots of different methods to choose the color from but for the design i use the analogous method [Music] let's add this color to the color style like before and attach them to our components [Music] [Music] adding some round corner to improve the [Music] [Music] stylization [Music] [Music] [Music] adding the right constraint to the right element so whenever we change the text it will maintain the alignment from the right [Music] for icons we are going to use the great strength of figma which is the community there are tons of open source resources we can use for your project without leaving the figma so go to the community and search for material design icon select the first result you see and duplicate to your draft from there you can take whatever icons you need for this project i took bunch of icons for there and attached to our color style since they're already components i just renamed them to match our component structure let's get the final touch [Music] [Music] [Music] um [Music] [Music] [Music] [Music] [Music] so [Music] [Music] so [Music] [Music] so [Music] [Music] [Music] [Music] so [Music] so [Music] [Music] [Music] [Music] [Music] [Music] so [Music] [Music] so [Music] [Music] so [Music] in the next video i'm going to show you how you can utilize the textile feature in figma to keep our typography consistent we will also use more of our components to maintain the overall consistency in the interface so see you there

Channel: Shojol Islam

Views: 1,630

Keywords: dashboard design, ui tutorial, dashboard design figma, minimal dashboard design, ui design figma, component figma, color style figma, typography figma

Id: GXhNLTZk85I

Length: 34min 20sec (2060 seconds)

Published: Sat Apr 24 2021