I really didn’t begin to look back at AdobeXD until they had released the Auto-Animate feature earlier this year.
So the first thing I did was try to replicate one of the demos Elaine had showcased on her twitter feed.
It was nothing earth shattering, just a simple button; but it showcased a cool little micro-interaction. Something that apps like Sketch are still unable to accomplish on their own.
So I cracked open the application and make a simple button, following along Elaine’s design.
My first attempts were fruitless, since I was not able to get the pulsing right as an interaction. That is where I reached out to Elaine and asked for guidance. She was incredibly gracious and patient answering the most basic questions on the application, auto-animate, and the sample she had originally shared.
Once I introduced a time-based rather than a user interaction trigger, it was all just a matter of finessing the timing.
The idea for using certain triggers is based on how you want your interaction and animations to showcase.
For this button, I want the interaction to be based on the user clicking on the button to begin the micro-interaction.
The next auto-animation, however, is based on the artboard and a time trigger. For this effect, the trigger required no delay, so the animation would proceed and then just proceed to the next artboard and stage of animation.
The last state in the button animation was the ability to return to the beginning. This was also another time trigger based on the artboard itself.
As you can see, this may not seem groundbreaking but the introduction of this feature to AdobeXD makes it a powerful prototyping tool for individuals and teams.
I am extremely thankful to Elaine and Howard who were very open to engaging with me on twitter and answering questions. I plan to explore more great things with this application as I work through some new concepts and ideas for products in the coming weeks.