Figma is free to use. Sign up here: bit.ly/3msp0OV
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 ⬇️
Twitter: / figma
Instagram: / figma
LinkedIn: / figma
____________________________________________________
#Figma #Config #FigJam #Tutorial #NothingGreatIsMadeAlone #design #tips #Schema #Schema2022 #DesignSystems #shorts #shortsvideo