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

Подписаться 118 тыс.

Просмотров 123 тыс.

50% 1

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.

Опубликовано:

26 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 113

@DesignWithArash Год назад

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

@danhjames 10 месяцев назад

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

@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 8 месяцев назад

I agree

@OberynPinkViper 11 месяцев назад

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 10 месяцев назад

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

@akinolaoladotun6151 11 месяцев назад

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

@DesignWithArash 10 месяцев назад

Glad to hear that. Wish you all the best.

@MrTORISSIMO 8 месяцев назад

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

@DesignWithArash 8 месяцев назад

Glad you like them!

@hwa.flowery 9 месяцев назад

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

@crossxer6099 4 месяца назад

12 column grid doesnt matter

@PipatMethavanitpong 2 месяца назад

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 2 месяца назад

No problem.

@mianhae5073 Месяц назад

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

@mojisolaotusheso8135 Год назад

Great and well explained video!

@DesignWithArash Год назад

Glad you liked it! Thank you.

@sanasuzanska5951 6 месяцев назад

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

@DesignWithArash 5 месяцев назад

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

@laviray5447 11 месяцев назад

@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 11 месяцев назад

Glad it helped.

@poya.3 9 месяцев назад

Nice job arash, that was great🔥

@DesignWithArash 9 месяцев назад

Thank you Pouya jan.

@Lacybrown1999 День назад

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

@adejoyeoluwadaresamuel7285 Год назад

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

@DesignWithArash Год назад

Thank you so much.

@tahenichafei7096 2 месяца назад

Thank you Arash, Nice job .

@DesignWithArash Месяц назад

No problem. Thanks.

@ashutoshmahuli 6 месяцев назад

Thanks buddy got an inspiration from this !! 😃😃

@DesignWithArash 5 месяцев назад

My pleasure 😊

@aliasghershabbir1204 Год назад

Great work sir

@DesignWithArash Год назад

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.

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

@_legendarylegend Год назад

i love this

@DesignWithArash Год назад

Thank you.

@malikamazhar267 Месяц назад

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

@DesignWithArash День назад

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

@shivamoeini1920 Год назад

You are awesome. Thank you for these great tutorials.

@DesignWithArash Год назад

No problem. Thanks.

@carlosmed_ 11 месяцев назад

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 11 месяцев назад

Hi Carlos, No problem. Did you watch this video? ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-gHdcAH1nhiU.html

@STARK50 Год назад

Hey, what mockup did you use in the thumbnail?

@ZZ-cl5so Год назад

Great❤

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

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

@ashleshvikhe2698 6 месяцев назад

great course

@DesignWithArash 6 месяцев назад

Thank you so much. Glad it helped.

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

@DesignDen673 11 месяцев назад

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 11 месяцев назад

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

@emeraldezy9675 2 дня назад

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

@DesignWithArash День назад

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.

@pratikpradhan6758 3 месяца назад

I love your accent❤

@davidjatau5198 29 дней назад

thamks

@DesignWithArash День назад

No problem.

@manvitejwani3072 5 месяцев назад

Can we use protype in this or not

@versavids_28_06 4 месяца назад

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

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

@paidinfull3 10 месяцев назад

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

@DesignWithArash 10 месяцев назад

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

@aishwaryaorchid Месяц назад

How to set the margins and padding for the card elements

@rudabanasir890 5 месяцев назад

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.

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

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

@mohiuddinshihab2199 4 месяца назад

The plugin "iconsax" isn't available now

@DesignWithArash 4 месяца назад

Yes, it's no longer available.

@DonProshetsky 2 месяца назад

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 2 месяца назад

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.

@davegarcia2525 7 месяцев назад

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

@DesignWithArash 7 месяцев назад

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

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

@spillingtheluxebeans 3 месяца назад

What would you call or use this dashboard for?

@imeuboh7739 4 месяца назад

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.

@01Oddone 10 месяцев назад

whats is offset pls

@dariaderiagina2192 11 месяцев назад

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 11 месяцев назад

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

@dariaderiagina2192 11 месяцев назад

@@DesignWithArash Thank you so much!

@user-mn4bx9vp7f 9 месяцев назад

Please how do you see the margins as you change them

@DesignWithArash 9 месяцев назад

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

@HardikArya-je2ry Год назад

I very need your help

@Conn458 10 месяцев назад

Great video! Thanks, can I ask why you don't use auto layout for everything?

@DesignWithArash 10 месяцев назад

Thank you. Because, it wasn't the main topic of this video but for a real project you should definitely use Auto Layout.

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