UI Design tutorial for Website Header with a Mega Menu | Interactive Components FIGMA
Вставка
- Опубліковано 10 чер 2022
- In this figma tutorial you will learn how to design a Website Navigation Header with a Mega Menu, using figma's auto layout, components and variants, interactive components, component properties, smart animate and using different interaction triggers to have it functioning perfectly.
A link to download the tutorial materials -
drive.google.com/file/d/1Vn-p... and import into figma in order to open it.
To get a better knowledge in auto layout, please check out these tutorials -
• Figma tutorial: Get st...
• Figma tutoria: Auto La...
To understand figma components and variants -
• Figma tutorial: compon... (part 1)
• Figma tutorial: compon... (part 2)
Figma component properties -
• Figma Component Proper...
Feel free to explore more tutorials for a better knowledge in interactions and animations in figma.
#yarivbe #websitedesign @figmacomponents @megamenu - Навчання та стиль
Love that he opens the translator to find the word 'even'. Wholesome. A great example of the fact that there's no need to be perfect if you're making the effort to do well. Useful video by the way. Thanks!
Thanks a lot for the great feedback Daniel! I really appreciate it 🙂 Happy you liked it - and yes - what matters is the result :) Thanks!
@@YarivBE I have question in the additional video in which you make the image shining effect with hover.
How did you manage to copy only the image to the black frame without the hover line and still make it work?
My problem is when I copy the component image into the dark frame the hover line is going with it and it is also visible on prototype playing view even outside the image.
@@danielkosztolanyi8416
Hi Daniel. Basically you need to make that you select only the image itself and the frame that holds the image which hold the hover white line as well. You can see that more clear on the layer panel. I guess that should make it work - hoping i understood your question. Let me know if not. Thanks :)
Thanks for the great tutorial. I was able to follow your explanations wonderfully. You have a calm voice and sympathetic way to explain the content. I' ve tried many videos with the same subject but none of them worked properly. Therefore, the bell is activated and the channel subscribed!
Thank you so much for this amazing feedback! ♥ It is really important for me to know and i highly appreciate it! ⚡Thanks again PW :)
Hello from Turkey. I had fun watching it. You explain it in a very understandable way. A very complex course has become quite simple thanks to you. Thank you so much for everything.
Hello Ramazan and thank you so much for this amazing feedback! I really appreciate it ⚡Happy to know that was helpful. Thanks again 🙂
Thank you so much! This was really helpful!
Love the systematic approach of first looking at websites and sort of analyzing it. Nice tutorial, thank you!
How did you manage to swap between men and woman by only moving your mouse between them on the Navbar? I always have to move my cursor out of the screen to exit men, before hovering over woman :(
Thanks a lot for the great feedback Klaus! (i hope i got the name right) I highly appreciate it 🙂⚡
@@klaus2guck2raus
Hi again :) Notice the fact that i am working here with a "Mouse enter" and not with the "While hovering" interaction which in some cases makes it a bit "tricky" and not functioning properly. Did you try to do it exacly like i do it here in the tutorial and it didnt work like mine?
Thanks for sharing your process! I learned a lot!
Thanks a lot for your great feedback! I appreciate it and means a lot 🙂⚡
to prove, that your videos are treated with respect and watched entirely I quote and agree: "yes - it was pretty long but very educational one" ;-) I learnt a lot. I activated bell next to your subscription and it is only third bell that I ever activated.
Wow - thank you so much for your amazing feedbacks! I am really happy you the tutorial teaching in a good and understandable way - thats the way i want them to be ✌ Thanks again! 💥
Well done Yariv I couldn't find any example of "Hover" Mega Menu till now. thank you so much
Thanks a lot for the great feedback Nacer! It's will appreciated 🔥 Happy to know it's helpful 🙂
Thank you so much for this learned something new Also you gotten yourself a new subscriber
Thank you so much Jack for this amazing feedback! I highly appreciate it and happy to know you subscribed for the channel as well 🙂⚡
It was so help full for me thank you Yariv BE 🥰
Thank you so much for this great feedback! I really appreciate it 🙂Happy to know it was helpful ⚡
thank you so much Yariv
Thank you so much for the feedback James! I highly appreciate it! ⚡🙂
Hi all :) Thanks to Ian for pointing it out to me - somehow i totally missed it, in min 18:33 i guess something went wrong and there are like 3 - 4 min missing there in the video.
Whats missing there is the part i check how the header looks on a page before i make it a component, and after that making the first menu part in a frame, which basically its a frame with a light gray background that contains the image component and a few demo links - as you will see when it jumps to it.
I made these 4 missing minutes video that you can download from here -
drive.google.com/file/d/1uPGmQwg8g2VuEKH9TCVzgRb4PIao3M9Q/view?usp=sharing
I hope that gives the right closure on it ⚡
Really sorry about that - i'll try to see if there is anyway to fix it. Anyway, please use the link here to download the file with the materials and than you can see exactly how its built.
It doesnt miss any critical parts as creating the components and the interactions. So no worries there :) Thanks again Ian!😊
Hi all :) Adding another small part which i guessed kind of slipped out (no idea why 🙂) form the tutorial's video - the hover effect of the image/s in the menu itself.
You can download this short video from here -
drive.google.com/file/d/17lgUxuZvFKzbmI_KTnSVyv6c1uAbn1DR/view?usp=sharing
Thanks a lot guys and many thanks for Victor which actually pointed it out :)
@@YarivBE thank you a lot for the great tutorial and also reupload the this video that i need the most , i have been struggling with this effect
@@thienang7814
You are most welcome and and thanks again for your great feedback! I appreciate it 🙂
אללללוףף! תודה רבה, באסה עם החלק שהתפספס בכל מקרה מעולה !!!
היי יוסי. תודה רבה על הפידבק! מעריך ✌ בבקשה ושים לב שיש שם תגובה שלי עם החלק שהתפספס - אז יש שם את ה 3 - 4 דקות האלו בוידאו נוסף :)
@@YarivBE אהה איזה כיף ❤️❤️ תודה
@@yosb3009
בבקשה ✨
I discovered your channel by accident. Now am addicted
Thats the best feedback i could ask for 💥 Thank you so much! I highly appreciate it ⚡
@@YarivBE no thank you to you..now I am starting to assemble components and interactive components in my design system and I dont have to look for another channel as your content is detailed and updated. I esspecially like it as it covers content that include the latest update..
@@myfeatheredfriends254
I very happy to know that my channel is useful and helping you! That is really great to know 🙂
If any help needed or any questions - feel free to ask anything. Thanks again!
OSM🤩
Thanks again for the great feedback 🙂Keep on learning - this is wonderful!
how to create that hover line on both men & womens pictures in extended bar
loved it !!!! the only think that doesnt work on my desing is the hover state on the rest of the menu items. You work here only with man and woman, which was great for my design as i also have only 2 dropdown menus but still i would like the other oprtions to hover as well even without a drop drown. For some reason they dont! propably i did something wrong...im quite new!
In general amazing video, your voice is calm and easy to follow and this was the only video i found explaining so good the Mouse enter/leave tool.
Thanks, ill be following you!
*** Maybe you can help me on that actually... so i want lets say from the woman or man icon to hover over to the another icon that you have named label, but this one doesnt have a dropdown menu, it only changes to its hover state while the dropdown menu of the man/woman closes. How could i do that?
:)
Thanks you so much Niki for the great feedback! I really appreciate it ⚡♥ Glad to know it was helpful even there were some difficulties after it with creating more options with hover - no worries - with practice all will go well! Be sure of it :)
@@nikicukier9329
Of course it can work! You can do another state of the header component itself, with the hover state of lets say, the one category after the Men & Woman - just connect it with a hover interaction, and it will work - no need fore the menu itself in this state of the header - try it and let me know how it went - if not - let me know 🙂
@@YarivBE AWESOMEEEEE !! WORKED PERFECTLY!! TODA RABA
@@nikicukier9329
Very happy to know that!! Bevakasha! 🙂✌️
i don't mind if a video is long, but it was challenging to figure out because some steps where either too fast or cut out. like the hovering on the image and the type of connection. but i know that others have pointed this out to you. i also like the fact that you are explaining the whys as appose just expecting us to copy the design.
Thank a lot for your feedback tori 🙂Yes i am aware of the fact that its a bit inconvenience with the missing parts but as you know you can download them and work with it.
Did you download the short video of the hover effect? Did you find it there?
@@YarivBE where can i find hover video
@@sogandbayesteh6562
Hi Sogand. In the first comment of this video, its mine, there you can see it :)
thanks for the vid it helps a lot repeately watching 11:25
Thanks for your great feedback Lee! I appreciate it a lot! Happy to know it is helpful 🙂
First of all, thank you for the great tutorial. I followed your steps and created a navigation bar with seven items. Additionally, I added a hover effect for the link titles in the dropdown menu. However, sometimes the text becomes scrambled during play. For example, some of the menu items meant for men appear in the kids' section instead of their intended location. I have checked the wires several times, and they are correct. If you could help me find the problem, I would really appreciate it.
Hi Behnaz and thanks a lot for the great feedback! I really appreciate it ⚡
As for the issue in you prototype - i need to see the file in order to understand better what went wrong there. By the way, if its built right and doing some weird things during prototype, it can always be also a bug in Figma as well.
Please share it to -
yariv.be1@gmail.com. I'll take a look at it and try to understand.
Hi Yariv BE. Thanks for this wonderful tutorial. I hope you channels gets lots of views cos your teaching style is super cool. There is another part of the tutorial I feel wasnt't included. That would be 25:48. The spot where there is a hover on the picture and the overlay swipes across the picture.
Hi Victor. Thank you so much for this amazing feedback! I appreciate it a lot ✌ yes, i know about that jump in the tutorial, its like 3 -4 min that i added as a separate video you can download and watch - you can find the link to it in the first comment :) Sorry about that! I have think how to make it more clear that its there. Thanks again!
@@YarivBE I am not referring to 18:33 as I have already downloaded that from your google drive. There is actually another place at 25:48. Your tutorial didn't show how you created the hover effect on the picture at 25:48.
@@akanvictor3271
Hi - you are right! Went over it again and actually i guess that part was missed out as well - i totally missed that! - i dont really understand what went on with this video - weird... No prob - i will add it as a downloadable video and let you know my friend! ✌😊
@@akanvictor3271
Hi Victor :) I put a link to download the image hover effect that was missing. Its in a reply to the first comment 🙂 Thanks again!
@@YarivBE Thanks a tone. You are the real MVP
Hi Yariv. Thank you so much. It’s awesome. Have got a question! Is there any way to blur the hero image while using this prototype? I would love to have your kind advice. 🍀
Thanks a lot for the great feedback Saman! I highly appreciate it ⚡
To your question - actually in the way that i did it in this tutorial, the header + mega menu as a standalone component, it can not effect the hero image and blur it.
Of course, in code there is no problem to do that - just making it clear.
If you do want to show that the hero image blurs as you open the menu, you can definitely do that by prototyping between screens and not within the component. That means that you create 4 screens, place on each screen a different variant and do the prototyping between the screens and not between the variants in the component (header + mega menu). In the two screens that the menu is opened - blur the hero image. So its definitely doable, just prototyping it in a different way 🙂
hi! thanks for the tutorial!! everything finally works as i wanted, i have a question - can i use one closed menubar, instead of creating a manubar for each of the options in the menu? what if i have 10 of them? it just looks cluttered and unnecessary.. i maybe wrong though! just wanted to know
Hi Alyona :) Thanks a lot for your feedback! I really appreciate it! 🙂⚡
To your question - in general it could be possible in some cases to work with one menu bar and create a different mega menu for each category - it can be tricky to when wanting to jump between them when the menu opened, that is the first consideration, the second thing is that in general, we design the behavior of it and no need to actually show each one of the categories in the prototype itself. Its enough to show 2 just to demonstrate how it should work and the interaction of it, and than you can add/design each category menu as a static design on the side of it. So again - design the interaction and the behavior and that does the job because all the rest of it (other menus) will behave exactly the same 🙂
I hope that answers your question :)
is it me, or did the video jump? At the point of adding an image into the second frame, it jumps and i missed everything from making components out of images and at what point the header plus logo was grouped with the menu dropdown... EDIT: i see from some comments at the bottom that there should be a link, but i don't see any link to recover the missing 4 mins
Hi there :)
About the missing minutes, see the first comment (mine) there is a link to download the video for it. Something went won't there with the rendering of the tutorial and i completed it.
Hope that helps. Thanks.
@@YarivBE hi thank you so much for the video first of all. However i have gone through and the only video i saw was the one for the image hover effect. if you would be so kind to reshare. that would be most appreciated, Also, if i could ask, would you be so kind as to make a short video about how to add more pages. i wanted to have 4 drop down menus, but my prototyping was really wonky and i cannot seem to prototype submenus to click over to another page from the dropdown
היי יריב! הסרטון שלך ממש עזר לי להבין את התוכנה מהבסיס, המון תודה!!
בעיה אחת שנתקלתי בה לקראת הסוף- בדקה 26:30 אני רואה שאצלך מופיעות בסרגל הימני תחת "properties" שתיי אפשרויות, אצלי מופיעה רק אחת.. מה פספסתי בדרך? (כשאני עוברת לפרוטוטייפ ומקשרת בין הlabel בתפריט המכווץ לבין התפריט המתרחב- מופיע לי בinteraction details רק property 1- expended menu).. יש לך רעיון מה יכולה להיות הבעיה?
היי שיר :) אוקיי, אכן זה קצת מבלבל - זה בגלל שנתתי את השמות לפריימים עם סלאש (/ ) אז זה בעצם יוצר properties בצורה אוטומטית.
אני מציע לך לראות את הסרטון על Component Properties, אני מניח שזה ייתן קצת יותר תובנות על העניין
ua-cam.com/video/ktji921Wq3I/v-deo.html
במידה ולא, תכתבי לי ואחדד עוד 🙂
Hey I can’t get the auto layout to expand to get the right. I keep going back and rewinding
Hi Danny. Which part are you having issues with? Can you point me? Hopefully i can give a precise answer that will help 🙂
@@YarivBE Its the part @00:11:29 . Trying to get the duplicate of the component to expand the text horizontally. right not the the text box doesnt expand
@@dannygavin9458
Hi Danny. Ok, so you need to make sure (i understood we are talking about the TAB component) that the text is in "Hug" and the indicating line of the tab is in "Fill".
The auto layout that holds them both is a vertical one, in a "Hug" mode.
I hope that makes it more clear - let me know if doesnt and if needs, you can share a link with me and i'll see whats up in your file.
could you please do one move video about dropdown menu bar like this ! my prototype doesn't work properly , i think I made some mistakes! its been 3 days to solve this problem but i cant get over it ! my men menu expended & and collapsed doesn't work properly .could you please do one more video about this ! for more clarifications.
Hi there 🙂Happy you liked the video and ii understand you into some difficulties creating that header + mega menu. Ok - sure - i will make another video only about that - hopefully in the next few days i will get back to this one and make some more cool ones :)
@@YarivBE Thank you so much mate greetings from india😍
@@AnandhakrishnanM.a
You are most welcome my friend 🙂 Thanks you for the greetings!
Thank you so much for the great tutorial! It was exactly what I was looking for and it worked almost on my first try :) There is just one thing I couldn't figure out and I think you touched on it as well in your video without noticing though (min 31:59). The animation of moving the mega menu up and down is only working when you actually close them (by the interaction mouse leave). But now let's say you open the "men menu" and just switch to the "woman menu. When you then leave the "woman menu" (by mouse leave) it closes that menu with the correct animation (move up), but when you then enter (hover over) the "men menu" again it's only a "dissolve" since you didn't actually "close" that menu (only switch it) as I understand it. Hope that's understandable, it's kinda hard to explain :D Can you think of a way to fix that? I mean it's not a big issue and I can live with it, but of course it would be even more perfect :)
Hi Lukas and thank you so much for this great feedback! I highly appreciate it 🙂🔥
To your question (i hope i understood correctly) -
In both cases it works with the same animation, no matter if i close it form the "Men" or the "Woman", or if i hover between them - it doesnt change the animation type :) There is no reason why it shouldnt work perfect in all cases :)
If you download the tutorial file, play "frame 3" and see how it behaves, unless i missed something and this is not what meant. If so, than explain to me - i want to understand. Thanks!
@@YarivBE Thank you for your answer! No I think you got it right. I downloaded your file and had a thorough look at it and it indeed does work as expected. I checked multiple times what I could have possibly done wrong, but all the parameters look the exact same to me. So I really have no clue why it's not working the same way. I just don't get the correct animation on the particular state I have mentioned. I could possibly use your file and mess around with it to kinda redo the whole thing so it fits my design. But I don't think it's worth the effort so I'll just leave it as it is :) thanks anyway!
@@user-oh9js8fb8h
You are most welcome!
By the way - consider the fact that we are demonstrating a behavior, and we dont have to make it work on all the sections - ones you showed it on one or two - its understandable and it does the job 🙂
So thats the way to look at it.
Dont hesitate to ask further if needed.
Thanks again!
Hi, when and how did you make your header+menu a component?
Hi there :)
I dont know if you mean for the few minutes missing part of the tutorial, something went wrong with the recording of it when i did it, buy there are two extra short videos at the first comment (my comment) of the tutorial.
Does that answer your question?
@@YarivBE You prepared and finished the menu like ''frame1'' until the 18th minute. I see the ''header+menu'' component in your 4-minute missing part video.What I don't understand is when you made this a component in the ''header+menu'' format.
@@user-fq1wz8xk1y
Look on around the 34th min of the tutorial - there you can see how the header + menu component was created.
Hope that helps - let me know if am missing something 🙂
Just a quick question sir. Since I don't have the option of spacing mode in the advance section of auto layout. So is there any other way to fix it?
Hi Sakshi. I guess that Figma updated since i did this tutorial, and you can find it on a small dropdown menu which appears where the "Gap between items" is. When you click on it, you will the "Auto" option.
Let me know if that helps 🙂
@@YarivBE Thank you sir, but that does not help. I did try that before, but it just auto-layouts everything and does not maintain the gap between the nav bar, logo, and other components.
@@sakshigupta99
Hi Sakshi. Ok, so i guess that i will need to see some example to understand better -
Can you share a file that demonstrates what you want achieve? Write me a comment there near the probelm you have to focus me on it.
@@YarivBE Hello, sir. What is your email address?
@@YarivBE Hello sir, Could you please share your email address with me so that I can send you the file?
Thanks for the good tutorial. But how to export this working component for HTML?
Hi Feysal. Thanks a lot for the great feedback! I appreciate it a lot ⚡
Its not possible to export this as an HTML. The idea is to demonstrate the behavior - approve it with a client / work team / developers and have them see what is exactly expected.
After making it clear with everyone involved, than it goes to development :) Hope that makes it a bit more clear?
@@YarivBE Ya that's really sad. I am using Anima to export the code in HTML. But it doesn't export working components.
@@FaysalKhalid
I guess it could have been, in some cases, great if if it could export - simple websites, landing pages, simple apps and so on. Basically, its the UX & UI approval stage, before it goes in to dev. Dont forget that in a lot of cases, the use products are much more complicated and the databases that they are are working with have a lot of scenarios. Anyway, thats the way it is for now :) and that already far more than was a few years ago...
There's a jump on the video. 18:30 - 18:31 i missed how you made the links
Hi Kim. Great that you found ithe links and thanks a lot for your feedback! I appreciate it 🙂.
Let me know if further help is needed. Thanks!
@@YarivBE hi yariz, I got lost in how you made the frame collapse on 23:42
@@kimq4549
Hi Kim :)
An auto layout holds the header and the menu together. The header itself is in absolute position which makes it float above the content of the frame (if you are not familiar with it - i have another tutorial specifically on that). The menu itself is aligned to the bottom of the auto layout, therefore, when i close the frame, make it shorter to the height of the header, it goes up. The auto layout frame that is holding both, the header and the menu, is in a clip content mope, thats why you see the part that went up (the menu).
I hope that makes it more clear a bit?
10:13 - 10:31😁❤
🤣 Yes... Kind of choked there for a sec 🤣
Big chunk of the tutorial is missing at 18:33.
Hi Ian. Thanks for pointing it out! I guess somehow i missed that. Actually its not a big chunk - its something like 3 - 4 min that i just see the how the header looks on an actual page and than i build the first menu (Men) in a frame. Really sorry i missed that, i'll see how to fix it and if possible. Thanks again!
Hi Ian. I added a link to download a short video of these missing 4 minutes. Thanks again!
@@YarivBE please where is the link to download the missing part
@@estrella4956
Hi Estre :) See the first comment - you have 2 link there - one in the comment itself and another one in the comment of the comment 🙂
Let me know you found it ✌
@@YarivBE I got it thank you so much, good work
Frustrating when important steps are cut out.
Hi there Emily. Notice my comments with completing these small missing parts that you can download a video for it. Sorry about that - something went a bit wrong with the recording and i am aware of it, but its all there.
Just take a look at my comment. Hope that help.
Thanks!