How to Design a SICK Dashboard UI in Figma

Project file:
(Download this, save to a folder, drag it on top of the main home dashboard within the Figma app to open it)

0:00 - Introduction
1:16 - Getting Started
2:58 - Light vs Dark Considerations
5:04 - Navigations
16:00 - Card Designs
31:37 - Chart Design
34:20 - Final Thoughts

Let's get started!

#dashboard #ui #figma

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS!

^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Come to my discord server or add me on social media and say Hi!

[rjsmith]

🔥A tip on the radial progress bars. The circle tool actually doubles as an arc tool - so no need to mask anymore! That little dot on your circle shapes can be dragged to activate the arc tool. Also another tip about spacing accuracy! While you have an object selected, hold alt and hover over near by objects to get the distance between things and your selection.

[ZakFerris]

I just want to say your channel is really amazing. I have been a product designer for over 10 years at some of the biggest companies and I haven't found a channel that gives such great advice. Working with a design system is great, but when I wanna take on a freelance project or even something for a friend. I find it so hard to get back into creative mode and make projects feel current. Your videos remind me of art school lessons I've forgotten and remind me how to think outside my day to day. THANK YOU!

[mitch]

Thank you very much for this tutorial! I've had zero experience with designing in Figma but thanks to this tutorial I'm now designing a new UI for my company, of which the CEO is already reacting very positive on what I'm creating!

[ronnilokoro]

Despite being born in early 2000's, I have a fond feeling for retro tech. It makes me feel alive. I am glad you maintain a degree of that retro environment.

[ariodiz]

Looking good! I think you should use autolayout frames instead of circles and rectangles as backgrounds for cards and buttons.

[trioxdesigns]

learned tons of small elements from a single video thanks

[manjushukla]

One of my favourite topics : "Dashboard" and you covered it way too beautifully ! ❤️

[ChristianBaptiste]

Two comments/suggestions:

First, on your doughnut graph I would suggest duplicating your first layer ( your track layer), then use the arc tool ( the small blue dot in the middle) to create the amount (the result/ dark purple) ring layer.
Second, I would suggest the result layer (the dark purple) start at zero and progress clockwise. Doing this not only gives you an easier control for your design, it also gives you the ability to adjust your value with better accuracy. For example, you can set the arc to be 62%. One last thing, your example has your results on the wrong side.

Keep producing!

[Kriti-fvys]

This video came on the right time as i have to make a dashboard for a client & was struggling with it as its my first time creating a dashboard for a client. Thanks for making this video 😊

[iiigor]

Why using so small working area comparing to the screen size? Is there any practical reasons for this approach?

[yeaheiamahmudhridoy]

designing a dashboard always frightening for me! you break it down nicely Garry, thanks!!

[creativeyudai]

Awesome video man, need it this so bad, I’m doing my first dashboard ever, this video helped me a lot 💯

[weforcedigital]

Wow... I love the design, please can you let us know the mic you use

[gunzithanzo]

Ooh God, thank you gary this what I've been looking for

[sjeditions]

hey!! can i recreate this dashboard design and use it in my portfolio?

[cesarjuliancortesvelasquez]

Interesting, please, can you tell me about preview (play) option, specifically scroll vertical options, max height, fix position sidebar, thanks

[limecraftsproductions]

hi Simon this is amazing learn a lot the designs through out the video. love it

[prith]

thank you so mucvh because of you I learned Figma today

[ibrahimoderinde]

@DesignCourse you said you were gonna add this tutorial to your course right with little touches hope you’re gonna do that or not??

[waifufx]

Thank you Sir I have always wanted to know how it is done especially anytime I see inspiration online