Тёмный

Advanced Figma Side Menu with Submenus | Collapsible Side navigation menu (2021) 

Create Beautiful Things
Подписаться 11 тыс.
Просмотров 73 тыс.
50% 1

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.

Опубликовано:

 

20 дек 2021

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 62   
@apheli0n3
@apheli0n3 2 года назад
What a great tutorial! Many of these Figma tutorial videos on RU-vid 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!
@user-ne6ho8zg6o
@user-ne6ho8zg6o 2 года назад
Дуже тобі дякую!!!! Неймовірно та дивовижно)))) ДЯКУЮ
@MrPioneer1989
@MrPioneer1989 Год назад
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.🙏
@stephendemera370
@stephendemera370 Год назад
Thanks so much for this tutorial, so helpful
@valeriechabot9805
@valeriechabot9805 Год назад
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!
@AivaO3
@AivaO3 Год назад
Thank you so much! I love that tutorial, slow and explained well!
@CreateBeautifulThings
@CreateBeautifulThings Год назад
You are so welcome! Thanks for watching
@amname5760
@amname5760 4 месяца назад
Thank you for amazing. Need more on prototyping topics❤❤
@florbaied5871
@florbaied5871 8 месяцев назад
Use Auto layout, seriously needed. Be careful with the kind of component you make and the variants you create. Awesome tutorial. Even for 2023 👏👏
@olamidealowooja
@olamidealowooja 2 года назад
This is amazing, thanks for taking your time
@CreateBeautifulThings
@CreateBeautifulThings 2 года назад
You're welcome. Thanks for watching
@sebastianmarin9362
@sebastianmarin9362 Год назад
great tutorial! How do you make the submenu items clickable as well?
@yaelclimer8853
@yaelclimer8853 Год назад
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?
@anitasamuel4756
@anitasamuel4756 2 года назад
Very nice, thank you
@alexandermacharia6343
@alexandermacharia6343 9 месяцев назад
very great tutorial
@aleksandrakomarova7710
@aleksandrakomarova7710 2 года назад
thank you!
@anirouDS
@anirouDS Год назад
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 !
@wedocktv1688
@wedocktv1688 Месяц назад
@Create beautiful things, i am stuck at 19:56 . when I added my single menu to my small menu bar, my small menu bar was shifting to the right instead of reducing the small menu bar so that I can increase it manually
@rohanperry2707
@rohanperry2707 2 года назад
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.
@CreateBeautifulThings
@CreateBeautifulThings 2 года назад
Oh thanks for that tip. I have also now learnt something new. Thank you so much
@vanessasylvia2146
@vanessasylvia2146 Год назад
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
@kamipixeltips9416
@kamipixeltips9416 5 месяцев назад
Thanks
@simonlasky1034
@simonlasky1034 Год назад
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
@anahitarahimi1760
@anahitarahimi1760 2 месяца назад
nice!
@jabbarrefaghatjoo6897
@jabbarrefaghatjoo6897 Год назад
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
@keeevui
@keeevui 2 года назад
Great tutorial! What if we want to add more submenu items only to the instance? How can we solve this?
@CreateBeautifulThings
@CreateBeautifulThings 2 года назад
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
@honeyday9228
@honeyday9228 2 года назад
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
@elise.jones14
@elise.jones14 Год назад
i think each menu would have to be components
@lequoctrinh1105
@lequoctrinh1105 Месяц назад
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.
@harshasharma7074
@harshasharma7074 Год назад
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.
@CreateBeautifulThings
@CreateBeautifulThings Год назад
ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-KKlQ9mVXPJU.html Hope this video on working accordions helps. Thank you for watching
@epolanco11
@epolanco11 2 года назад
This was grate Can you complement that with a Dashboard and Switch betewen Pages ?
@CreateBeautifulThings
@CreateBeautifulThings Год назад
Gonna do that in a future video. Thank you
@hermaneljhonjohnes6233
@hermaneljhonjohnes6233 10 месяцев назад
Hello Can you explain How to Duplicate The Component Group at 23:34. please answer my question
@_mey2682
@_mey2682 Год назад
Is this an atomic design?
@foodaupair
@foodaupair 2 года назад
@40:00 multi accordion auto resize
@ravipadwal8338
@ravipadwal8338 Месяц назад
tutorial is awesome but audio problematic
@chimelaogu9587
@chimelaogu9587 Год назад
The main interaction was done at 33:05
@monicatorres6688
@monicatorres6688 Год назад
Great information but it is so hard to listen to the video :(
@atailooliveira
@atailooliveira Год назад
could you make the file available?
@asmanosheen-kw7pf
@asmanosheen-kw7pf Год назад
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?
@CreateBeautifulThings
@CreateBeautifulThings Год назад
Yes. Figma allows it
@asmanosheen-kw7pf
@asmanosheen-kw7pf Год назад
@@CreateBeautifulThings Can you describe how to achieve it?
@rodrigocaldentey8745
@rodrigocaldentey8745 2 года назад
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...
@CreateBeautifulThings
@CreateBeautifulThings 2 года назад
Please follow each step carefully. You must have missed a step. It won't work if you skip a step.
@sebastianmarin9362
@sebastianmarin9362 Год назад
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.
@valentinapino4457
@valentinapino4457 Год назад
@@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!
@sebastianmarin9362
@sebastianmarin9362 Год назад
@@valentinapino4457 la verdad yo lo copiaría y pegaria. No soy realmente un experto
@mrsalvatore8659
@mrsalvatore8659 10 месяцев назад
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.
@davidweyer79
@davidweyer79 2 года назад
Thank you...but your audio is super soft
@CreateBeautifulThings
@CreateBeautifulThings 2 года назад
I have improved that on my latest videos. You're welcome. Thanks for watching
@rishikeshjha1357
@rishikeshjha1357 Год назад
I did not understand how clicking the menu would push the other buttons down, doesn't work in mine that way.
@CreateBeautifulThings
@CreateBeautifulThings Год назад
Yes. That's where auto layout comes in. That's the point of this video. Thank you for watching
@rishikeshjha1357
@rishikeshjha1357 Год назад
@@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.
@CreateBeautifulThings
@CreateBeautifulThings Год назад
@@rishikeshjha1357 Glad another video helped. Yes. Am working on publishing more often. Thanks
@rishikeshjha1357
@rishikeshjha1357 Год назад
@@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
@iftekharulhaque2697
@iftekharulhaque2697 9 месяцев назад
Man you are too loud, i wish you would speak in a lower tone
@olamidealowooja
@olamidealowooja 2 года назад
This is amazing, thanks for taking your time
@CreateBeautifulThings
@CreateBeautifulThings Год назад
You're welcome. Thank you for watching
@wedocktv1688
@wedocktv1688 Месяц назад
@Create beautiful things, i am stuck at 19:56 . when I added my single menu to my small menu bar, my small menu bar was shifting to the right instead of reducing the small menu bar so that I can increase it manually
Далее
STOP doing DROPDOWNS like this - Figma variables 2023
15:35
Create a Collapsible Sidebar in Figma like a PRO!
20:40
Create a DROPDOWN MENU in Figma (Tutorial)
14:01
Просмотров 461 тыс.
How to Design a SICK Dashboard UI in Figma
35:37
Просмотров 209 тыс.
Pro Logo Designer VS Fiverr Designers 🤔
18:31
Просмотров 255 тыс.
How to Build PowerPoint Slides Like a Graphic Designer
14:04