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

  Рет қаралды 154,971

DesignWithArash

DesignWithArash

Күн бұрын

Пікірлер: 133
@DesignWithArash
@DesignWithArash Жыл бұрын
Check out my complete UI/UX design course for beginners here for FREE: skl.sh/2vINKxD
@danhjames
@danhjames Жыл бұрын
hey! how to get the margin distance between elements when moving objects? I don't seem to be able to replicate...thanks!
@aesthetixstudio
@aesthetixstudio 11 күн бұрын
@@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
@hwa.flowery Жыл бұрын
FINALLY a web design tutorial that not only uses the 12 column grid but also the 8-point rules. Thank you!!!
@crossxer6099
@crossxer6099 8 ай бұрын
12 column grid doesnt matter
@PipatMethavanitpong
@PipatMethavanitpong 7 ай бұрын
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
@DesignWithArash 7 ай бұрын
No problem.
@KonstantinaTr
@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
@DesignWithArash Жыл бұрын
Thank you very much. That's so kind of you. ☺️
@markbaker4571
@markbaker4571 Жыл бұрын
I agree
@OberynPinkViper
@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
@DesignWithArash Жыл бұрын
You are very welcome. Thank you so much for your kind words.
@akinolaoladotun6151
@akinolaoladotun6151 Жыл бұрын
Started learning UI design few months ago, watching your videos has made the journey much more seamless and enjoyable
@DesignWithArash
@DesignWithArash Жыл бұрын
Glad to hear that. Wish you all the best.
@MeherSaigol
@MeherSaigol 12 күн бұрын
Great tutorial! Thanks, Arash!
@TheAlienAgency
@TheAlienAgency 3 ай бұрын
Step-by-step dashboard UI tutorials are so helpful, thanks for sharing.
@MrTORISSIMO
@MrTORISSIMO Жыл бұрын
The quality of your videos Arash are on another level... stunning visuals and very clearly explained! Thanks!
@DesignWithArash
@DesignWithArash Жыл бұрын
Glad you like them!
@sanasuzanska5951
@sanasuzanska5951 10 ай бұрын
After your explanations, Arash, everything becomes clear and understandable! thank you sincerely and already starting to collect money for the course :)
@DesignWithArash
@DesignWithArash 10 ай бұрын
Glad it was helpful! Hope to see you in the course soon.
@charvithdkslvSUPRA86gtgtxGTR
@charvithdkslvSUPRA86gtgtxGTR 5 күн бұрын
thankyou so much for sharing very detailed video
@laviray5447
@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
@DesignWithArash Жыл бұрын
Glad it helped.
@malikzulfqar5330
@malikzulfqar5330 9 күн бұрын
Love & Respect
@poya.3
@poya.3 Жыл бұрын
Nice job arash, that was great🔥
@DesignWithArash
@DesignWithArash Жыл бұрын
Thank you Pouya jan.
@mianhae5073
@mianhae5073 5 ай бұрын
subbed. you're video was extremely helpful and easy to follow. thank you!
@malikamazhar267
@malikamazhar267 5 ай бұрын
Hi arash, you're such a great UI designer.. amazing tutorial N also your way of explanation is well n clear 👍👍
@DesignWithArash
@DesignWithArash 4 ай бұрын
Hi. That's very nice of you. Thank you.
@Lacybrown1999
@Lacybrown1999 4 ай бұрын
Thank you so much I really enjoyed your video, and it was helpful to me ❤
@mojisolaotusheso8135
@mojisolaotusheso8135 Жыл бұрын
Great and well explained video!
@DesignWithArash
@DesignWithArash Жыл бұрын
Glad you liked it! Thank you.
@adejoyeoluwadaresamuel7285
@adejoyeoluwadaresamuel7285 Жыл бұрын
Man you are a great teacher, Thanks and I appreciate it.😁😁
@DesignWithArash
@DesignWithArash Жыл бұрын
Thank you so much.
@اياتسلامه-ك5ع
@اياتسلامه-ك5ع Ай бұрын
You are a great teacher
@michaelonyekachi4005
@michaelonyekachi4005 Ай бұрын
Thank you Arash💌💌
@tahenichafei7096
@tahenichafei7096 6 ай бұрын
Thank you Arash, Nice job .
@DesignWithArash
@DesignWithArash 6 ай бұрын
No problem. Thanks.
@ashutoshmahuli
@ashutoshmahuli 10 ай бұрын
Thanks buddy got an inspiration from this !! 😃😃
@DesignWithArash
@DesignWithArash 10 ай бұрын
My pleasure 😊
@rahatuddin6331
@rahatuddin6331 Жыл бұрын
This video is so informative, Thank you so much for this. Can you please upload one video about a live case study?
@DesignWithArash
@DesignWithArash Жыл бұрын
Thank you so much. Glad you think so. Sure.
@ashleshvikhe2698
@ashleshvikhe2698 11 ай бұрын
great course
@DesignWithArash
@DesignWithArash 10 ай бұрын
Thank you so much. Glad it helped.
@pratikpradhan6758
@pratikpradhan6758 7 ай бұрын
I love your accent❤
@eduardoolmedo3939
@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
@aliasghershabbir1204 Жыл бұрын
Great work sir
@DesignWithArash
@DesignWithArash Жыл бұрын
Thank you.
@emeraldezy
@emeraldezy 4 ай бұрын
You teach so well. Well done. How do you set the margin between elements? What shortcut key are you using?
@DesignWithArash
@DesignWithArash 4 ай бұрын
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
@Culturelens 3 ай бұрын
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
@imeuboh7739 8 ай бұрын
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
@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
@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
@_legendarylegend Жыл бұрын
i love this
@DesignWithArash
@DesignWithArash Жыл бұрын
Thank you.
@paidinfull3
@paidinfull3 Жыл бұрын
Hey, what are you clicking on in or pressing in order to set margins between to different items?
@DesignWithArash
@DesignWithArash Жыл бұрын
Hi. Hold down the Alt/Option key on your keyboard and hover over an element.
@davegarcia2525
@davegarcia2525 11 ай бұрын
hi, i have a question why don't you use auto layout to make it easier?
@DesignWithArash
@DesignWithArash 11 ай бұрын
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
@demotivate3880 Жыл бұрын
Amazing 🤩😁
@DesignWithArash
@DesignWithArash Жыл бұрын
Thanks.
@swagatikarout8227
@swagatikarout8227 4 ай бұрын
Hay can you tell be what kind of dash board is it ? Is it some kind of online shopping site.
@mohiuddinshihab2199
@mohiuddinshihab2199 8 ай бұрын
The plugin "iconsax" isn't available now
@DesignWithArash
@DesignWithArash 8 ай бұрын
Yes, it's no longer available.
@funkeomoogun
@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
@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
@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
@DesignWithArash Жыл бұрын
Hi. Thank you. Just hold down the Alt/Option key and hover your mouse over (DON'T click) your elements.
@DonProshetsky
@DonProshetsky 7 ай бұрын
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
@DesignWithArash 7 ай бұрын
To see the margin and padding hold down the Alt/Option key on your keyboard and hover your mouse over elements.
@mansionfeeling4134
@mansionfeeling4134 8 күн бұрын
How do I get access to the community files for the project
@ZZ-cl5so
@ZZ-cl5so Жыл бұрын
Great❤
@DesignWithArash
@DesignWithArash Жыл бұрын
Thank you.
@rudabanasir890
@rudabanasir890 9 ай бұрын
At 6:55 I think you said "Alignment set to centre" by mistake right? Because it's set to centre left
@STARK50
@STARK50 Жыл бұрын
Hey, what mockup did you use in the thumbnail?
@michaelonyekachi4005
@michaelonyekachi4005 Ай бұрын
Please how did you swap the icon for Expenses card?
@SafaeMouhallebi
@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
@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
@shahabsadiq950 3 ай бұрын
how you see the value of padding ? is there any shortkey?
@carlosmed_
@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
@DesignWithArash Жыл бұрын
Hi Carlos, No problem. Did you watch this video? kzbin.info/www/bejne/nXnHlHR-ZtObn7c
@shivamoeini1920
@shivamoeini1920 Жыл бұрын
You are awesome. Thank you for these great tutorials.
@DesignWithArash
@DesignWithArash Жыл бұрын
No problem. Thanks.
@LightYear-i5n
@LightYear-i5n Жыл бұрын
Please how do you see the margins as you change them
@DesignWithArash
@DesignWithArash Жыл бұрын
Just hold down the Alt/Option key on your keyboard and hover your mouse over different elements.
@versavids_28_06
@versavids_28_06 8 ай бұрын
I did not find the icon plugin on Figma, has the name changed?
@bamjaantailors
@bamjaantailors 5 ай бұрын
thamks
@DesignWithArash
@DesignWithArash 4 ай бұрын
No problem.
@farshadamirshoghi9323
@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
@DesignWithArash Жыл бұрын
No problem dear Farshid. Yes, exactly.
@AbhinavOfficial-b3g
@AbhinavOfficial-b3g Күн бұрын
We need subscription in figma ???
@dariaderiagina2192
@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
@DesignWithArash Жыл бұрын
Hold down the Alt/Option key on your keyboard and hover over your elements.
@dariaderiagina2192
@dariaderiagina2192 Жыл бұрын
@@DesignWithArash Thank you so much!
@haroldkumarnaik9971
@haroldkumarnaik9971 18 сағат бұрын
can i connect this dashboard to excel ?
@olayinkaajayi4313
@olayinkaajayi4313 Жыл бұрын
Hello Arash,thank you for this tutorial.please how do you move your items to give them correct margin and padding?
@DesignWithArash
@DesignWithArash Жыл бұрын
Hi Olayinka, No problem. Just use the arrow keys on your keyboard.
@chicomalo5336
@chicomalo5336 Жыл бұрын
Hi there! just curious here, Why are u not using Auto-Layout?
@DesignWithArash
@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
@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
@DesignWithArash Жыл бұрын
Once you duplicated your layer, hold down the Shift key and hit the arrow keys on your keyboard to move it around.
@manvitejwani3072
@manvitejwani3072 9 ай бұрын
Can we use protype in this or not
@Raiseituppoker
@Raiseituppoker 7 ай бұрын
What would you call or use this dashboard for?
@aishwaryaorchid
@aishwaryaorchid 5 ай бұрын
How to set the margins and padding for the card elements
@aytajash
@aytajash Жыл бұрын
Hello sir is it for finance company or not?
@DesignWithArash
@DesignWithArash Жыл бұрын
Hi. Nope, it's for an e-commerce website.
@RitikBharmoria
@RitikBharmoria Жыл бұрын
Hello sir, I have a query...how to make adjustment of pixels during margining of those layers at 5:30?
@RitikBharmoria
@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
@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
@arianyazdani-v3x Ай бұрын
❤❤
@Conn458
@Conn458 Жыл бұрын
Great video! Thanks, can I ask why you don't use auto layout for everything?
@DesignWithArash
@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
@ChayonShaahOfficial 5 ай бұрын
Can you make a responsive real life web design project video in figma with desine system from scratch for free
@abdulrahmaniliyas5691
@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
@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
@abdulrahmaniliyas5691 Жыл бұрын
@@DesignWithArash Thanks a lot. It worked. You are the best.
@DesignWithArash
@DesignWithArash Жыл бұрын
@@abdulrahmaniliyas5691 No problem. Thank you.
@mahmoudrezamohammadnejad8286
@mahmoudrezamohammadnejad8286 Жыл бұрын
Hi Arash , what is name your icon pack? i haven't
@DesignWithArash
@DesignWithArash Жыл бұрын
Hi. It's Iconsax.
@gsaaaaaaaaaa
@gsaaaaaaaaaa Жыл бұрын
Why don't you use a component set for icons? You can make a master card component and work with it
@DesignWithArash
@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
@ubinullas6268 Ай бұрын
how to get the plugins
@magn8
@magn8 Ай бұрын
Video 8 done - 23/09
@01Oddone
@01Oddone Жыл бұрын
whats is offset pls
@crafthouse_24
@crafthouse_24 26 күн бұрын
link of iconsax 6000 plugin
@robinsbluebird8981
@robinsbluebird8981 Жыл бұрын
Can share figma file?
@HardikArya-je2ry
@HardikArya-je2ry Жыл бұрын
I very need your help
@leadkerala
@leadkerala Жыл бұрын
34:06
@axelhunger
@axelhunger 6 ай бұрын
NO SE ENCUENTRA EL PLUGIN ICONSAX
@DavidChandra
@DavidChandra Ай бұрын
why does it look easy when you do it...? 🤣
@rendyyl
@rendyyl Жыл бұрын
what is the shortcut you use for adjust the margin with the red line pop up around the logo ? @designwithArash
@DesignWithArash
@DesignWithArash Жыл бұрын
Just use the arrow keys on your keyboard.
Apple's Website Animation in Figma | Beginner Tutorial
4:57
DesignWithArash
Рет қаралды 85 М.
Free Figma Crash Course for Beginners 2024 | UI/UX Design
1:01:20
DesignWithArash
Рет қаралды 716 М.
Não sabe esconder Comida
00:20
DUDU e CAROL
Рет қаралды 57 МЛН
the balloon deflated while it was flying #tiktok
00:19
Анастасия Тарасова
Рет қаралды 34 МЛН
When mom gets home, but you're in rollerblades.
00:40
Daniel LaBelle
Рет қаралды 104 МЛН
krpano 1.22 - ThreeJS Plugin for 3D Graphics
2:47
krpanoVideos
Рет қаралды 9
How to Design a SICK Dashboard UI in Figma
35:37
DesignCourse
Рет қаралды 237 М.
Figma Tutorial: Use Figma Variables Like a Pro (+ Practice File)
30:30
DesignWithArash
Рет қаралды 328 М.
How I make UI color palettes
8:51
UX Tools
Рет қаралды 427 М.
Amateur vs Pro UI Design | with examples
20:46
Jesse Showalter
Рет қаралды 146 М.
12 Dashboard design tips for better data visualization
9:51
Geckoboard
Рет қаралды 191 М.
6 UI Hacks I Wish I Knew As A Beginner
11:11
Tim Gabe
Рет қаралды 836 М.
Não sabe esconder Comida
00:20
DUDU e CAROL
Рет қаралды 57 МЛН