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

[@DesignWithArash]

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

[@danhjames]

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

[@aesthetixstudio]

@@danhjames Select the element whose distance you want to measure, then hold the Alt key on the keyboard and try moving your mouse cursor

[@hwa.flowery]

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

[@crossxer6099]

12 column grid doesnt matter

[@PipatMethavanitpong]

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]

No problem.

[@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]

I agree

[@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]

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

[@akinolaoladotun6151]

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

[@DesignWithArash]

Glad to hear that. Wish you all the best.

[@MeherSaigol]

Great tutorial! Thanks, Arash!

[@TheAlienAgency]

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

[@MrTORISSIMO]

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

[@DesignWithArash]

Glad you like them!

[@sanasuzanska5951]

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

[@DesignWithArash]

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

[@charvithdkslvSUPRA86gtgtxGTR]

thankyou so much for sharing very detailed video

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

[@malikzulfqar5330]

Love & Respect

[@poya.3]

Nice job arash, that was great🔥

[@DesignWithArash]

Thank you Pouya jan.

[@mianhae5073]

subbed. you're video was extremely helpful and easy to follow. 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.

[@Lacybrown1999]

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

[@mojisolaotusheso8135]

Great and well explained video!

[@DesignWithArash]

Glad you liked it! Thank you.

[@adejoyeoluwadaresamuel7285]

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

[@DesignWithArash]

Thank you so much.

[@اياتسلامه-ك5ع]

You are a great teacher

[@michaelonyekachi4005]

Thank you Arash💌💌

[@tahenichafei7096]

Thank you Arash, Nice job .

[@DesignWithArash]

No problem. Thanks.

[@ashutoshmahuli]

Thanks buddy got an inspiration from this !! 😃😃

[@DesignWithArash]

My pleasure 😊

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

[@ashleshvikhe2698]

great course

[@DesignWithArash]

Thank you so much. Glad it helped.

[@pratikpradhan6758]

I love your accent❤

[@eduardoolmedo3939]

Thanks a lot for the tutorial, it's great!!. I am lost on how do you do to see the pixels. For example at 11:04 when I select the frame I don't see the pixels. I presume you are pressing some key in the keyboard to allow you to do that. Can you specify which one?. Thanks a lot for the tutorial is very helpful.

[@aliasghershabbir1204]

Great work sir

[@DesignWithArash]

Thank you.

[@emeraldezy]

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.

[@Culturelens]

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

[@imeuboh7739]

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.

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

[@_legendarylegend]

i love this

[@DesignWithArash]

Thank you.

[@paidinfull3]

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

[@DesignWithArash]

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

[@davegarcia2525]

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

[@DesignWithArash]

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

[@demotivate3880]

Amazing 🤩😁

[@DesignWithArash]

Thanks.

[@swagatikarout8227]

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

[@mohiuddinshihab2199]

The plugin "iconsax" isn't available now

[@DesignWithArash]

Yes, it's no longer available.

[@funkeomoogun]

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]

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.

[@DonProshetsky]

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]

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

[@mansionfeeling4134]

How do I get access to the community files for the project

[@ZZ-cl5so]

Great❤

[@DesignWithArash]

Thank you.

[@rudabanasir890]

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

[@STARK50]

Hey, what mockup did you use in the thumbnail?

[@michaelonyekachi4005]

Please how did you swap the icon for Expenses card?

[@SafaeMouhallebi]

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.

[@shahabsadiq950]

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

[@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? kzbin.info/www/bejne/nXnHlHR-ZtObn7c

[@shivamoeini1920]

You are awesome. Thank you for these great tutorials.

[@DesignWithArash]

No problem. Thanks.

[@LightYear-i5n]

Please how do you see the margins as you change them

[@DesignWithArash]

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

[@versavids_28_06]

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

[@bamjaantailors]

thamks

[@DesignWithArash]

No problem.

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

[@AbhinavOfficial-b3g]

We need subscription in figma ???

[@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!

[@haroldkumarnaik9971]

can i connect this dashboard to excel ?

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

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

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

[@manvitejwani3072]

Can we use protype in this or not

[@Raiseituppoker]

What would you call or use this dashboard for?

[@aishwaryaorchid]

How to set the margins and padding for the card elements

[@aytajash]

Hello sir is it for finance company or not?

[@DesignWithArash]

Hi. Nope, it's for an e-commerce website.

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

[@arianyazdani-v3x]

❤❤

[@Conn458]

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

[@DesignWithArash]

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

[@ChayonShaahOfficial]

Can you make a responsive real life web design project video in figma with desine system from scratch for free

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

[@mahmoudrezamohammadnejad8286]

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

[@DesignWithArash]

Hi. It's Iconsax.

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

[@ubinullas6268]

how to get the plugins

[@magn8]

Video 8 done - 23/09

[@01Oddone]

whats is offset pls

[@crafthouse_24]

link of iconsax 6000 plugin

[@robinsbluebird8981]

Can share figma file?

[@HardikArya-je2ry]

I very need your help

[@leadkerala]

34:06

[@axelhunger]

NO SE ENCUENTRA EL PLUGIN ICONSAX

[@DavidChandra]

why does it look easy when you do it...? 🤣

[@rendyyl]

what is the shortcut you use for adjust the margin with the red line pop up around the logo ? @designwithArash

[@DesignWithArash]

Just use the arrow keys on your keyboard.