The same update that brought us Auto-Animate allows us to interact with our prototypes like never before. I look forward to XD updates and check every change regarding the Auto-Animate feature. They could still improve a lot, but it will evolve into something more significant because of its easy-to-use functionality. Although sometimes a bug occurred, it still impressed me. This just scratched the surface of the Auto-Animation feature. I could say I’ve loaded this gun but haven’t shot all the bullets. It literally added a nice touch to my design. I didn’t plan to do this but it happened anyway. Besides the naming, the ease also amazed me! XD automatically made the product card at the center larger and pushed the other two outward. This meant I had to specifically name all the layers right to keep the animation from falling apart.
At the moment you can not set hover state in the prototype, so I had to set the animation to play on click. Nothing else, the animation appears without any significant effort, easy cheese!
I had to do nothing more, only create the two statuses and set the action to Auto-Animate to the next artboard with a 0.3-second easing. This animation consists of a list of categories which move like the iOS date/time picker. Disclaimer: I did these as simple UI experiments, so please don’t judge the usability of these concepts! 😉 The first part: I created a few experiences by designing the chosen UI challenge theme (a Nike webshop landing page concept). Drag Gestures in XD takes the Auto-Animate feature one step further by allowing you to simulate the drag experience of touch-enabled devices.Ībove, I mentioned my decision to take this new feature for a test run. They made it possible to combine Auto-Animate with drag gestures and create micro-interactions across art-boards for rich prototype experiences such as onboarding flows, animations for carousels, cards, and lists or progress indicators.ĭeceptively simple to use, Auto-Animate creates stunning effects and transitions that help you communicate an animated end-user experience. As they describe Auto-Animate, Adobe XD has evolved from a primary click-through application to provide you different prototyping options such as time, tap, drag and voice. Amazing animations with one clickĪdobe Max introduced the new Auto-Animate XD feature in October 2018. I mostly wanted to try Auto-Animate in XD, but I thought it couldn’t hurt if I made my prototype cutting-edge with some additional After Effects fine-tuning. One move and you’ll have it!Īfter I effortlessly imported all the files, I couldn’t wait to try to open my project in After Effects. We’ll just copy and paste – nothing more. We won’t have to export all the file armies or create horribly big folders to contain all of our assets. The UI design workflow is going to get much more comfortable and faster in the future. So I did and… It WORKED! As seamlessly as I expected! Can you imagine? We all know Adobe applications can sometimes work barmy but not in this case! But I only wanted to copy-paste all the elements from the running applications. The curiosity to use the Adobe apps on these tasks was killing me.Īs an experienced designer, I could’ve exported the pictures in PNG and the icons in SVG. But first things first, I had to prepare: pictures to cut, icons to build and a neat landing page to design. It gave me a little experimentation time to play around with this exciting feature. I had a UI design challenge to try out the XD Auto-Animate function.
0 kommentar(er)
