I have been experimenting with Adobe XD and how to display certain types of micro-interactions for our development teams.
With the addition of Adobe’s auto-animate feature, they really improved the capabilities of their application and leapfrogged their competition.
This is a simple drop-down animation created by using 4 artboards and a few auto-animations between them.
There are 4 artboards that create the above micro-interaction. The first transition is triggered by a click on the “Plan Your Vacation” table.
The next animation is automatically triggered as a Timed animation to show the sub-menu of the parent item.
The third transition is another click to close the sub-menu with the final trigger using another timed transition to close the menu back to its original state.
If you have not tried AdobeXD yet, now is a great time to test it out. There was a recent major upgrade to the application that adds some refinements to existing tools while also extending its capabilities.