Best animation software and apps for UI and UX design


Digital Arts

Image:  iStock

Incorporating animation to user interface (UI) and user experience (UX) design is important to get right, as it plays a crucial role in elevating how people will respond to an app or website – whether it be an online shopping experience or something as simple as dropping a pin on a map.

Animation demands the attention of the user, or encourages them to act on something in a way that static images can’t. And now it’s becoming easier to create animation with emerging tools and software dedicated to this – some don’t even involve any code. To get inspired about what other designers, developers and engineers are animating, check out UI Movement, or a quick Google search will bring up basic UI/UX animation guidelines and principles

UX and UI animation has been known to be time consuming and involve writing lots of hard-to-maintain code in JavaScript. But with specific tools, such as Airbnb's 'Lottie' open source animation tool – and UI/UX design tools that have animation incorporated into their overall workflow, such as InVision Studio or Framer – animating features on a website or app has become a whole lot easier. Most tools offer online tutorials, so make sure to keep them out to get started.

Take a look at the best free and paid UI and UX animation tools, apps and software for Mac, Windows, iOS and Android.

For more on UX, check out the best UX tools for designers, the best paid and free UX design courses, and best UX design books.

Lottie

Lottie is Airbnb’s open-source (via GitHub) animation tool for iOS, Android and React Native which renders After Effects animations in real time, and allows native apps to use animation as easily as they use static assets.

The tool taps into animation data exported as JSON files from an open source After Effects extension, called Bodymovin by Hernan Torrisi. The extension is bundled with JavaScript player that can render the animation on the web.

Airbnb designers have built on top of this extension to support as many After Effects features as possible to allow for basic line art, character-based animation and logo animations with multiple angles and cuts. Airbnb already uses Lottie animations for its in-app notifications, full-frame animated illustrations and in its review flow (see below).

Download Lottie iOS, Android and React Native.

Kite Compositor

This animation and prototyping app is for Mac and iOS only. Users can integrate with Adobe XD CC, import from Sketch or use the built-in JavaScript engine. Described as where "Sketch meets After Effects", with this app you can edit animation paths and shape layers straight onto your canvas, play around with colours, size and pace of your animation. By generating "zero dependency" Swift or Objective-C code compatible for both iOS and Mac, they’ll be no more guessing how fast something should move or how large it should grow.

You can factor animation into multiple pages of content, each with its own independent timeline and easily transition between the pages through in-built page transitions or custom timeline animation. Check it all out with real-time rendering and see how it looks on your phone by downloading the companion app, Kite Compositor for iOS

Download a free trial of Kite or buy now for US$99/£74.

ProtoPie

ProtoPie pieces together interactions, animation and code-free, sensor-aided prototyping in one app. The good thing about ProtoPie is that it's designed for Mac, Windows, with a ProtoPie Player for iOS and Android. This app is used by the likes of Google, OnePlus, Yahoo! and Starbucks.

Explore prototyping features such as taping, moving, rotating, jumping and more and test out your final creation on any smartphone device. Control the sensors of smart devices in your prototype, such as tilt, sound, compass and 3D Touch sensors. To share prototypes you can share a link or the Dashboard and customise the playback experience.

Download a free trial of ProtoPie or choose from two licenses – ‘Buying for Myself’ (US$99/£74) and ‘Buying for Others’ (from US$99/£74).

An enterprise subscription is expected later this year. If you choose a license you can receive free updates for one year after purchase.

Principle

This animation and interactive UI maker is for Mac users only. It’s powered by Apple’s Core Animation, the engine that iOS and OS X are built on. It’s used a by a load of big brands, including Amazon, Adobe, Netflix, Google and Facebook.

Using an animation timeline you can illustrate basic movement such as “bounce, ease and pop” or design an entirely new animation before sharing your designs using compatible app Principle Mirror for iOS – or export a standalone Mac app for others to view. Like most UI and UX apps, you can link different screens together to create realistic web and desktop prototypes.

See what more Principle features in the video below.

Download a free 14-day trial of Principle or buy now for US$129/£95.

After Effects

Adobe After Effects is increasingly being used for UI/UX designers and developers by a range of brands, including Airbnb, Uber, Audi, Google and more. UX designer and animator Issara Willenskomer has created a tutorial hub, UX in Motion, with video tutorials on how to create UI animation using Adobe After Effects. His tutorials cover topics such as micro-interactions, Dashboard animations, infographics and even augmented reality.

There’s also entire 25-tutorial course on turning Photoshop, Illustrator and Sketch designs into UI animations. UX in Motion individual video tutorials range from US$59-149.

Find out more here or listen to Issara’s introduction in the video below.

Sign up to Adobe Creative Cloud from US$20.99/£19.97 per month to use After Effects.

InVision Studio

InVision offers some powerful prototyping tools, allowing you to quickly and easily create interactive mock-ups of our designs in a way that actually reflects a real web experience. It also offers mobile prototyping with gestures, and you can also launch user testing from an iPhone, including screen recordings, videos and audio of users testing your prototypes.

InVision announced in November that its new digital design and UX application will be free for all users. InVision has released Studio – a rival to XD, Photoshop, Illustrator and Sketch, whatever tool you use to design apps, sites and other digital products.

You can work on layouts for one screen size or type, and see that design adapted automatically for other devices and orientations. Libraries of assets can be shared across teams, and updated elements can be rolled out across designs. And designs can be quickly uploaded to the InVision platform to share with others in an organisation (or clients).

See InVision Studio in action in the video below.

Read more about InVision’s Studio here.

One active prototype is free. Plans then start from US$15/£11 per month.

Sketch

Though Sketch itself has very limited animation controls, but there are a bunch of plugins and other external tools that can help you add animation. Some, like Timeline for Sketch or AnimateMate, are for more artistic or narrative animation – while others are focussed on UI and UX design, such as Diya.

Framer

Framer is an Amsterdam startup company and rival to the likes of Adobe XD and InVision for UX designers.

You can design, draw, animate and share work with Framer – a tool for screen design and interactive prototyping.

Similar to Adobe XD, you can bring designs into life with pre-made interactions and animations, and share your ideas with live project previews with the Framer mobile apps.

You can start a free trial for 14 days, or plans start at US$12/£9 a month.

Comments