How to Design a Modern Dashboard UI in Figma

How to Design a Modern Dashboard UI in Figma - Full Course

Рет қаралды 129,698

Күн бұрын

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/45KHoKJ
📸 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.

Пікірлер: 117

@DesignWithArash Жыл бұрын

Check out my complete UI/UX design course for beginners here for FREE: skl.sh/2vINKxD

@danhjames 11 ай бұрын

hey! how to get the margin distance between elements when moving objects? I don't seem to be able to replicate...thanks!

@OberynPinkViper Жыл бұрын

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.

@DesignWithArash 11 ай бұрын

You are very welcome. Thank you so much for your kind words.

@KonstantinaTr Жыл бұрын

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!

@DesignWithArash Жыл бұрын

Thank you very much. That's so kind of you. ☺️

@markbaker4571 9 ай бұрын

I agree

@akinolaoladotun6151 11 ай бұрын

Started learning UI design few months ago, watching your videos has made the journey much more seamless and enjoyable

@DesignWithArash 11 ай бұрын

Glad to hear that. Wish you all the best.

@MrTORISSIMO 9 ай бұрын

The quality of your videos Arash are on another level... stunning visuals and very clearly explained! Thanks!

@DesignWithArash 9 ай бұрын

Glad you like them!

@TheAlienAgency 12 күн бұрын

Step-by-step dashboard UI tutorials are so helpful, thanks for sharing.

@PipatMethavanitpong 3 ай бұрын

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.

@DesignWithArash 3 ай бұрын

No problem.

@hwa.flowery 10 ай бұрын

FINALLY a web design tutorial that not only uses the 12 column grid but also the 8-point rules. Thank you!!!

@crossxer6099 5 ай бұрын

12 column grid doesnt matter

@mianhae5073 2 ай бұрын

subbed. you're video was extremely helpful and easy to follow. thank you!

@sanasuzanska5951 7 ай бұрын

After your explanations, Arash, everything becomes clear and understandable! thank you sincerely and already starting to collect money for the course :)

@DesignWithArash 6 ай бұрын

Glad it was helpful! Hope to see you in the course soon.

@Lacybrown1999 28 күн бұрын

Thank you so much I really enjoyed your video, and it was helpful to me ❤

@laviray5447 Жыл бұрын

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

@DesignWithArash Жыл бұрын

Glad it helped.

@mojisolaotusheso8135 Жыл бұрын

Great and well explained video!

@DesignWithArash Жыл бұрын

Glad you liked it! Thank you.

@poya.3 10 ай бұрын

Nice job arash, that was great🔥

@DesignWithArash 10 ай бұрын

Thank you Pouya jan.

@adejoyeoluwadaresamuel7285 Жыл бұрын

Man you are a great teacher, Thanks and I appreciate it.😁😁

@DesignWithArash Жыл бұрын

Thank you so much.

@tahenichafei7096 3 ай бұрын

Thank you Arash, Nice job .

@DesignWithArash 2 ай бұрын

No problem. Thanks.

@ashutoshmahuli 6 ай бұрын

Thanks buddy got an inspiration from this !! 😃😃

@DesignWithArash 6 ай бұрын

My pleasure 😊

@malikamazhar267 2 ай бұрын

Hi arash, you're such a great UI designer.. amazing tutorial N also your way of explanation is well n clear 👍👍

@DesignWithArash 28 күн бұрын

Hi. That's very nice of you. Thank you.

@rahatuddin6331 Жыл бұрын

This video is so informative, Thank you so much for this. Can you please upload one video about a live case study?

@DesignWithArash Жыл бұрын

Thank you so much. Glad you think so. Sure.

@aliasghershabbir1204 Жыл бұрын

Great work sir

@DesignWithArash Жыл бұрын

Thank you.

@user-td2df1gi6r Жыл бұрын

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.

@DesignWithArash Жыл бұрын

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.

@demotivate3880 Жыл бұрын

Amazing 🤩😁

@DesignWithArash Жыл бұрын

Thanks.

@carlosmed_ Жыл бұрын

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.

@DesignWithArash Жыл бұрын

Hi Carlos, No problem. Did you watch this video? kzfaq.info/get/bejne/na6UlqR5ltTMmYk.html

@STARK50 Жыл бұрын

Hey, what mockup did you use in the thumbnail?

@_legendarylegend Жыл бұрын

i love this

@DesignWithArash Жыл бұрын

Thank you.

@olayinkaajayi4313 Жыл бұрын

Hello Arash,thank you for this tutorial.please how do you move your items to give them correct margin and padding?

@DesignWithArash Жыл бұрын

Hi Olayinka, No problem. Just use the arrow keys on your keyboard.

@DesignDen673 Жыл бұрын

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?

@DesignWithArash Жыл бұрын

Hi. Thank you. Just hold down the Alt/Option key and hover your mouse over (DON'T click) your elements.

@shivamoeini1920 Жыл бұрын

You are awesome. Thank you for these great tutorials.

@DesignWithArash Жыл бұрын

No problem. Thanks.

@ZZ-cl5so Жыл бұрын

Great❤

@DesignWithArash Жыл бұрын

Thank you.

@davidjatau5198 Ай бұрын

thamks

@DesignWithArash 28 күн бұрын

No problem.

@ashleshvikhe2698 7 ай бұрын

great course

@DesignWithArash 7 ай бұрын

Thank you so much. Glad it helped.

@farshadamirshoghi9323 Жыл бұрын

Thank you dear Arash it was useful I have a question if we design responsive dashboard, left sidebar(dashboard menu) should be fix ?

@DesignWithArash Жыл бұрын

No problem dear Farshid. Yes, exactly.

@shahabsadiq950 5 күн бұрын

how you see the value of padding ? is there any shortkey?

@user-ze9jg6xg9w Жыл бұрын

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.

@DesignWithArash Жыл бұрын

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.

@versavids_28_06 5 ай бұрын

I did not find the icon plugin on Figma, has the name changed?

@aishwaryaorchid 2 ай бұрын

How to set the margins and padding for the card elements

@paidinfull3 11 ай бұрын

Hey, what are you clicking on in or pressing in order to set margins between to different items?

@DesignWithArash 11 ай бұрын

Hi. Hold down the Alt/Option key on your keyboard and hover over an element.

@emeraldezy9675 29 күн бұрын

You teach so well. Well done. How do you set the margin between elements? What shortcut key are you using?

@DesignWithArash 28 күн бұрын

Thank you so much. To check the padding, you can hold down the Alt/Option key on your keyboard and hover your mouse over elements. To move elements around just use the arrow keys.

@swagatikarout8227 22 күн бұрын

Hay can you tell be what kind of dash board is it ? Is it some kind of online shopping site.

@Culturelens 14 күн бұрын

How do you preview this. Not for social media now. But to check your work in preview because everything appears ugly and not concise when i go into the preview window

@pratikpradhan6758 4 ай бұрын

I love your accent❤

@manvitejwani3072 6 ай бұрын

Can we use protype in this or not

@abdulrahmaniliyas5691 Жыл бұрын

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

@DesignWithArash Жыл бұрын

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.

@abdulrahmaniliyas5691 Жыл бұрын

@@DesignWithArash Thanks a lot. It worked. You are the best.

@DesignWithArash Жыл бұрын

@@abdulrahmaniliyas5691 No problem. Thank you.

@RitikBharmoria Жыл бұрын

Hello sir, I have a query...how to make adjustment of pixels during margining of those layers at 5:30?

@RitikBharmoria Жыл бұрын

Actually,Whenever I try to apply the margin between the text and ellipse, I can't identify the spacing between them according to pixel.

@DesignWithArash Жыл бұрын

Hi. To see the measurements, you should hold down the Alt/Option key on your keyboard and then hover your mouse over the elements.

@ChaosBarnaby Жыл бұрын

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 :(

@DesignWithArash Жыл бұрын

Once you duplicated your layer, hold down the Shift key and hit the arrow keys on your keyboard to move it around.

@DonProshetsky 3 ай бұрын

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?

@DesignWithArash 3 ай бұрын

To see the margin and padding hold down the Alt/Option key on your keyboard and hover your mouse over elements.

@mahmoudrezamohammadnejad8286 Жыл бұрын

Hi Arash , what is name your icon pack? i haven't

@DesignWithArash Жыл бұрын

Hi. It's Iconsax.

@rudabanasir890 6 ай бұрын

At 6:55 I think you said "Alignment set to centre" by mistake right? Because it's set to centre left

@vishnuramachandran4801 Жыл бұрын

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

@DesignWithArash Жыл бұрын

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.

@dariaderiagina2192 Жыл бұрын

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

@DesignWithArash Жыл бұрын

Hold down the Alt/Option key on your keyboard and hover over your elements.

@dariaderiagina2192 Жыл бұрын

@@DesignWithArash Thank you so much!

@mohiuddinshihab2199 5 ай бұрын

The plugin "iconsax" isn't available now

@DesignWithArash 4 ай бұрын

Yes, it's no longer available.

@user-mn4bx9vp7f 10 ай бұрын

Please how do you see the margins as you change them

@DesignWithArash 10 ай бұрын

Just hold down the Alt/Option key on your keyboard and hover your mouse over different elements.

@chicomalo5336 Жыл бұрын

Hi there! just curious here, Why are u not using Auto-Layout?

@DesignWithArash Жыл бұрын

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.

@davegarcia2525 8 ай бұрын

hi, i have a question why don't you use auto layout to make it easier?

@DesignWithArash 8 ай бұрын

Hi. I do but in this video I didn't want to cover the Auto Layout topic. I created a separate video about that.

@gsaaaaaaaaaa Жыл бұрын

Why don't you use a component set for icons? You can make a master card component and work with it

@DesignWithArash Жыл бұрын

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.