So, you’ve been working as a web / UX / UI designer for a while, you’ve been there when your job consisted of designing pixel perfect mockups in photoshop, then the web became responsive and the need to create iterations at different sizes required the use of multiple artboards, so maybe you moved into illustrator, and that was fine for a while, but the workflow wasn’t as smooth as it could be so eventually when something more “bespoke” came along you jumped into Sketch, Adobe XD, Figma, Invision studio or any other software of this elk.

Fantastic, so you invest some time and effort learning one of the previously mentioned apps, (in my case sketch) your designs are now more consistent, more polished, your productivity is through the roof, and you can knock out fully fledged mockups lightning quick. You. are. The man. And/or woman).

Where do we go from here? In some cases this is where the journey ends for us – we then hand the sketch document over to our trusty in house dev and they get to work. But what if we have grander notions for our designs? What if we want to show some slick animations or screen transitions that will add that extra polish to our project. It’s extremely hard to get everyone on the same page when explaining animations, everyone will have a slightly different version of what’s happening in their own head – that’s why as designers we need the ability to quickly and efficiently produce animations.

I see the ability to produce these animations/interactions as the next step to becoming the best designer you can be. Of course, if you possess the necessary front end skill set to transform your static design into reality through code, then learning how to animate inside of sketch may seem unnecessary – But as the industry matures the roles within it are becoming more defined, UX/UI designers don’t need to know how to “build” their designs, as long as they know what’s technically possible is enough.

With that in mind, what is the best way to up your animation game and get busy making those slick interactive prototypes? For the purposes of this post (and for my own sanity), I’m going to look at 2 ways to get started.

* Note – This is my 1st time getting into UX/UI animations and have no previous experience whatsoever ever in the area…well I made a .gif once in photoshop circa 2002 and I never messed with Flash (R.I.P) back in the day.

Since I’m already proficient in Sketch I’m going to look a the options inside it but I also want to check out Adobe XD, which I’ve had a quick play around in – but ultimately felt more at home in Sketch, so retreated back to it. I want to compare these two specifically to find out how well native animation functionality (adobe XD) stacks up against a 3rd party plugin (Sketch). The go-to plugin would appear to be Anima Toolkit so that’s what we’re going to be using with Sketch.

Let’s kick things off with Anima Tool kit, I’ve installed the plugin and leafed through the documentation on the site, which provides a fairly decent high-level assessment of what’s possible and gives a good indicator of what to expect. I’m using these tutorials on their example section of the website to get familiar with the plugin.

Admittedly, when working through the tutorials, I found it hard to grasp how to perform basic animations/interaction (maybe its just me)- but I found it more useful to plunder the depths of YouTube to see how other people use it and then apply what I saw to one of our recently completed projects.

After a relatively short learning curve, I was able to see the capabilities and potential of the Anima tool kit. The interface opens up inside sketch and looks and behaves as you’d expect. manipulating the timeline is easy and intuitive it almost feels native.

Anima allows you to create “Animations” and “interactions”, without going too deep, it allows the user to design the behavior of a component, eg hover/click states for buttons, etc then add them into a canvas so you can create bigger animations.

To keep things simple I decided to animate the navigation cards on a recent app design, after a few attempts (rename and order your files for an easy life) I got to grips with the basics of Anima

Exporting your animations is one click away with and Anima even provides a “handoff” feature which spits out the code necessary for your friendly neighborhood dev to use, super handy and impressive.

The generated code form the handoff feature, in its own little Codepen. nice.

Jumping into XD and the interface feels really similar to Sketch, to keep things relatively fair I set myself the same task as above, a simple app dashboard with menu items fading in after each other. Adobe XD handled the sketch components Id already built well so that’s a bonus – even if it’s not necessarily relevant here – but I’d like to point out, at a glance the user experience for both applications feels similar.

Having watched a few tutorials and seen examples online it’s clear that Adobe XD can produce some really amazing looking animations/interactions. The auto animate feature is simple to use and the performance is so slick, it definitely feels more polished than Anima, having said that it also offers a lot less control. There is no timeline inside Adobe XD, staggering individual component animations inside screens felt impossible to do.

If you’ve ever used Craft’s prototyping tool inside sketch and used Invision then you’ll be familiar with the mechanics of Adobe XD’s auto animate feature. Of course, the results are slicker but the interface and principals are almost the same.

After having spent a day with the two I feel each approach has its own pros and cons, and to be honest, I can see myself using both, but for different situations. XD feels more slick and polished but offers less in the way of a fully fledged “animation” tool, If I wanted to “wow” a client, for example, XD would be Ideal for showcasing some spicy transitions. If on the other hand, I need to design and build assets to hand over for a developer to implement I’d still have to stick with Sketch + Anima, yes the experience isn’t as polished or simple but it offers more control and better output in real-world situations.

Note: Invision studio would appear to bridge the gap between the main differences outlined above, offering the slick interface and transitions with the added benefit of a timeline for extra control, It might be worth checking out.