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 t...