Hello, I’m new to Figma prototyping, transitioning over from Axure / Sketch / XD.
I’m creating a prototype and having a bit of difficulty with the interactions - multiple YouTube videos haven’t seemed to show me what to do with components, variants, interactive components etc.
Hoping you kind souls might point me in the right direction.
I’m looking to trigger multiple interactions and animations on one click (hamburger icon).
It seems that we’re limited to one OnClick event per component or group and I’m looking for a workaround to do the ollowing:
When hamburger menu is clicked
1a. Hamburger icon animates shifting to Close X icon
1b. Header bar remains in a fixed position - no transitions aside from the hamburger / X animation
Menu slides in from left to right.
The menu pushes the page content to the right. A small portion of the main page remains visible to the right of the screen
As the menu push animation happens, the page content darkens under an overlay of 85% opacity
When close icon is clicked, reverse the animations to close the menu & page content brightens, slides in from right to left.
The case you described can be achieved by using “smart animate”.
You will need both screens you showed and then animate from one to the other by giving your burger icon an on click event with “navigate to” → “open menu” and an “smart animate” transition with an ease.
Figma automatically will animate all elements from A to B. This contains, position, colors, etc.
The important part is that you have alle emelents you want to animate in both frames. Your menu for example also needs to be within your first (closed menu) frame. Left from your content, outside the visible area. Your outer frame acts as a mask. In your closed frame you can now move the menu in and push the content out by changing X cordinates.
This greyed out overlay effect you also need to create by hand. In my example I changed the background to blue and reduced opacity of my content frame so the background shines through. You could also use a colored frame as real overlay instead. This frame you could also link back, so your menu closes if you are clicking on this greyed out area.
Please make sure both frames have the same structure, so figma knows how to animate your different elements.
With this “clip content” checkbox you can turn on or off the “mask”, if you want to hide everything outside your frame.
An easier way would be using the overlay feature but it wouldn’t look exactly like your vision. The good thing is that it comes with this greyed out effect and move in animation out of the box.
Hi Dennis, thanks for the detailed instructions. I got this working with a mock menu. Now attempting to add a few more complex interactions within the menu itself. Really appreciate your fast assistance!