Dashboard UI Design in Figma: Detailed guide on how to design a dashboard UI from scratch.
ฝัง
- เผยแพร่เมื่อ 20 ส.ค. 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.
Sir, you just made a condensed Figma course. It's brilliante! Thank you for the content!🙇♂
Thank you so much.
I didn't know how or even where to start. This is supper helpful. Thanks.
You're so welcome!
I love this tutorial! Just did mine. Thank you so much, very good pace and tips (:
You’re welcome, I appreciate your kind words. 🥹🙏
Couldn't believe I watched the tutorial from start to finish. Nice one 👍. Thanks for this
Glad it helped!
I followed your tutorial today and i was able to come up with a design as well.
Thank you
You’re welcome. 🙏
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.
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.
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!
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
This is awesome! Thank you. Just what I was looking for!
I am glad I could help. 😊
Please FJ do more of dashboard tutorials. Especially graphs and everything dashboard. It's giving me some though time. Thank you
Fantastic my brother. cleared lot of my doubts
You're too good. Thanks for the tutorial
You're welcome😊
Can’t wait to try this 😊👏👏
Thank You 😊 🙏
Thank you
Thank God I found this.
You're very welcome.
Can't you provide the document?😢
Wonderful
Thank You
Great video. Please I need to know the thought processes behind this design. That has been my challenge on dashboards
niceeee man, im waiting for de next video about tables. Thanks
Thank You. 😊
How amazing tutorial, keep it up bro
Very detailed tutorial, well done
Thank you so much 🙏
Thank you for this amazing tutorial
You’re welcome. 🙏
Thanks alot bro....Your tutorial video helped a long way...
You’re very welcome 🙏
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!!
Thankyou❤easy to understand
Make more videos bro
You're welcome 😊
Subscribed! Omo 9ja!
Oshey! I see you 😁
❤❤❤ detailed tutorial
Glad you liked it!! Thank You ❤️
Thank you for the tutorial .please tell me about icon plugins and others
Very good tutorial. But please, how to have the frame with the example of logo, colours and icon...
awesome. Thank you
You're welcome!
where will we get the asset or the styles components?
really helpful, Thank you
Glad it was helpful!
Clean and Crisp. Where to get that assets @1:40 ?
Iconify or flaticon
where did u get the colors u assumed that everyone knows.....
Amazing!
Thank you! Cheers!
Great video... Can i get the document you copied? Or link to download it ?
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
where are you get this frame with icon and other
Awesome! I love that.
Where can I get Frame 1137?
Awesome
Thank you dude !
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
awesome! could you prototype it next?
Do you have tutorial about the graph and the components?
Not yet, I don’t have a tutorial on graphs yet.
I need the videos that explain the designs of the graphs and cards, the remaining part that was not explained
good evening sir. pls how did you come up with side guide. the color, icon,
Where can i get these icons from?
best one
Thank you
great, thanks
You’re welcome ☺️
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 a tutorial on creating the asset panel
Not at the moment, but thats something i would work on in future
Okay
Thank you
how do i get the assets
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
hi, im not getting the spacing mode you mentioned at 25:24 ..that option doesnt appear in my advanced layout
i love this tutorial, and how can i get frame 1137 ?
Frame 1138 ?
nice video next time please make a figma tutorial in black background
Okay, thank you. 👍🏽
pls, whats the purpose of the red n green button close to the enable button? just replicated mine
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?
Can you provide the source of the icons?
can you give as this file with icon please
Hey , can you please give a link to this Admin portal figma which you made.. Pleasee it would be really helpful
can you please provide the project file?
where i can get frame 1137 file
Please shared your icon, colour, avatar, etc. sir
Where is you Graph & Other component video ?
how did you paste the side guide. i mean the colors and icons?
A fan
Thank you.
Let me dive in.
I hope it’s helpful 😊🙏
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..
Can you please share the figma link
how you got the page where you have placed avatar colors logos and all
How can get icons? Pleas share the practice files.
Where you get those colour and icon ?
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.
what is the plugin for menu?
Where could we find out the assets?
How to convert to html?
how did you get the style guides?
where is the link for the assets?
how do we link this design to code .
is this video for beginners
How do I convert this to html
Plz provide frame 1137
Whats the purpose of the tutorial, if you don't provide icons, colors?
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.