How to Design a SICK Dashboard UI in Figma

Тәжірибелік нұсқаулар және стиль

bit.ly/3fURuDf 👈 Learn UI/UX Today. Use "UI2022" for 22% Off!
-- Today, I'm going to fulfill a long-awaited request from many of you, and that's how to design a dashboard from scratch in Figma. If you're interested in seeing how to really make it responsive and interactive, check out designcourse.com, as it will be available in the curriculum within a week of uploading this video!
Project file:
coursetro.s3.amazonaws.com/st...
(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!
Learn UI/UX: designcourse.com
My personal FB account: logodesigner
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Designcourse.com.
Come to my discord server or add me on social media and say Hi!

Пікірлер: 127

  • @DesignCourse
    @DesignCourse2 жыл бұрын

    Jon Frok will be coming back soon.

  • @inclinedadarsh

    @inclinedadarsh

    2 жыл бұрын

    Took a screenshot so you could not refrain from bringing it back

  • @CoolScratcher

    @CoolScratcher

    2 жыл бұрын

    LET'S GO.

  • @jd4300

    @jd4300

    2 жыл бұрын

    Let's go. Great guy.

  • @theisoj

    @theisoj

    2 жыл бұрын

    Yay! 👌

  • @ZakFerris
    @ZakFerris2 жыл бұрын

    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!

  • @ronnilokoro7394
    @ronnilokoro7394 Жыл бұрын

    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.

  • @rjsmith2007
    @rjsmith20072 жыл бұрын

    🔥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.

  • @dee6176

    @dee6176

    2 жыл бұрын

    wow this was exactly what i thought of when he did that...glad to know that someone else thought of this too

  • @dheepshemare5833

    @dheepshemare5833

    2 жыл бұрын

    Dude that tip for the spacing has changed my life for the better!

  • @sharathkumar83

    @sharathkumar83

    4 ай бұрын

    @@dheepshemare5833 changed your life 😱😱 , amazing, now get a life!!!

  • @copypaste1577
    @copypaste1577 Жыл бұрын

    Very clean & tidy. Well done

  • @manjushukla6406
    @manjushukla64062 жыл бұрын

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

  • @rishav2205

    @rishav2205

    2 жыл бұрын

    Of course, figma

  • @limecraftsproductions9442
    @limecraftsproductions94422 жыл бұрын

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

  • @creative_yudai
    @creative_yudai2 жыл бұрын

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

  • @rassur9950

    @rassur9950

    2 жыл бұрын

    Me too bro

  • @gunzithanzo
    @gunzithanzo2 жыл бұрын

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

  • @ariodiz
    @ariodiz2 жыл бұрын

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

  • @ChristianBaptiste
    @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!

  • @yeaheiamahmudhridoy4590
    @yeaheiamahmudhridoy45902 жыл бұрын

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

  • @fakhriirfan7262
    @fakhriirfan7262 Жыл бұрын

    HIS HELPED ME SO MUCH! THANK YOU!

  • @GoddessofWarr
    @GoddessofWarr2 жыл бұрын

    Awesome ! I learned a lot, thx !!

  • @wesleyfletcher7654
    @wesleyfletcher765416 күн бұрын

    Love the kemper in the background

  • @user-lo7ys5zh4q
    @user-lo7ys5zh4q Жыл бұрын

    Very helpful, thank you!

  • @Renatofsa355
    @Renatofsa3555 ай бұрын

    That's beautiful!

  • @waifufx
    @waifufx2 жыл бұрын

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

  • @spotnuru83
    @spotnuru832 жыл бұрын

    Really simple and good content

  • @jessicalopez2162
    @jessicalopez2162 Жыл бұрын

    Loved it, super enjoyed it! And I did not know anything about designing with Figma. I will let you know how it goes :)

  • @afzalmahmud1974
    @afzalmahmud19742 жыл бұрын

    35 min ago and I watched all of it 😮.wow Thank you ❤️❤️❤️

  • @ridwano.mudathir7997
    @ridwano.mudathir79972 жыл бұрын

    Thank you this was absolutely what I was looking for. Every minute was worth it.

  • @arashveysi9358
    @arashveysi9358 Жыл бұрын

    Great design dude

  • @SHIRTZY
    @SHIRTZY2 жыл бұрын

    Thanks so much!

  • @clarktolosa
    @clarktolosa2 жыл бұрын

    always love the ending LOL

  • @fireflysemanticsmedia6267
    @fireflysemanticsmedia62672 жыл бұрын

    Very Cool!!

  • @ChrisPirillo147
    @ChrisPirillo1472 жыл бұрын

    Absolutely loved this! You're the best, Gary XD

  • @carlosl-f2433
    @carlosl-f24332 жыл бұрын

    Your channel and presentation style are excellent resources. As you know I'm a new follower and want to learn from you. Thank you.

  • @dgloria
    @dgloria2 жыл бұрын

    love all your content. Recommend to everyone who wants to do design better.

  • @rasterizedvectorized
    @rasterizedvectorized Жыл бұрын

    very interesting and informative.

  • @Kriti-fv2ys
    @Kriti-fv2ys2 жыл бұрын

    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 😊

  • @abhiux360

    @abhiux360

    2 жыл бұрын

    hey , i need some help , can u help me

  • @Kriti-fv2ys

    @Kriti-fv2ys

    2 жыл бұрын

    @@abhiux360 what help ?

  • @abhiux360

    @abhiux360

    2 жыл бұрын

    @@Kriti-fv2ysCan you come on discord ? I want to talk deeply about the project u did on dashboard because i am in the same field 🙂

  • @Kriti-fv2ys

    @Kriti-fv2ys

    2 жыл бұрын

    @@abhiux360 umm sure give me your id or something

  • @abhiux360

    @abhiux360

    2 жыл бұрын

    @@Kriti-fv2ys I think Yt isnt allowing me to paste the Username here

  • @yordanostemesgen9897
    @yordanostemesgen9897 Жыл бұрын

    LOL Sick! - - feel better

  • @KenyattaGross
    @KenyattaGross2 жыл бұрын

    Thank you Sir

  • @chlbri
    @chlbri2 жыл бұрын

    So amazing

  • @cesarjuliancortesvelasquez4435
    @cesarjuliancortesvelasquez44352 жыл бұрын

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

  • @zm5856
    @zm5856 Жыл бұрын

    Thanks :)

  • @evgeniyperekhod9278
    @evgeniyperekhod92782 жыл бұрын

    Good one Gary, I think the filled chat icon is not fitting the other border based icons thou

  • @ManasaB-mk7no
    @ManasaB-mk7no Жыл бұрын

    New to Figma this side. I downloaded the Project file and opened it in Figma. When I tried to access Assets I don't see any of them. Any idea why?

  • @sjeditions
    @sjeditions10 ай бұрын

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

  • @weforcedigital
    @weforcedigital2 жыл бұрын

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

  • @DesignCourse

    @DesignCourse

    2 жыл бұрын

    Audiotechnica 4053b

  • @ibrahimoderinde3107
    @ibrahimoderinde31072 жыл бұрын

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

  • @user-oi4mb2nb2t
    @user-oi4mb2nb2t Жыл бұрын

    Thank you for your class. I'm very happy to learn some good skills from your lessons. On KZread, I am taking classes with English translation subtitles. I can't translate English well. . I would like to know if the classes on your [design-course] site have translated subtitles.

  • @prashanttyagi1032
    @prashanttyagi10322 жыл бұрын

    Hi, Why you haven't use grid system?

  • @paulsanti1542
    @paulsanti15422 жыл бұрын

    Is there a video if someone coding this dashboard? I would love to see how someone would code this in visual code studio.

  • @kasforai
    @kasforaiАй бұрын

    but then how will the graph changes when in Bubble?

  • @artprime5586
    @artprime55862 жыл бұрын

    Nice Kemper by the way...

  • @Louiyra17
    @Louiyra172 жыл бұрын

    is this possible in Adobe XD? Really like your tutorial and theory in designing

  • @Dreamwithdeby
    @Dreamwithdeby Жыл бұрын

    I can't find the assets page, help?

  • @techtipsuk
    @techtipsuk2 жыл бұрын

    I'd love to know how you got into this Gary. Are you self taught? I'd love to see some of your earlier work etc. Would be really good to know more about how you became the designer you are today.

  • @DesignCourse

    @DesignCourse

    2 жыл бұрын

    Search my channel for 1999 ;)

  • @Valentynaua
    @Valentynaua2 жыл бұрын

    I wonder why don't you use any grid system for precise alignment? The design would look consistent and accurate if you followed grid and maintained some rhythm in spacing, rather than aligning the layers by eye.

  • @hasaniqbal233

    @hasaniqbal233

    Жыл бұрын

    idk if it's just this video but these designs always seem so rushed like he's just trying to get the video out asap

  • @olenichek
    @olenichek Жыл бұрын

    Why don't you use components, auto layout and hotkeys? It looks pretty but it can be built much faster and more efficiently...

  • @flammea_
    @flammea_2 жыл бұрын

    I'm intrigued to know how the purple floating menu is supposed to translate to code. It's offset to the left of the container and I assume the inner white container where you built the UI is supposed to be the dimensions of the window. You don't expect the navigation to be cut off by the window right?

  • @ninecrowns7092

    @ninecrowns7092

    2 жыл бұрын

    It honestly makes no sense. This is just your typical Dribbble design porn with poor UX.

  • @flammea_

    @flammea_

    2 жыл бұрын

    @@ninecrowns7092 To be fair this is obviously made for beginners so I would not criticize him much. He just mentioned he had a live version of the design so I was just curious how's it adopted in real-life code

  • @xxMortanisxx

    @xxMortanisxx

    2 жыл бұрын

    No, the outer blue container is the dimensions of the window. The floating menu would be achievable with a little absolute positioning.

  • @ninecrowns7092

    @ninecrowns7092

    2 жыл бұрын

    @@xxMortanisxx So you would add a bunch of dead space (the blue container) around your actual app (the white area) only to make room for a floating menu?

  • @flammea_

    @flammea_

    2 жыл бұрын

    @@xxMortanisxx I was fearing that would be the case lol

  • @Rikimkigsck
    @Rikimkigsck4 күн бұрын

    The thing you didn't explain is why did you leave so much space?

  • @shivashojaee4050
    @shivashojaee4050 Жыл бұрын

    Thank you for your good teaching. Why didn't you use the layout grid? With this design feature, it becomes easier and better!

  • @unl0ck998
    @unl0ck9982 жыл бұрын

    The hair is free!

  • @aydemironur35
    @aydemironur35 Жыл бұрын

    Good design but man you need to adapt to auto layout, i really worried when you desinging those cards inside of rectangles with rulers :)

  • @sudhirkumar1189
    @sudhirkumar1189 Жыл бұрын

    How cam i view its html

  • @smdv9284
    @smdv92842 жыл бұрын

    Hello sir! What fonts did you use?

  • @xxMortanisxx

    @xxMortanisxx

    2 жыл бұрын

    6:04 Aileron

  • @EK_Designs
    @EK_Designs4 ай бұрын

    Anyone else have the issue where everything got deleted when you tried using the chart plugin? Control+Z isn't working, everything is gone. 😅Bummer. Oh well, it's just practice I guess.

  • @earnwell1100
    @earnwell11002 жыл бұрын

    Good

  • @azar.azar.0
    @azar.azar.0 Жыл бұрын

    I want to learn from you

  • @phutureworks2452
    @phutureworks24522 жыл бұрын

    Is it just me or does his audio and video never seem to light up? Regardless great tutorial!

  • @tomassanimbo5255
    @tomassanimbo52552 жыл бұрын

    You awesome

  • @vijitsahu2033
    @vijitsahu203310 ай бұрын

    what does "SICK Dashboard UI" means?

  • @thalesharrysson19
    @thalesharrysson192 жыл бұрын

    Rob Halford, that's you?

  • @BucurIonNiculae
    @BucurIonNiculae2 жыл бұрын

    I have another request for you. A haircut. 🤣🤣🤣

  • @DesignCourse

    @DesignCourse

    2 жыл бұрын

    Every time a person suggests a haircut, I add 1/10th inch to the eventual length. I'm at about 10ft now.

  • @danielemilazzo432
    @danielemilazzo432 Жыл бұрын

    I don't understand why build a card that way?

  • @sickboy983
    @sickboy9832 жыл бұрын

    Did you call me? Here I am 😎

  • @lei9149
    @lei9149 Жыл бұрын

    apply grids people

  • @2BluntsLater
    @2BluntsLater2 жыл бұрын

    Mine

  • @johnryder8464
    @johnryder84642 жыл бұрын

    I'm doing your online course and I have to say the mentoring aspect is not really there . I appreciate feedback that's how we learn but there is option to discuss feedback which is important. Some of the suggestions I disagree with but there is no right of reply.

  • @dettykurniawati2068
    @dettykurniawati2068 Жыл бұрын

    hahah too sNice tutorialt

  • @jhosethpereira5731
    @jhosethpereira57312 жыл бұрын

    A good tutorial with a bad practice

  • @guitarmonkeyj
    @guitarmonkeyj2 жыл бұрын

    Figma balls

  • @sonnguyenhoai8157
    @sonnguyenhoai8157 Жыл бұрын

    That will forever be a problem

  • @ninjaaljun7674
    @ninjaaljun76742 жыл бұрын

    .

  • @solomonakinbiyi
    @solomonakinbiyi2 жыл бұрын

    First to comment 🙂

  • @motech8026
    @motech80262 жыл бұрын

    Third

  • @tarnum13
    @tarnum132 жыл бұрын

    Sorry buddy but you are not a UX/UI designer, UX/UI designers should not design like you did… But you are a great Dribbble designer 😔

  • @GLuiz1982

    @GLuiz1982

    2 жыл бұрын

    Why?

  • @tarnum13

    @tarnum13

    2 жыл бұрын

    - The purple menu placement doesn’t make sense, think on a real app where will it be? The screen will cut it? - All the spaces are random, he place things just by the eye, you need to work with a system of spaces - He doesn’t use components or auto layout - He uses rectangles instead of frames - All the UI elements are random he only use them because they look nice on screen, what can you understand from the graph below? - If he would wrote “sick dashboard for Dribbble” I wouldn’t have any problems but no product company work like he does

  • @GLuiz1982

    @GLuiz1982

    2 жыл бұрын

    @@tarnum13 I see. Thank you.

  • @tarnum13

    @tarnum13

    2 жыл бұрын

    @@bobby8630 I agree with you it’s very hard to find good resources, one of the best is the book refactoring UI, the guy who wrote the book even have couple of videos kzread.info

  • @brandonj5557

    @brandonj5557

    2 жыл бұрын

    Exactly what I was thinking, programming his UI into a real application would be a nightmare

  • @sharathkumar83
    @sharathkumar834 ай бұрын

    He talks about UI design principles and puts a divider line above 75% 🙄🙄

  • @isavkov
    @isavkov Жыл бұрын

    Yes, it’s “sick”… it will make a lot of views on dribbble. But in real life this design is complete waste of time and money.

  • @pretomroy3197
    @pretomroy3197 Жыл бұрын

    Thank you sir

Келесі