Dashboard UI Design in Figma: Detailed guide on how to design a dashboard UI from scratch.
HTML-код
- Опубликовано: 6 ноя 2022
- 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.
Thank you so much for the tutorial!! Honestly im still not doing it, but gonna learning from your video soon!!!
Fantastic my brother. cleared lot of my doubts
This is awesome! Thank you. Just what I was looking for!
I am glad I could help. 😊
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 you for this. I love how you took the time to explain every bit.
You're welcome.
How amazing tutorial, keep it up bro
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.
Great video. Please I need to know the thought processes behind this design. That has been my challenge on dashboards
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
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. 🙏
Very Helpful thanks
Please FJ do more of dashboard tutorials. Especially graphs and everything dashboard. It's giving me some though time. Thank you
I didn't know how or even where to start. This is supper helpful. Thanks.
You're so welcome!
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 🤞🏽
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 dude !
You're too good. Thanks for the tutorial
You're welcome😊
awesome. Thank you
Thank you for this amazing tutorial
You’re welcome. 🙏
Very good tutorial. But please, how to have the frame with the example of logo, colours and icon...
Thanks alot bro....Your tutorial video helped a long way...
You’re very welcome 🙏
Awesome
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.
niceeee man, im waiting for de next video about tables. Thanks
Thank You. 😊
Very detailed tutorial, well done
Thank you so much 🙏
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
Sir, you just made a condensed Figma course. It's brilliante! Thank you for the content!🙇♂
Thank you so much.
best one
Can’t wait to try this 😊👏👏
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!!
Awesome! I love that.
Where can I get Frame 1137?
Thankyou❤easy to understand
Make more videos bro
You're welcome 😊
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?
Thank you
Thank God I found this.
You're very welcome.
You're good at what you do.
keep it up sir
Thank you man, I appreciate
really helpful, Thank you
Glad it was helpful!
how you got the page where you have placed avatar colors logos and all
Where can i get these icons from?
Hey , can you please give a link to this Admin portal figma which you made.. Pleasee it would be really helpful
Amazing!
Thank you! Cheers!
❤❤❤ detailed tutorial
Glad you liked it!! Thank You ❤️
where will we get the asset or the styles components?
Great video... Can i get the document you copied? Or link to download it ?
great, thanks
You’re welcome ☺️
Subscribed! Omo 9ja!
Oshey! I see you 😁
where are you get this frame with icon and other
pls, whats the purpose of the red n green button close to the enable button? just replicated mine
awesome! could you prototype it next?
Wonderful
Thank You
how did you paste the side guide. i mean the colors and icons?
Can't you provide the document?😢
is this video for beginners
how do i get the assets
what is the plugin for menu?
Where you get those colour and icon ?
how did you get the style guides?
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
Do you have tutorial about the graph and the components?
Not yet, I don’t have a tutorial on graphs yet.
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..
Plz provide frame 1137
A fan
Thank you.
How can get icons? Pleas share the practice files.
i love this tutorial, and how can i get frame 1137 ?
Frame 1138 ?
Can you please share the figma link
where i can get frame 1137 file
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
Where could we find out the assets?
where did u get the colors u assumed that everyone knows.....
Clean and Crisp. Where to get that assets @1:40 ?
Iconify or flaticon
how do we link this design to code .
can you give as this file with icon please
Could you do a tutorial on how to implement this into a published site?
Will be covering HTML, CSS and React soon. and we will definately implement these with react someday. while you can find other resource on this for now. I hope you do stick around for the dev videos.
How do I convert this to html
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 please provide the project file?
How to convert to html?
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.
where is the link for the assets?
Where is you Graph & Other component video ?
nice video next time please make a figma tutorial in black background
Okay, thank you. 👍🏽
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.