Hamburger Menu Items as ANCHORS - Is THIS Possible in Figma? (Click to Scroll Down)
Вставка
- Опубліковано 7 вер 2024
- In this video we’re going to try and set hamburger menu items as links to anchors on one, single, long page in Figma. Is this possible? We’re going to find out.
Hamburger menu tutorial I’m mentioning: • Create a Functional HA...
Download the prototype ($1.99): payhip.com/b/O...
Visit my STORE: bit.ly/mavi-de...
Explore Mavi Design COURSES : bit.ly/mavi-de...
Download FIGMA for FREE: bit.ly/get-sta...
Take FULL advantage of ALL FIGMA's features: bit.ly/figma-p...
In this video, I'll attempt to upgrade a functional hamburger menu prototype in Figma by connecting individual menu items to anchors on a single page. Is it possible to turn menu items into links that smoothly navigate users to specific sections of your design, enhancing your prototype's user experience and making your designs more engaging? We're about to find out! We'll explore Figma's prototyping features to see if we can create seamless navigation within a single page layout.
This tutorial is perfect for designers of all skill levels who are curious about pushing the boundaries of Figma and experimenting with new techniques.
how to set up anchors in figma - click menu items to scroll down in figma - mobile hamburger menu items as anchors
--------
© 2023 Mavi Design
There seems to be a solution to the "menu not closing after clicking" problem: you have to set the scroll interaction on "Mouse down" on the INSTANCE level and then go to the "header" component where you set "Mouse up" to change to the "closed" variant on all the section buttons. Also, for some reason the scroll interaction is not working when you set the "Animate" type. You need to select "Instant". Also important to set the component state change interaction on the component level (not the instance level).
Big thanks to Jono Young for suggesting this solution!
I did not quite understand this, is it possible to do a short video to address the solution please?
@@Sabrina-uh7fr I know its a late response, but here is what works for me...for each individual section, add the interaction "mouse down" -> "change to" -> "Property 1: closed" -> "instant"
You saved my presentation for tomorrow! Thank you soooooooooooooo much!
Thank you very much! This is exactly what I need! Awesome tutorial
You could try making the section buttons in the component instance Ali’s lead back to the closed menu like the x button does
I'm so grateful for this video!!! I was annoyed all day by no function... This is just no video about this on slavic youtube. And also thanks me for knowing english anyway
You addressed the problem I was having (with the component section not being able to link to the individual elements on the page), but my issue is how to combine an effect (ex changing colour text when clicking) WITH the single page anchor links....having a very hard time with this
Very nice video! Thank you for sharing.
To close the menu after click we can use the interaction After delay
Great point, though about that as well! I just didn't know how long should the delay be to give the user enough time & not make it too long at the same time 👀
You could also use the click interaction to jump down the page, then apply the mouse up interaction to trigger the closed state.
@@WePiphany wow great point, I didn’t realize that! Thanks!
Tnx Mate you saved my day! I'being looking at how to solve this puzzle! You have valuable content!
hey, I want to open a new page with a button and it should automatically scroll to a certain section of that new page. Could you plz guide how to do that.
This is a very helpful tutorial! However, I am still running into another issue when using this design. While I want to use the hamburger menu to act as an anchor to scroll to specific elements on screen, I also have other frames that the hamburger menu navigates to.
In my menu, I have multiple elements that navigate to different parts of my design. Some of the menu elements act as anchors to sections of the current page its on, while others navigate to a different frame. However, when I navigate to a different frame, and want to navigate back to the pervious page where the anchored element exists, the link to the anchored element is broken because now I am on a different frame and cannot scroll to it. *Is there a way to allow elements to have the "scroll to" feature when that section is on the page, and then that same element have a "navigate to" feature when show on another frame?*
Finally! Thank you :))
great, thank you!
When I put my variant to "close" and open the preview its not working anymore, but when i let it as "open" it does work. So that means everytime when I open the preview, the menu is always opened at the beginning. How can i set it as closed and it would still work? PS thank you very much for this tutorial! It helped a lot!
Any chance you have an answer for this? I'm having the same issue
Your biggest fan, awesome Job bro
Can you add a delay after each scroll click interaction that closes the menu overlay?
Great tutorial!
I tried but didn't work