A large part of designing interfaces is how the interface reacts when you swipe, click, tap and scroll through it. A clunky animation can make a beautiful interface unpleasant to use and a great animation can be a delighter in an otherwise bland interface. There are a number of tools to assist in creating different interface animations, and this article outlines the pros and cons of a few of the main options on offer.
Figma
You may already be using Figma as your main UI design tool, but a lot of people overlook its animation potential. You can create everything from simple button interactions to fancier ‘pull to refresh’ animations using a combination of features, and with their new component variant animations, the possibilities are growing with each new release.
Pros
- Figma has a free account where you can have 3 projects and unlimited drafts so you can design and animate until your heart is content.
- Is easy to pick up if you’ve already been using it as your interface design software, this also means you won’t need to export your assets to use in another tool.
- Smart animate makes creating common and even some more complex interface animations easy. You can automatically change the scale, position, opacity, rotation or fill of an element simply by using auto animate between two screens with the same element in its varying states. You can find out more about smart animate here.
- They have a large library of guides and how-to articles and videos to help you get to grips with the software.
- When you create a prototype animation you can share it using a link, to whoever you need to, making it very easy to collaborate with others.
Cons
- It does have some limitations in terms of animation; if you have grand expectations of wild UI animations, you may be better with a more robust piece of software.
- You have to keep close track of your layer names, smart animate works by matching up your layers using their type and name. So, unfortunately, you can’t copy and paste everything and expect it to work still.
- Depending on how complex your animation is, you will have to have multiple ‘boards’ to animate different layers; this is different from tools like After Effects, where you simply animate the component itself within a frame.
Adobe After Effects
Adobe After Effects is a monolith of animation. Having been around since 1993, it is the longest-running piece of software on our list. And as such, there is an endless number of things you can do in it.
Pros
- Because it is Adobe software it works seamlessly with other Adobe products, meaning you can create your interface using another tool and then import your assets directly into after effects.
- There are a large variety of animations you can create within the tool; really the only limitation here is your imagination and maybe the capabilities of your computer.
- Because it has been around for so long, there are many courses and free videos and tutorials online walking you through how to create any type of animation you can think up.
Cons
- Because you can do a lot with it, it does have a complex interface and a steep learning curve that can be overwhelming for first-time animators.
- You must pay for an Adobe subscription to use After Effects. This can be a lot depending on how many tools you need to use and might not be worth it if you only need access to one piece of software.
- Exporting animations to collaborate around design with others can be a bit of a pain, and sending someone a file requires you to send all source components as well as the actual After Effects file itself.
Principle
Principle is a common tool used by UI designers. It bridges the gap between design tools like Figma and the more complex animation software of After Effects.
Pros
- Principle was made for animating interface designs, this means all their tutorials are aimed specifically at the types of animations common in interface design.
- You can easily share your designs via a link, making collaboration with developers or other designers easy.
Cons
- Principle has an interface similar in style to After Effects which means it has a little bit of a learning curve if you have not used animation software before. However, it’s not as complex as After Effects, so it hits a good middle ground.
- Like Figma, it animates your layers between pages or ‘boards’ meaning you have to be very careful with how you name your layers. It can take a bit of getting used to, but once you get into the habit of naming each layer uniquely, it becomes easier.
- Principle is not free software and doesn’t offer monthly subscriptions, meaning you have to form out a larger lump sum upfront then pay for a yearly renewal if you want to continue getting updates to the software. This isn’t feasible for everyone and may mean it’s a hard no for a lot of people.
- Principle is not available for Windows computers or laptops.
Framer
Framer is a great animation tool for those that have a bit of understanding (or want to gain an understanding) of coding. Framer gets users to write code to generate the animations they want. This is an excellent way of understanding what animations are feasible for websites and applications.
Pros
- Having a better understanding of how long it takes to create some animations or how these animations interact with the rest of the interface can be very valuable to understand as a designer.
- It has a free version as well as a monthly subscription which means you can use the free version if it has everything you need and you can upgrade to the paid version for a month if you need it, without having to commit to a full years subscription.
- You can share Framer files like Figma’s, simply by generating a link to send to everyone you need to collaborate with.
Cons
- Framer requires prior knowledge or at least a willingness to learn how to code to create the animations. This can be a great skill and make you stand out as a designer, however it can be challenging and it’s certainly not for everyone.
- The Framer desktop app is only available for paid subscriptions, meaning you cannot access it offline on the paid version.
- You cannot use custom fonts in the free version so if you have a specific brand font that your company or client has paid for, you won’t be able to use it in your animations unless you pay for a subscription.
In Summary
Choosing the right animation software will depend on a few different factors; budget, the time you can dedicate to learning a new tool and the complexity of the type of animations you need to create. Hopefully, this list can help you narrow down your choice.
Sympli is a Saas company that creates tools for design collaboration, handoff, and version control. With more than 5 years on the market, we had helped thousands of designers and developers work together by providing a single source of truth and reducing back-and-forth communications, resulting in faster delivery.
