Motion Tokens - Bradesco
Atomized animation token system for micro-interactions of components in Bradesco's Design System.
Project details
Year
2023
Client
Bradesco
Roles
Build the structure and create the MVP
Structure
The system structure was designed to be atomized, meaning that there was an effort to reuse previously established patterns whenever possible. This not only saves time when developing new microinteractions but also ensures their consistency with each other.
The division is as follows: tokens that make up reusable animations, which in turn build microinteractions.
Tokens
Tokens are the smallest unit of the atomized Motion system. They are divided into Duration, Delay, and Easing, and help standardize the animations that make up micro-interactions and journeys.
Duration
The duration refers to the amount of time an animation will take. In the token system, there are three duration options (Fast, Moderate, and Slow), each with an internal intensity variation ranging from 01 to 02.
Delay
Delay is the amount of time that the animation will wait before starting. The token system has the same 3 duration times (Fast, Moderate, and Slow) and intensity variation as the Duration tokens.
Easing
The easing of an element can be understood as the acceleration or deceleration during the animation. For this token system, a simplified logic was developed where the only variation will be the moment when each token should be applied.
This easing will create acceleration at the beginning of the animation and is recommended for when the element appears on the screen.
This easing will create acceleration at the end of the animation and is recommended for when the element disappears from the screen.
This easing will create acceleration in the middle of the animation and is recommended when the element remains visible from the beginning to the end of the animation.
This easing will not apply any type of acceleration to the animation and is recommended for when creating a transition between abstract values such as opacity and color.
Reusable Animations
Reusable animations are a combination of a specific animated property and an easing token. The duration and delay tokens are applied later, as they may vary in each context where the reusable animation is consumed.
Microinteraction Example
Microinteractions bring all the elements together to create the best user experience. From a consistency standpoint, the best-case scenario is when a microinteraction is entirely created from reusable animations and, consequently, easing, duration, and delay tokens.
Takeaway
This project was an intense and deep dive into the world of microinteractions. During the months I worked on it, I was able to learn a lot about the characteristics that make up a good microinteraction. In addition, creating documentation that makes sense not only for designers but also for developers will always be a complex task. However, through dialogue, we were able to overcome barriers and build a source of truth that is common to both teams.