Dashboard UI Design in Figma: Detailed guide on how to design a dashboard UI from scratch.
Vložit
- čas přidán 6. 09. 2024
- learn how to design admin dashboards from scratch with Figma. this will be a series where we will be learning how to design components of an admin dashboard, including side menus, graphs, charts, tables, button and lots more.
I didn't know how or even where to start. This is supper helpful. Thanks.
You're so welcome!
Sir, you just made a condensed Figma course. It's brilliante! Thank you for the content!🙇♂
Thank you so much.
Couldn't believe I watched the tutorial from start to finish. Nice one 👍. Thanks for this
Glad it helped!
I love this tutorial! Just did mine. Thank you so much, very good pace and tips (:
You’re welcome, I appreciate your kind words. 🥹🙏
Thank for wonderful tutorial about dashboard .its so much helpul for ui/ux designers .wants more tutorial .
Glad it was helpful! Sure, I will try and do more videos like that.
Thank you brother . learned somrthing new , which confused to learn
Glad to hear that
I followed your tutorial today and i was able to come up with a design as well.
Thank you
You’re welcome. 🙏
thanks so much for this tutorial, i found it at the exact time that i am working on a dashboard project
..pls create more dashboard design videos...
Thank you 😊
Thank you. I learnt the importance of creating components. Please do the part 2 of this video.
You’re welcome, let’s keep our fingers crossed for tomorrow 🤞🏽
Thank you so much for the tutorial!! Honestly im still not doing it, but gonna learning from your video soon!!!
You can do it!
I hope you drop the video for the graph and the other components soon. I enjoyed this one thoroughly, can't wait to put it into practice.
Thank you. I’m glad you found it helpful 🥺🙏. Don’t worry you won’t have to wait for long.
Thank you for this. I love how you took the time to explain every bit.
You're welcome.
You're good at what you do.
keep it up sir
Thank you man, I appreciate
Please FJ do more of dashboard tutorials. Especially graphs and everything dashboard. It's giving me some though time. Thank you
Hello, thanks for your tutorial, help me a lot. Another thing i have doubt is how to create a form with multiple elements, input text, input select with functional dropdown and make with it responsive. Can you show us how you will do make it? Thank you!!
This is awesome! Thank you. Just what I was looking for!
I am glad I could help. 😊
Thank you for the tutorial .please tell me about icon plugins and others
You're too good. Thanks for the tutorial
You're welcome😊
Thank you
Thank God I found this.
You're very welcome.
great tutorial but please and please help us also by telling us where you see these icons we are following and you are leading if a tutorial is as long as this and we are just adding our own icons it wont make sense so please
Great video. Please I need to know the thought processes behind this design. That has been my challenge on dashboards
Wonderful
Thank You
Very good tutorial. But please, how to have the frame with the example of logo, colours and icon...
Fantastic my brother. cleared lot of my doubts
niceeee man, im waiting for de next video about tables. Thanks
Thank You. 😊
very interesting
I think so too!😊
Thankyou❤easy to understand
Make more videos bro
You're welcome 😊
Thank you for this amazing tutorial
You’re welcome. 🙏
How amazing tutorial, keep it up bro
Thanks alot bro....Your tutorial video helped a long way...
You’re very welcome 🙏
Very detailed tutorial, well done
Thank you so much 🙏
❤❤❤ detailed tutorial
Glad you liked it!! Thank You ❤️
Great video... Can i get the document you copied? Or link to download it ?
Can't you provide the document?😢
good evening sir. pls how did you come up with side guide. the color, icon,
awesome. Thank you
You're welcome!
Thank you so much for this tutorial, please where did you get you icons from, I can’t seem to find those exact ones on figma
Subscribed! Omo 9ja!
Oshey! I see you 😁
really helpful, Thank you
Glad it was helpful!
Can’t wait to try this 😊👏👏
Thank You 😊 🙏
Awesome! I love that.
Where can I get Frame 1137?
This helped me thank you . Is it okay to increase the width if there's no space to fill my contents
Thanks, yes it is totally okay
@@femijohn Noted thank you. Sorry please if I may ask which plugins did you get your icon
I need the videos that explain the designs of the graphs and cards, the remaining part that was not explained
where are you get this frame with icon and other
hi, im not getting the spacing mode you mentioned at 25:24 ..that option doesnt appear in my advanced layout
where will we get the asset or the styles components?
Awesome
Amazing!
Thank you! Cheers!
Clean and Crisp. Where to get that assets @1:40 ?
Iconify or flaticon
pls, whats the purpose of the red n green button close to the enable button? just replicated mine
Where can i get these icons from?
hello i want to ask, why you use a frame inside frame? still confused about that, because i usually work with only shape to build a card or something like side bar and navbar. thank you
Can you please share the figma link
how did you paste the side guide. i mean the colors and icons?
pls i should know this thing...i had created 4 dropdown list in menu bar . if i open that 4 menu bar means all should open ..But i need if 1 one menu bar open means another should automatically close...Pls give solution to me
To do this u you’ll need to create your drop downs like an accordion. Your can watch my accordions video to achieve that. Thank you
Do you have tutorial about the graph and the components?
Not yet, I don’t have a tutorial on graphs yet.
i love this tutorial, and how can i get frame 1137 ?
Frame 1138 ?
where did u get the colors u assumed that everyone knows.....
Please shared your icon, colour, avatar, etc. sir
Hey , can you please give a link to this Admin portal figma which you made.. Pleasee it would be really helpful
Thank you dude !
awesome! could you prototype it next?
great, thanks
You’re welcome ☺️
how you got the page where you have placed avatar colors logos and all
Hi i tried the icon component, but when i try changing my icon to card, it shows icon in filled form instead of outlined. What could be the problem?
how do i get the assets
best one
Thank you
Do you have a tutorial on creating the asset panel
Not at the moment, but thats something i would work on in future
Okay
Thank you
can you give as this file with icon please
Where is you Graph & Other component video ?
How can get icons? Pleas share the practice files.
can you please provide the project file?
Why am I juat seeing this.
I have two challenges though, maybe one:
When I prortotyped the drop-down it wemt well, but it was spilling over other items on the menu. Please help.
I've cracked it. You make use of auto layout a lot.
Also, why do you design using frames? Is there a particular benefit? Is it a best practice?
@@israelebiti8143auto layout helps with responsiveness, I guess.
can you provide me this file link
what is the plugin for menu?
how did you get the style guides?
nice video next time please make a figma tutorial in black background
Okay, thank you. 👍🏽
Can you provide the source of the icons?
Hello boss, is it possible to create a prototype for a component using instance swap?
Hello Timi, I don’t really understand your question.
I use the instance swap, Boolean on a component and it worked but when i use figma mirror on my phone... The instances are not working on the components..
how do we link this design to code .
A fan
Thank you.
Where could we find out the assets?
Whats the purpose of the tutorial, if you don't provide icons, colors?
is this video for beginners
How to convert to html?
where is the link for the assets?
How do I convert this to html
Plz provide frame 1137
Let me dive in.
I hope it’s helpful 😊🙏
Hi, Thank you to share such a wonderful tutorial. I did complete this tutorial myself but I am facing a problem during drop-down sub menu. When I add arrow icon in the master menu component then it add in all side bar component which you adjust by Boolean property set to false and and set tru where it needs. But when I switch off that arrow from the master component it destroyed all my component in the side bar. Can you send me your email plz so that I will be able to share my figma screen to trap my error.
Please send me your email id I want to share my work and error with you.
I totally understand your challenge. It’s an easy fix. Your arrow icon vector is usually contained in a frame. If it’s not right click on it and click on frame selection. Then the Boolean is set on the main vector shape that’s in an icon frame. So that the frame remains when you switch on and off it’s Boolean property
You can find my contact on about section of the channel, if you need further help. thefemijohn@gmail.com
@@femijohn Thank you very much for your response I'll contact you tomorrow after following your guidelines.
where i can get frame 1137 file
Where you get those colour and icon ?