How to Design a Modern Dashboard UI in Figma - Full Course
ฝัง
- เผยแพร่เมื่อ 9 มิ.ย. 2024
- In this video, I'm going to show you how to design a modern dashboard UI in Figma step-by-step.
Try Figma for free:
bit.ly/3LiRVEF
👉 Become a UI Designer with my UI Design & Figma Mastery course:
bit.ly/43v79vX
👉 Get my FREE UI/UX Design e-book here:
bit.ly/4aVc7pR
📸 Instagram: / uiux.arash
Intro 0:00
Setting up the Project 0:24
Create a Grid 1:58
Design the Slide Menu 4:05
Dashboard Content 14:19
Design Bar Charts 15:41
Design a Line Chart 25:03
Messages Card 30:09
Design the Header 37:15
Create a Presentation 45:02
Outro 46:56
Who is Arash Ahadzadeh? Well, I'm a UI/UX designer and a university instructor with 7+ years of experience, and I teach people how to design great user interfaces and experiences. I've helped over 30,000 students become UI/UX designers from scratch worldwide.
Check out my complete UI/UX design course for beginners here for FREE:
skl.sh/2vINKxD
hey! how to get the margin distance between elements when moving objects? I don't seem to be able to replicate...thanks!
I think you're the greatest tutor, Arash! You make things seem so simple to understand, you are calm, and you explain everything so effectively. I greatly appreciate it!
Thank you very much. That's so kind of you. ☺️
I agree
Thank you for this video, it's literally a lifesaver for me. You're an excellent instructor, and you make working with Figma much less frustrating.
You are very welcome. Thank you so much for your kind words.
The quality of your videos Arash are on another level... stunning visuals and very clearly explained! Thanks!
Glad you like them!
Started learning UI design few months ago, watching your videos has made the journey much more seamless and enjoyable
Glad to hear that. Wish you all the best.
FINALLY a web design tutorial that not only uses the 12 column grid but also the 8-point rules. Thank you!!!
12 column grid doesnt matter
subbed. you're video was extremely helpful and easy to follow. thank you!
Thank you for the hand holding, Arash. This is a very good starting point to work with Figma. Although there is no advanced concept introduced like component, prototype, or variant, this tutorial nails down the basics to get your first design out.
No problem.
After your explanations, Arash, everything becomes clear and understandable! thank you sincerely and already starting to collect money for the course :)
Glad it was helpful! Hope to see you in the course soon.
Great and well explained video!
Glad you liked it! Thank you.
Hi arash, you're such a great UI designer.. amazing tutorial
N also your way of explanation is well n clear
👍👍
@1:40 This is exactly I was looking for and there seems to be no one addressing this issue. Thanks again for pointing about the grid layout for Dashboard.
Glad it helped.
Man you are a great teacher, Thanks and I appreciate it.😁😁
Thank you so much.
Nice job arash, that was great🔥
Thank you Pouya jan.
Thank you Arash, Nice job .
No problem. Thanks.
Thanks buddy got an inspiration from this !! 😃😃
My pleasure 😊
Awesome video! Always appreciate your efforts. I have 1 question, does the light grey color you used have enough contrast against the white background? thanks.
Hi. Thank you so much.
Great question. Nope, it doesn't pass the contrast ratio test and that's because I didn't create an accessible color palette for this project. I just wanted to demonstrate how to create a good layout and structure a dashboard. If it was a real-world project I would create a color palette in advance and I would check the contrast ratios to make sure it's an accessible design. I would also use Auto Layout to make everything responsive.
This video is so informative, Thank you so much for this.
Can you please upload one video about a live case study?
Thank you so much. Glad you think so. Sure.
thamks
Great work sir
Thank you.
Hey Arash, thank you for this awesome tutorial. I was wondering if you could do a tutorial on calculating grid dimensions. I tend to struggle calculating margin, gutter, and width/offset sizes based on a 1440 grid but only wanting to use a 1120 space. Like for example how did you come up with the width, gutter, and offset size from the right side? So that you can get equal 64px on both side based off usable space.
Hi Carlos, No problem.
Did you watch this video?
th-cam.com/video/gHdcAH1nhiU/w-d-xo.html
Amazing 🤩😁
Thanks.
i love this
Thank you.
You are awesome. Thank you for these great tutorials.
No problem. Thanks.
Hello Arash,thank you for this tutorial.please how do you move your items to give them correct margin and padding?
Hi Olayinka,
No problem. Just use the arrow keys on your keyboard.
Hey, what mockup did you use in the thumbnail?
Great❤
Thank you.
Thank you dear Arash it was useful
I have a question if we design responsive dashboard, left sidebar(dashboard menu) should be fix ?
No problem dear Farshid.
Yes, exactly.
great course
Thank you so much. Glad it helped.
Very insightful tutorial. Thank you so much. bUT I wonder why you didnt opt for the design to be responsive, would have saved a lot of time so to speak or am i wrong. New to this.
Thank you. That's because it wasn't the topic of this video and I didn't want to explain how Auto Layout works here since I had a dedicated tutorial on that.
Hey Arash! thank you for your video, I am unable to view the spacing numbers while moving the objects around for eg 24px from the top, I dont see the 24 on the figma interface. Am i missing something?
Hi. Thank you. Just hold down the Alt/Option key and hover your mouse over (DON'T click) your elements.
How to set the margins and padding for the card elements
I did not find the icon plugin on Figma, has the name changed?
I love your accent❤
Can we use protype in this or not
Hello Arash. I really appreciate this video, very enlightening. To add a ruler the shortcut is shift + R. I noticed when you were checking the margin on the content on the dashboard, I noticed that the readings were equal on 4 sides. how do I add such effect. Am still new. review video 11:05
Hi. No problem. To see the measurements just select an element and hold down the Alt/Option key on your keyboard while hovering over the elements around. That's it.
@@DesignWithArash Thanks a lot. It worked. You are the best.
@@abdulrahmaniliyas5691 No problem. Thank you.
At 6:55 I think you said "Alignment set to centre" by mistake right? Because it's set to centre left
Hey, what are you clicking on in or pressing in order to set margins between to different items?
Hi. Hold down the Alt/Option key on your keyboard and hover over an element.
Maybe Figma has changed since this video but I don't see where Margins and Padding can easily be set between two elements. Is it now done by adding Auto Layout and setting the Vertical Gap?
To see the margin and padding hold down the Alt/Option key on your keyboard and hover your mouse over elements.
What would you call or use this dashboard for?
Hello sir, I have a query...how to make adjustment of pixels during margining of those layers at 5:30?
Actually,Whenever I try to apply the margin between the text and ellipse, I can't identify the spacing between them according to pixel.
Hi. To see the measurements, you should hold down the Alt/Option key on your keyboard and then hover your mouse over the elements.
Great video! Thanks, can I ask why you don't use auto layout for everything?
Thank you. Because, it wasn't the main topic of this video but for a real project you should definitely use Auto Layout.
What is the key command to duplicate and move the new duplicate to the right? When I use Command+D to duplicate it just puts it over the top of the existing item and then I have to drag it :(
Once you duplicated your layer, hold down the Shift key and hit the arrow keys on your keyboard to move it around.
The plugin "iconsax" isn't available now
Yes, it's no longer available.
Hi there! just curious here, Why are u not using Auto-Layout?
Hi. Because it was not the main point of this tutorial but of course if we wanted to design a responsive project we would use Auto Layout for sure.
Arash, how do you set margin? The numbers appear on your screen in red color... Any shortcuts? I can do it only when I apply auto margin
Hold down the Alt/Option key on your keyboard and hover over your elements.
@@DesignWithArash Thank you so much!
why don't you add color in your color style option so you can easy pickup the color right, above tutorial each time you selecting the eye drop tool and selecting the color its consuming micro seconds? just pro tips, btw tutorial is very clear and super cool definitely you gain lot of subscribers soon
Thank you so much for your comment. I do use text styles and color styles for all my projects, but for this tutorial, I didn't want to show the whole process (it could get quite boring). It's always a good idea to have a style guide in place. As you said, it saves us so much time, especially while working on large-scale projects.
Nice video, but pls why don't we use auto layout when designing dashboard, because I think it would be easier to manage the spacing.
Hi Arash , what is name your icon pack? i haven't
Hi. It's Iconsax.
whats is offset pls
hi, i have a question why don't you use auto layout to make it easier?
Hi. I do but in this video I didn't want to cover the Auto Layout topic. I created a separate video about that.
Please how do you see the margins as you change them
Just hold down the Alt/Option key on your keyboard and hover your mouse over different elements.
I very need your help
Can you make a responsive real life web design project video in figma with desine system from scratch for free
Why don't you use a component set for icons?
You can make a master card component and work with it
Because not all people watching this video know about components and I didn't want to cover that topic in this video but the best way is to turn them into components as you said.
Can share figma file?
Hello sir is it for finance company or not?
Hi. Nope, it's for an e-commerce website.
34:06
NO SE ENCUENTRA EL PLUGIN ICONSAX
what is the shortcut you use for adjust the margin with the red line pop up around the logo ? @designwithArash
Just use the arrow keys on your keyboard.