🔥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.
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!
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!
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.
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 😊
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!
Thank you for your class. I'm very happy to learn some good skills from your lessons. On UA-cam, 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.
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.
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 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 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?
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.
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.
- 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
@@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 ua-cam.com/users/SteveSchoger
Jon Frok will be coming back soon.
Took a screenshot so you could not refrain from bringing it back
LET'S GO.
Let's go. Great guy.
Yay! 👌
🔥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.
wow this was exactly what i thought of when he did that...glad to know that someone else thought of this too
Dude that tip for the spacing has changed my life for the better!
@@dheepshemare5833 changed your life 😱😱 , amazing, now get a life!!!
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!
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!
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.
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 😊
hey , i need some help , can u help me
@@abhiux360 what help ?
@@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 🙂
@@abhiux360 umm sure give me your id or something
@@Kriti-fv2ys I think Yt isnt allowing me to paste the Username here
Looking good! I think you should use autolayout frames instead of circles and rectangles as backgrounds for cards and buttons.
One of my favourite topics : "Dashboard" and you covered it way too beautifully ! ❤️
Of course, figma
learned tons of small elements from a single video thanks
Awesome video man, need it this so bad, I’m doing my first dashboard ever, this video helped me a lot 💯
Me too bro
designing a dashboard always frightening for me! you break it down nicely Garry, thanks!!
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!
Your channel and presentation style are excellent resources. As you know I'm a new follower and want to learn from you. Thank you.
hi Simon this is amazing learn a lot the designs through out the video. love it
Love the kemper in the background
Ooh God, thank you gary this what I've been looking for
Very clean & tidy. Well done
HIS HELPED ME SO MUCH! THANK YOU!
That's beautiful!
Loved it, super enjoyed it! And I did not know anything about designing with Figma. I will let you know how it goes :)
Thank you this was absolutely what I was looking for. Every minute was worth it.
Great design dude
Awesome ! I learned a lot, thx !!
35 min ago and I watched all of it 😮.wow Thank you ❤️❤️❤️
thank you so mucvh because of you I learned Figma today
Absolutely loved this! You're the best, Gary XD
Very helpful, thank you!
Why using so small working area comparing to the screen size? Is there any practical reasons for this approach?
Wow... I love the design, please can you let us know the mic you use
Audiotechnica 4053b
LOL Sick! - -
feel better
love all your content. Recommend to everyone who wants to do design better.
Thank you Sir I have always wanted to know how it is done especially anytime I see inspiration online
Really simple and good content
very interesting and informative.
hey!! can i recreate this dashboard design and use it in my portfolio?
Interesting, please, can you tell me about preview (play) option, specifically scroll vertical options, max height, fix position sidebar, thanks
Thanks so much!
Thank you for your class. I'm very happy to learn some good skills from your lessons. On UA-cam, 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.
Very Cool!!
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?
@DesignCourse you said you were gonna add this tutorial to your course right with little touches hope you’re gonna do that or not??
always love the ending LOL
but then how will the graph changes when in Bubble?
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.
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
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?
It honestly makes no sense. This is just your typical Dribbble design porn with poor UX.
@@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
No, the outer blue container is the dimensions of the window. The floating menu would be achievable with a little absolute positioning.
@@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?
@@xxMortanisxx I was fearing that would be the case lol
Good one Gary, I think the filled chat icon is not fitting the other border based icons thou
Nice Kemper by the way...
Hi, Why you haven't use grid system?
Why don't you use components, auto layout and hotkeys? It looks pretty but it can be built much faster and more efficiently...
I can't find the assets page, help?
Thanks :)
Thank you Sir
Is there a video if someone coding this dashboard? I would love to see how someone would code this in visual code studio.
The thing you didn't explain is why did you leave so much space?
Thank you for your good teaching. Why didn't you use the layout grid? With this design feature, it becomes easier and better!
So amazing
is this possible in Adobe XD? Really like your tutorial and theory in designing
Hello sir! What fonts did you use?
6:04 Aileron
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.
Search my channel for 1999 ;)
How cam i view its html
The hair is free!
Good design but man you need to adapt to auto layout, i really worried when you desinging those cards inside of rectangles with rulers :)
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.
what does "SICK Dashboard UI" means?
I want to learn from you
I have another request for you. A haircut. 🤣🤣🤣
Every time a person suggests a haircut, I add 1/10th inch to the eventual length. I'm at about 10ft now.
Rob Halford, that's you?
Is it just me or does his audio and video never seem to light up? Regardless great tutorial!
I don't understand why build a card that way?
Did you call me? Here I am 😎
You awesome
apply grids people
Good
32:20
hahah too sNice tutorialt
Mine
A good tutorial with a bad practice
Figma balls
First to comment 🙂
Please design without torturing the programmers :}}}
That will forever be a problem
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 😔
Why?
- 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
@@tarnum13 I see. Thank you.
@@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
ua-cam.com/users/SteveSchoger
Exactly what I was thinking, programming his UI into a real application would be a nightmare
He talks about UI design principles and puts a divider line above 75% 🙄🙄
Third
.
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.
Thank you sir