Create a hamburger menu transition in Figma #shorts

Let’s learn how to create a hamburger menu transition in Figma.

1. Start with a hamburger menu icon (created with three lines, a top line, middle line and bottom line), and make it a component. Name the variant as “closed”.
2. Add a new variant and rename it to “opened”.
3. Expand the opened variant’s layers and select the top-line layer. Change its rotation to -45 degree.
4. Select the bottom-line layer and change its rotation to 45 degree.
5. Select the middle-line later and change its opacity to 0% by hitting 0 twice.
6. Reposition the lines so that they align with each other and form a close icon.
7. Switch to prototype mode by hitting Shift + E.
8. Connect the closed variant to the opened variant. Set animation transition to “Smart animate”, easing to “Ease in and out back”, and animation duration to “200ms”.
9. Connect the opened variant back to closed variant with the same settings.
10. Then, paste the instances on the designs. In the video, we have two screens. One is the homepage, and one is the menu. Make sure the instances are pasted on the same position on both screens.
11. Update the instance’s state to opened in the menu screen.
12. Now switch to prototype mode and connect the two screens.
13. Drag a connection noodle from the hamburger menu instance in the homepage screen to the menu screen. Set animation transition to “Move in” and direction to “down”, easing to “Ease in and out back”, and animation duration to “300ms”. Remember to check the box for “smart animate matching layers”.
14. Then drag a connection noodle from the hamburger menu instance in the menu screen back to the homepage screen. Set animation transition to “Move in” and direction to “up”, easing to “Ease in and out back”, and animation duration to “300ms”. Remember to check the box for “smart animate matching layers”.
15. Now present the prototype in presentation view and test it out.

____________________________________________________

Find us on ⬇️

____________________________________________________

#Figma #Config #FigJam #Tutorial #NothingGreatIsMadeAlone #design #tips #Schema #Schema2022 #DesignSystems #shorts #shortsvideo

[sameerhussain]

Figma's official channel is doing it better and simpler than most other creators.

[alexisscharf]

Nice video.
Thank you for posting videos that teach Figma. Apreciate it 🙏🏻

[gmaps]

Missed opportunity to loop the video! 😄 Great tip though!

[martin_]

This short video helped me way more than the others I seen thank you so so much 🙏🏽🙏🏽🙏🏽

[evanchang]

If I assign a "change to" on tap to a variant, can I also add a second "on tap" interaction to it? Right now Im getting an error when im trying to apply a second on tap interaction to a variant that already has a "change to" assignment (ie, when I click the hamburger variant i want it to change to the x but also change to the expanded menu).

[lepdien]

In fact if you add interaction between 2 frames, you dont need to add interaction between 2 icon variants

[yannpoco]

When the menu is an overlay how to animate the hamburger icon?

[Phoca_Vitulina]

So cool! I have a question though after trying it out. My menu text is flying in faster than the rest of the background and leaving later than the background. How do I keep it the same speed as the menu screen itself? Thanks

[divyande]

Can someone teach me how to create responsive table in figma

[phoebe_sg]

Hi I cant click on the 'Change to' option? don't know why. Anybody can help me