Animation in Phase: First Look

• Building Phase
• Phase Animation
• Product Update

June 2023 Phase Product Update

Last year, we offered a glimpse into Phase, that showed the foundations for our animation pre-release. Now, we’ve got a demo so you can see it in action! And with it, we can give some deeper insights into the decisions we’ve made to evolve Phase from an animation tool into the premiere platform for end-to-end codeless UX design.

Our devs have been cooking up our core interaction engine for a while now, making sure that it’s also easy to use for UX design and has full animation support. It’s fully browser-based and runs smoothly from any device. Here you can see a recording of real-time playback from Phase:

The main thing that we wanted to accomplish was to make Phase intuitive enough that UI/UX professionals could dive right in with minimal training. Many emerging motion design tools are effectively slimmed-down versions of After Effects or Maya; this leads to them having a steep learning curve. We wanted Phase to diverge from tools like that by having a similar feel to the software web and app designers are already familiar with.

To make that happen, we’ve been working with a group of excellent designers who have been testing Phase in the background. They have given us valuable insights to make our software appeal to both industry experts and new users alike. By ensuring all the functions match user expectations and the interface is easy to navigate, we hoped to eliminate the gap between designers and animators.

To show this, let’s take a look at Phase and After Effects side-by-side:

Right away, it’s clear that our tools are built for different purposes. While both software can make high-quality Lottie animations, After Effects has a heavy bent toward Hollywood-style video production and VFX. On the other hand, Phase’s UX roots shine brightly with its Figma-like toolbars, panels, and menu placement.

The biggest departure from prototyping software in the Phase UI is the prominent Design/Animate toggle that hangs on the center of the screen. Because elements can change or disappear over time, we want users to be able to quickly swap between motion graphics and their overall design. This means that each mode of the software lets users focus on the tasks at hand, reducing visual clutter down to the minimum level of complexity necessary.

We’ve done many rounds of usability tests since, and have seen promising results: designers with no animation experience have been able to produce compelling motion graphics faster than ever before in Phase, without needing days or weeks of training. Seeing their success gives us confidence as we continue fleshing out other design features and interaction controls, knowing that our fundamental software is so easy to pick up and use.

Lottie animations will be our focal point for our pre-release, as we want users to be able to import from the vast library of existing designs already available. We have found that by seeing how other people build an animation, new users get a huge head start with thinking in motion. While Lottie will also be our primary output format, we also support GIF and MP4 export.

We still have some work to do to make sure that our initial public version of Phase gives a solid first impression. (I.e. we have to fix some bugs.) But we’ll be reaching out to more of the people signed up in our early access list (more of you!) to add to our testing group as we ramp up into our pre-release. Stay tuned to our newsletter for updates, and thank you for your patience and support.

. . .

• Subscribe to our Magazine Newsletter. 
• Follow us on Facebook and LinkedIn.
• Join our community on Slack and Facebook.