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
A Day in The Life of a Software Engineer at FullStack Labs
2020 Software Development Price Guide & Hourly Rate Comparison
How Company Culture Attracts Top IT Talent in Colombia

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 Designer, I have the opportunity to create digital products that make life easier for people around the world by helping them achieve their goals with technology. At the end of the day, good design makes the world a better place. I've worked on everything from apps that help health care providers manage patient loads to complex tools to sort human cells. My favorite tool to work with is Figma — compared to software that's locally installed, Figma, which is cloud-based, allows for easier collaboration among team members. I'm a creative problem solver who's always immersed in aesthetics one way or another, so when I'm not scaring up new UI/UX designs, I love to paint.

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.