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!
@YarivBE
Жыл бұрын
Thanks a lot for the great feedback Daniel! I really appreciate it 🙂 Happy you liked it - and yes - what matters is the result :) Thanks!
@danielkosztolanyi8416
Жыл бұрын
@@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.
@YarivBE
Жыл бұрын
@@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 :)
@naceryous9227
11 ай бұрын
Well done Yariv I couldn't find any example of "Hover" Mega Menu till now. thank you so much
@YarivBE
11 ай бұрын
Thanks a lot for the great feedback Nacer! It's will appreciated 🔥 Happy to know it's helpful 🙂
@klaus2guck2raus
Жыл бұрын
Love the systematic approach of first looking at websites and sort of analyzing it. Nice tutorial, thank you!
@klaus2guck2raus
Жыл бұрын
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 :(
@YarivBE
Жыл бұрын
Thanks a lot for the great feedback Klaus! (i hope i got the name right) I highly appreciate it 🙂⚡
@YarivBE
Жыл бұрын
@@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?
@myfeatheredfriends254
2 жыл бұрын
I discovered your channel by accident. Now am addicted
@YarivBE
2 жыл бұрын
Thats the best feedback i could ask for 💥 Thank you so much! I highly appreciate it ⚡
@myfeatheredfriends254
2 жыл бұрын
@@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..
@YarivBE
2 жыл бұрын
@@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!
@ramazanguler6066
Жыл бұрын
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.
@YarivBE
Жыл бұрын
Hello Ramazan and thank you so much for this amazing feedback! I really appreciate it ⚡Happy to know that was helpful. Thanks again 🙂
@phil_creative
Жыл бұрын
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!
@YarivBE
Жыл бұрын
Thank you so much for this amazing feedback! ♥ It is really important for me to know and i highly appreciate it! ⚡Thanks again PW :)
@yosb3009
2 жыл бұрын
אללללוףף! תודה רבה, באסה עם החלק שהתפספס בכל מקרה מעולה !!!
@YarivBE
2 жыл бұрын
היי יוסי. תודה רבה על הפידבק! מעריך ✌ בבקשה ושים לב שיש שם תגובה שלי עם החלק שהתפספס - אז יש שם את ה 3 - 4 דקות האלו בוידאו נוסף :)
@yosb3009
2 жыл бұрын
@@YarivBE אהה איזה כיף ❤️❤️ תודה
@YarivBE
2 жыл бұрын
@@yosb3009 בבקשה ✨
@mateuszb4387
2 жыл бұрын
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.
@YarivBE
2 жыл бұрын
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! 💥
@YarivBE
2 жыл бұрын
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!😊
@YarivBE
2 жыл бұрын
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 :)
@thienang7814
Жыл бұрын
@@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
@YarivBE
Жыл бұрын
@@thienang7814 You are most welcome and and thanks again for your great feedback! I appreciate it 🙂
@SaiArts2000
Жыл бұрын
OSM🤩
@YarivBE
Жыл бұрын
Thanks again for the great feedback 🙂Keep on learning - this is wonderful!
@camillestarr9109
6 ай бұрын
Thank you so much! This was really helpful!
@j4ckfl4ash33
Жыл бұрын
Thank you so much for this learned something new Also you gotten yourself a new subscriber
@YarivBE
Жыл бұрын
Thank you so much Jack for this amazing feedback! I highly appreciate it and happy to know you subscribed for the channel as well 🙂⚡
@theoryfound
Жыл бұрын
Thanks for sharing your process! I learned a lot!
@YarivBE
Жыл бұрын
Thanks a lot for your great feedback! I appreciate it and means a lot 🙂⚡
@tori2040
Жыл бұрын
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.
@YarivBE
Жыл бұрын
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?
@sogandbayesteh6562
Жыл бұрын
@@YarivBE where can i find hover video
@YarivBE
Жыл бұрын
@@sogandbayesteh6562 Hi Sogand. In the first comment of this video, its mine, there you can see it :)
@user-tq2or4vm3p
Жыл бұрын
It was so help full for me thank you Yariv BE 🥰
@YarivBE
Жыл бұрын
Thank you so much for this great feedback! I really appreciate it 🙂Happy to know it was helpful ⚡
@kimq4549
Жыл бұрын
There's a jump on the video. 18:30 - 18:31 i missed how you made the links
@YarivBE
Жыл бұрын
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!
@kimq4549
Жыл бұрын
@@YarivBE hi yariz, I got lost in how you made the frame collapse on 23:42
@YarivBE
Жыл бұрын
@@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?
@yj4105
Жыл бұрын
thanks for the vid it helps a lot repeately watching 11:25
@YarivBE
Жыл бұрын
Thanks for your great feedback Lee! I appreciate it a lot! Happy to know it is helpful 🙂
@nikicukier9329
Жыл бұрын
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!
@nikicukier9329
Жыл бұрын
*** 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? :)
@YarivBE
Жыл бұрын
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 :)
@YarivBE
Жыл бұрын
@@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 🙂
@nikicukier9329
Жыл бұрын
@@YarivBE AWESOMEEEEE !! WORKED PERFECTLY!! TODA RABA
@YarivBE
Жыл бұрын
@@nikicukier9329 Very happy to know that!! Bevakasha! 🙂✌️
@jamesjola5086
Жыл бұрын
thank you so much Yariv
@YarivBE
Жыл бұрын
Thank you so much for the feedback James! I highly appreciate it! ⚡🙂
@Ibibiofame
3 ай бұрын
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
@YarivBE
3 ай бұрын
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.
@Ibibiofame
3 ай бұрын
@@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
@akanvictor3271
2 жыл бұрын
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.
@YarivBE
2 жыл бұрын
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!
@akanvictor3271
2 жыл бұрын
@@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.
@YarivBE
2 жыл бұрын
@@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! ✌😊
@YarivBE
2 жыл бұрын
@@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!
@akanvictor3271
2 жыл бұрын
@@YarivBE Thanks a tone. You are the real MVP
@dannygavin9458
Жыл бұрын
Hey I can’t get the auto layout to expand to get the right. I keep going back and rewinding
@YarivBE
Жыл бұрын
Hi Danny. Which part are you having issues with? Can you point me? Hopefully i can give a precise answer that will help 🙂
@dannygavin9458
Жыл бұрын
@@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
@YarivBE
Жыл бұрын
@@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.
@behnazshayan7318
Жыл бұрын
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.
@YarivBE
Жыл бұрын
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.
@AnandhakrishnanM.a
Жыл бұрын
how to create that hover line on both men & womens pictures in extended bar
@sakshigupta99
2 ай бұрын
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?
@YarivBE
2 ай бұрын
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 🙂
@sakshigupta99
2 ай бұрын
@@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.
@YarivBE
2 ай бұрын
@@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.
@sakshigupta99
2 ай бұрын
@@YarivBE Hello, sir. What is your email address?
@sakshigupta99
2 ай бұрын
@@YarivBE Hello sir, Could you please share your email address with me so that I can send you the file?
@user-fq1wz8xk1y
6 ай бұрын
Hi, when and how did you make your header+menu a component?
@YarivBE
6 ай бұрын
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?
@user-fq1wz8xk1y
6 ай бұрын
@@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.
@YarivBE
6 ай бұрын
@@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 🙂
@samankhamooshi1834
Жыл бұрын
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. 🍀
@YarivBE
Жыл бұрын
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 🙂
@AlyonaShangina
Жыл бұрын
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
@YarivBE
Жыл бұрын
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 :)
@welling1
2 жыл бұрын
Big chunk of the tutorial is missing at 18:33.
@YarivBE
2 жыл бұрын
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!
@YarivBE
2 жыл бұрын
Hi Ian. I added a link to download a short video of these missing 4 minutes. Thanks again!
@estrella4956
Жыл бұрын
@@YarivBE please where is the link to download the missing part
@YarivBE
Жыл бұрын
@@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 ✌
@estrella4956
Жыл бұрын
@@YarivBE I got it thank you so much, good work
@AnandhakrishnanM.a
Жыл бұрын
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.
@YarivBE
Жыл бұрын
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 :)
@AnandhakrishnanM.a
Жыл бұрын
@@YarivBE Thank you so much mate greetings from india😍
@YarivBE
Жыл бұрын
@@AnandhakrishnanM.a You are most welcome my friend 🙂 Thanks you for the greetings!
@skateboarding3007
5 ай бұрын
10:13 - 10:31😁❤
@YarivBE
5 ай бұрын
🤣 Yes... Kind of choked there for a sec 🤣
@shirdaraby77
Жыл бұрын
היי יריב! הסרטון שלך ממש עזר לי להבין את התוכנה מהבסיס, המון תודה!! בעיה אחת שנתקלתי בה לקראת הסוף- בדקה 26:30 אני רואה שאצלך מופיעות בסרגל הימני תחת "properties" שתיי אפשרויות, אצלי מופיעה רק אחת.. מה פספסתי בדרך? (כשאני עוברת לפרוטוטייפ ומקשרת בין הlabel בתפריט המכווץ לבין התפריט המתרחב- מופיע לי בinteraction details רק property 1- expended menu).. יש לך רעיון מה יכולה להיות הבעיה?
@YarivBE
Жыл бұрын
היי שיר :) אוקיי, אכן זה קצת מבלבל - זה בגלל שנתתי את השמות לפריימים עם סלאש (/ ) אז זה בעצם יוצר properties בצורה אוטומטית. אני מציע לך לראות את הסרטון על Component Properties, אני מניח שזה ייתן קצת יותר תובנות על העניין kzitem.info/news/bejne/zKqgz21oaomiZn4 במידה ולא, תכתבי לי ואחדד עוד 🙂
@user-oh9js8fb8h
11 ай бұрын
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 :)
@YarivBE
11 ай бұрын
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!
@user-oh9js8fb8h
11 ай бұрын
@@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!
@YarivBE
11 ай бұрын
@@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!
@FaysalKhalid
Жыл бұрын
Thanks for the good tutorial. But how to export this working component for HTML?
@YarivBE
Жыл бұрын
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?
@FaysalKhalid
Жыл бұрын
@@YarivBE Ya that's really sad. I am using Anima to export the code in HTML. But it doesn't export working components.
@YarivBE
Жыл бұрын
@@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...
@emilyvadal939
Жыл бұрын
Frustrating when important steps are cut out.
@YarivBE
Жыл бұрын
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!
Пікірлер: 112