FullStack Labs

Please Upgrade Your Browser.

Unfortunately, Internet Explorer is an outdated browser and we do not currently support it. To have the best browsing experience, please upgrade to Microsoft Edge, Google Chrome or Safari.
Upgrade

Improve your Design Process with Prototype Animations

Written by 
Arley Alvarez
,
UI/UX Designer
Improve your Design Process with Prototype Animations
blog post background
React Developer Salaries
Comparing Hourly Rates Between Software Consultancies
React Native App Of The Week: Speedy Cash
Building REST-based React Native Offline Apps
Speed, Quality, Price: Choose Two When Building Custom Software
Remote Usability Testing

One of the first steps when starting a project is to build the design system. This is a principal tool for your team as well as a critical step to help give clients a better grasp of the process. Additionally, it allows for scalability through all stages of its life.

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.

Arley Alvarez
Written by
Arley Alvarez
Arley Alvarez

As a UX/UI Senior Designer, I've been crafting delightful product experiences for companies and start-ups for more than five years. I use Figma and Sketch for design and InVision for proto-typing. I have served clients in the retail, pharma, banking and tourism spaces throughout the years, as well as designing materials for a non-profit wildlife conservation project. I have a Masters in Digital Marketing and eCommerce from the University of Barcelona. In my free time I love to continue learning, painting, and watching live soccer matches.

FullStack Labs Icon

Let's Talk!

We’d love to learn more about your project. Contact us below for a free consultation with our CEO.
Projects start at $50,000.

company name
name
email
phone
Type of project
Reason for contact
How did you hear about us?
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.