Advanced Figma Side Menu with Submenus | Collapsible Side navigation menu (2021)
HTML-код
- Опубликовано: 20 дек 2021
- In this video i will show you step by step how to design and create a working figma side menu bar or sidebar menu in other terms with drop downs or submenus. Watch and learn. It's easy
The sidemenu design will include an accordion like design for its submenu dropdowns animation. It will also be able to expand and compress. There is going to be alot of use of the figma autolayout feature and also the concept of components and variants all through this mega tutorial. It's going to be a collapsible side navigation menu format.
There have been various tutorials on the figma sidebar navigation menu but there havent been any that talk about design, creation, animation and accordion menu dropdowns all in one video. We are also going to learn about icon swapping feature which will simplify our work process.
What a great tutorial!
Many of these Figma tutorial videos on RUclips explain from a level that a novice (like me) has a hard time following. This was thorough and explained in a way that even a newby could understand.
Thank you!
Thanks for slowing things down for us newbs! Most videos are way to fast and are there to make the creators of the video look good. Yours was actually super useful. Thanks a bunch!
Really superb 🔥 you cleared my most of the doubts on where and when to create and use autolayout, components, variants
hat's off keep making more and more videos.🙏
Дуже тобі дякую!!!! Неймовірно та дивовижно)))) ДЯКУЮ
Thanks so much for this tutorial, so helpful
Thank you for amazing. Need more on prototyping topics❤❤
Very nice tutorial, thank you.
What if I have different subtitles for each category (for example under Widgets and Analytics)? How do you edit that?
Thank you so much! I love that tutorial, slow and explained well!
You are so welcome! Thanks for watching
great tutorial!
How do you make the submenu items clickable as well?
very great tutorial
Use Auto layout, seriously needed. Be careful with the kind of component you make and the variants you create. Awesome tutorial. Even for 2023 👏👏
Hi!
Great video, but i have a question: how do you make a hover variant to those categories?
When you put the mouse over the category "widgets" you have any Hover variant before click de dropdown.
I'm making my own submenu in figma, and i don't know how to do that hover variant in my category. :/
Hope to help me.
Thanks from Chile !
thank you!
This is amazing, thanks for taking your time
You're welcome. Thank you for watching
Very nice, thank you
Thanks
nice!
Hello, Brother! Your videos are wonderful... they're understandable and easy to follow
May I ask you question? Can I still use this side menu while switching to another different page? Thank you, Brotherr
i think each menu would have to be components
I am stuck in minute 40.24 where we replace the widget to the various variants, the variant I'm trying to replace with has a longer text hence it overlaps on the dropdown icon and I cannot seem to adjust the spacing between the text and the icon,how do I go about this
Nice tutorials but you really have to do something about your sound. i always watch your videos and i have notice all your videos have sound problems
Great tutorial! What if we want to add more submenu items only to the instance? How can we solve this?
Oh for that, I would create separate submenu components instead of using one. The one in this example assumes 3 items are in submenu. But you can make a different separate submenu component for each. Thanks for watching. Glad it helped
hello, have a nice day, I'm having a problem at minute 19:17 when I press frame selection > add auto layout it can't display " = " like you but it displays the vertical model as follows " || |. Frame1 " Can you give me a solution or a video to fix this error, thank you very much, have a good day.
Great tutorial.
However, still req. guidance to rectify the following issue of accordian menus poping out instead of dropdown. So it's working like cards/files been picked out of stack and again when click to close it get backs to stack.
ruclips.net/video/KKlQ9mVXPJU/видео.html
Hope this video on working accordions helps. Thank you for watching
This is super cool, I have a wordpress website, i always use plugin in my website because I don't have experience in html, css, javascript, does anyone know how can I add this beautiful side menu to my website
When u r replacing ur icons, instead of copying over it then delete the one being replaced just select the one u want to copy then right click & select copy, then select the one to be replaced & right click it &say replace. It works more accurate that way.
Oh thanks for that tip. I have also now learnt something new. Thank you so much
Hello Can you explain How to Duplicate The Component Group at 23:34. please answer my question
This was grate Can you complement that with a Dashboard and Switch betewen Pages ?
Gonna do that in a future video. Thank you
Is this an atomic design?
Does Figma allow me to go further after opening sub-menu of analytics , I want to select sub-menu item 4 and move to another page?
Yes. Figma allows it
@@CreateBeautifulThings Can you describe how to achieve it?
Good video...I can't get it to move the other menu items down, they stay fixed!...what's the trick? I don't know what I'm doing wrong...I'm from Argentina, English is hard for me...
Please follow each step carefully. You must have missed a step. It won't work if you skip a step.
Espero que hayas resuelto el problema, a mí me pasaba lo mismo y lo solucioné seleccionando todos los items del menu y agrupándolos con AutoLayout.
@@sebastianmarin9362 Hola sebastián, disculpa que te escriba por acá. Tu sabes cómo duplicar el menú en diferentes páginas creando un componente? Necesito ingresar el menú en bastantes páginas y no sé como replicarlo sin copiar y pegar el contendo. Muchas gracias!
@@valentinapino4457 la verdad yo lo copiaría y pegaria. No soy realmente un experto
You seem unsure of what you are doing.
It is also very sluggish ,almost repeating one sentence over and over again.
It makes watching quite boring, but in all, you did your best.
Thank you very much for your time.
Great information but it is so hard to listen to the video :(
could you make the file available?
@40:00 multi accordion auto resize
The main interaction was done at 33:05
I did not understand how clicking the menu would push the other buttons down, doesn't work in mine that way.
Yes. That's where auto layout comes in. That's the point of this video. Thank you for watching
@@CreateBeautifulThings Thanks for the video, but I was still having problems. Your video on "ACCORDION" helped me solve it. Keep up the good work and publish more often. Wish you good luck my friend.
@@rishikeshjha1357 Glad another video helped. Yes. Am working on publishing more often. Thanks
@@CreateBeautifulThings A suggestion, make the keyboard shortcuts appear on screen/video when you edit it. I did not know that holding on "alt" makes a copy. It will also make the video more interactive and engaging. Thanks again
Thank you...but your audio is super soft
I have improved that on my latest videos. You're welcome. Thanks for watching
Man you are too loud, i wish you would speak in a lower tone
This is amazing, thanks for taking your time
You're welcome. Thanks for watching