Figma is the best tool, but I think it have something to do better to make a nice portotype
I don’t understand why the overflay not support smart animation?
another question is when I use overlay Nav to another page, I can’t go back the overlay,
I feeling so crazy…
I agree. I hope overlay supports smart animation soon!
Something I have done is to combine overlays and smart animation like this:
1. Create a component with the two states you want to animate between
2. Trigger the animation between the component variants to happen with the delay of 1 ms and use Smart animation
3. Place the componen in a frame that you open as an overlay. Now you have combined overlay and smart animation
The nasty part is that you can't easilu reset the componen to the initial state because it keeps coming back due to the timer interaction. You can solve this with a variable.
1. Create a string variable e.g. overlayStatus and set it to match the name of your initial state in the component.
2. In the overlay frame, attach the variant of the component to the variable name.
3. In any of the buttons that close your overlay, add an interaction that sets the variable back to the initial state. This way the animation will be reset and work properly the next time you open the overlay.
Disadvantages of the solution:
- Requires extra effort and is easy to break
- Figma has a slight delay when rendering the results so it's not as smooth as the basic overlay animation
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.