Native app animation tools for designers

Animation is a key vehicle to provide the best possible experience and ensure mobile apps stand out from the crowd. As we discussed in our last article, animation is an essential part of the user experience that helps to enhance and support your brand. But how can we build these unique animations for native apps? There are several solutions, which run the gamut from animation interfaces with timeline-based editors to working with code itself. These days, there are no clear leaders or processes across the wide spectrum. Further, it’s rare to find a solution that makes it easy to design a great custom animation and easily merges with a developer’s workflow. That said, there are options—and while there’s not yet a “holy grail” of animation design and development tools, we’ve compiled a list of solutions to help brands determine which method is best for them.

Keynote

Apple’s presentation software comes preloaded with some powerful animation tools built in. While these animations are designed for transitions and for movement of objects around a slide, they make it relatively easy to mock together rough animations. Keynote is free with the purchase of a Mac or iOS device, and its accessible interface helps designers get started quickly. Keynote isn’t developer-friendly, as it only exports to formats like PDF or QuickTime Movie, but can help illustrate an idea and start a conversation. For designers, Keynote is extremely easy to pick up and start using—check out frog’s recreation of Google’s Material Design video, built entirely in Keynote.

Quartz Composer + Origami

Quartz Composer is a graphical programming language provided as part of Apple’s Xcode. The workflow is designed to prototype animation behaviors for certain features or interactions, not the whole app. While it hasn’t seen much attention from Apple by way of routine updates in recent years—the company is rumored to have replaced it with an internal tool called Mica—Quartz Composer has seen development from third parties, namely Facebook. The social giant released the open-source Facebook Pop animation engine to help developers use Quartz Composer compositions directly in Xcode, incorporating new animations designed for their Paper app like spring tension and friction. Quartz Composer has a steep learning curve—which is why we developed a tutorial on how to use QC with Origami earlier this year—but mocking up animations and handing them over to developers is easy once you’ve mastered the app.

Xcode itself can be used to prototype an entire application’s interface, but designers need to love and embrace both C or Swift programming and Xcode in order to make the app work for them. In the latest version of Xcode, Swift “playgrounds” allow for visualization of code as it’s written, which could ease the disconnection between lines of code and user interface design.

InVision

InVision allows designers and animators to make custom animations and share them with their team in real time. It leverages the native iOS and Android animations designers know and love, but lacks the ability to create custom animations for specific and unique interactions. It doesn’t integrate necessarily with existing developer workflows, but the ability to mock up and demonstrate stock animations between screens is essential for communication between design and development teams.

Flinto

Similar to InVision in its use of stock Android and iOS animation templates, Flinto provides little by way of custom, on-brand animations for unique interactions. Flinto enables designers to create great mockups that are viewable on any device, and can allow for working prototypes without touching a line of code or handing the project off to a developer. Flinto allows for medium-fidelity interaction designs that are viewable and navigable in any browser, making them shareable within internal teams and also with clients outside your company.

Adobe Flash

Flash is an easy-to-learn and tried-and-true timeline-based animation tool. Years ago, Flash powered a wide range of custom animation design tools across the web. But because of its incompatibility with iOS and mobile devices that followed, Flash’s popularity has waned considerably for product development in recent years. In his must-read article about interaction design tools, Pasquale D’Silva argued that,

“When Flash died, so did the ideas around blending manual animation with code.”

While his quote rings true with many designers, Flash isn’t so dead that designers shouldn’t use it for generating animated mockups, despite its inability to be translated into native app code. There was once a time when most designers for the web knew Flash as part of their trade—that knowledge might still come in handy when making animation prototypes for platforms that replaced it.

FramerJS

FramerJS is an animation design tool that produces animations boasting beautiful spring physics, 3D lighting effects, and a bevy of filters. Because of its ability to import from Sketch—an increasingly popular designer tool—FramerJS has become a broadly used solution for animation prototyping. Despite a slight learning curve of having to learn CoffeeScript, FramerJS’s stellar animations are worth the effort.

Pixate

Pixate makes it easy to prototype and generate native animations in a web-based interface—but its ability to generate complex animations helps it stand alone on this list. Pixate can display animations in real time on an actual mobile device in a 100% native view as designers work, and—while designers can’t yet export the complex animations they’re able to create—Pixate provides the highest-fidelity mockups and robust animations by far. The product isn’t available to the public quite yet, but it’s generating a lot of buzz—in particular surrounding the future exportability of its projects. Designers familiar with Flinto or InVision will feel right at home in Pixate, and we’re excited to give it a try and report our findings.

Bigger than an understanding of these tools is the realization that there’s no clear leader in the animation space yet. On the one hand, designers who know code can more easily merge their work into the development process without needing additional steps and creating pointless extra design assets. On the other, those interested in timeline animation can make beautiful custom animations that might take a bit of extra work to be translated into code. The point is to find an animation and design workflow that works for your team, and then use the tools that best accommodate those preferences.

If there were a solution today that integrated both of these benefits, it would be utterly magical for both designers and developers. Many are looking to Pixate to provide that middle ground—which is why designers at Punchkick are playing with the beta version. Check back soon when we report our findings, and feel free to leave us a comment with your favorite animation design tools or workflows.