In this tutorial, we will explore the landscape of animation design tools, and will help you pick one, and some tips to get started in each.

Framer

Framer is the tool of choice for many interaction designers — it’s both easy to learn, and if you know a basic Javascript, you can edit the code directly to achieve complex animations. While Framer may look more complicated, it ends up giving us more freedom and limitless possibilities. You can read more about it on its official site: https://framer.com/

Principle

Principle is described by a lot of Animation Designers as “Sketch for Motion Design”. Principle’s light-weightedness, ease-of-use, small learning curve, and robustness got it a good reputation, and it’s a great alternative for designers who don’t want to do anything with code (Framer or Origami require you to have basic understanding of code to be proficient with them.) You can learn more about Principle here: http://principleformac.com/

Adobe After Effects

Adobe After Effects is a digital visual effects and motion graphics software by Adobe. It is usually used in the post-production process of film making and television production, and very few motion designers use it today since it’s quite complicated to get started with, and an overkill for Animation Design.

Invision Studio

Invision Studio is a yet-to-be-released tool that a lot of designers are excited about. It promises to make animation design a lot simpler, and it comes from the makers of Invision: a superior prototyping software. You can check out a teaser video here: https://www.invisionapp.com/studio

ProtoPie

ProtoPie is a prototyping tool for smart devices. ProtoPie makes elaborate prototypes possible without any coding, and these prototypes can be tested on actual devices. ProtoPie is a paid tool ($99) and works for both Windows and Mac. You can read more about ProtoPie on its official site: https://www.protopie.io/

Origami Studio

Origami Studio is a free tool by Facebook, and used within Facebook by its design team. To build prototypes in Origami Studio, you use the patch editor to build the logic behind your app. There is an extensive library of patches that you can use, including switches, animations, boolean operators, phone’s sensors etc. You can copy your designs from Sketch and just paste them into Origami Studio. After building flows and adding interactions, you can preview your prototype on a device. You can read more about Origami Studio on its official site: https://origami.design/

Conclusion

As you can probably notice, the field of Animation Design Prototyping is in rapid flux, and the tools are constantly evolving. This tutorial was intended to give you an idea of where to start looking when you start prototyping your animations, and you can pick the tool that best fits your needs and skill level.