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.
Take a look at the best free and paid UI and UX animation tools, apps and software for Mac, Windows, iOS and Android.
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.
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).
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 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.
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.
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 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.
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 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.