Improve your Design Process with Prototype Animations

Static elements, like colors and text, are easy to display and convey to clients and developer teams. But when a design requires some interactivity, like swiping cards or hovering over elements, it can be difficult to convey exactly what should happen using traditional static assets. The solution is an interactive prototype.‍

Defining experience and interactivity.‍

Animating our prototype can close the gap between design and development. It brings clarity and achieves the same objective as a design system: creating better product value and user experience. 

By defining transitions, micro-interactions, and gestures we can set a solid interactivity foundation and keep it scalable, making sure new features follow established guidelines.‍

An animation is worth a thousand words.‍

Interactivity is difficult to explain and convey correctly with simple static images and text. How an element is going to interact with users' gestures can lead to stress, miscommunication, and unexpected results. Adding animations to your prototype will help you convey your design better than a bunch of screenshots with accompanying text describing what should happen.‍

Animation as a dev asset.‍

Sharing your animation with the development team will help them brainstorm about what frameworks and languages should be used to recreate your design more quickly. It will improve communication at an early stage and make sure you have better control of the final product.‍

Figma Smart Animate beer app case study.‍

Putting this topic into practice, I created a mobile app called My Beer App in Figma and created animations for all screens using Figma Smart Animate. Smart Animate is a new feature that can create powerful interactions without all the complexity of standard animation software or plugins. For this project, I designed an experience where you can view your favorite Beers along with product descriptions and other information.

My goal was to make it obvious that each screen belonged to a specific beer. I achieved this by placing branding elements in the background along with an image of the beer, the title, and other descriptive information. After that, I created other screens that showed the flow of selecting a beer, adding it to the basket, selecting quantities, and finally, a confirmation screen.

After the screens were designed I started thinking about interactions, which gestures would be most user-friendly. Since my layout displays “next” and “previous” beers, I thought the most intuitive interaction would be dragging from right to left and vice versa. ‍

The next step was to show interactivity when the user selects a beer. For this, I envisioned a beer that floats and is dragged into a shopping basket. Once it’s released, it takes the user to a product screen.‍

When the user is on the product screen, the following interaction shows how to add the number of beers. To make this step more interactive, I devised a micro-interaction for the additional quantity button. When the user taps on the “plus” icon, the button gets wider and elevates, while the Serve button gets smaller, providing more hierarchy to the main action.‍

The final step when the user finally decides to get the product was to tap the Serve button. To make this decision special, I created a confirmation screen interaction where the beer rotates and is poured into a glass.‍

After putting together all the animations and micro-interactions, here’s the result:‍

Why prototype animation is essential for your project.‍

As you can see, interactive animations will facilitate communication and keep your product scalable. It offers other excellent benefits such as:

• Better product value and user experience.
• Better design and code.
• Less time and money.

At FSL, we create interactive prototypes to help communicate our designs to you and our dev team. We’ll work together to deliver high-quality results and a better final product.