The next step of the project was to bring everything together into a working prototype within Figma. Rather than simply placing the animations onto static screens, this stage focused on how each micro-interaction functions within complete user flows.
This meant thinking carefully about context. Each interaction needed to exist within a realistic scenario, such as launching the app, viewing portfolio performance, or completing a deposit. Structuring the prototype around these flows allowed the micro-interactions to demonstrate their purpose more clearly, showing not just how they look, but how and when they are used.
Figma’s prototyping tools were used to sequence and time interactions in a way that reflects real use. Smart Animate ensured continuity between states, allowing elements to transition smoothly rather than feeling disconnected. For example, data visualisation transitions were kept within a 200–300ms range using ease-in-out curves, maintaining responsiveness while ensuring changes remained readable. Similarly, system feedback was timed to feel immediate but unobtrusive, with toast notifications entering at ~250ms (ease-out) and exiting slightly faster, reinforcing a sense of responsiveness without interrupting flow.
Bringing everything together also highlighted the importance of consistency. Animation timings, easing, and motion behaviour were aligned across all interactions to create a cohesive experience. The loading interactions used longer, continuous loops (approximately 1.2–2 seconds) to manage waiting states, while interactive elements remained shorter and more responsive, reinforcing a clear hierarchy of motion.
This stage also acted as a final validation of earlier decisions. Experiencing the interactions in sequence made it easier to identify where pacing felt too slow or too abrupt. Minor refinements to timing and duration ensured that interactions supported the user journey without becoming distracting or overwhelming.
Accessibility was also considered at this stage. Interactions were designed so that key information is never communicated through motion alone, with text and visual hierarchy reinforcing all feedback. Where necessary, animations could be reduced to simpler transitions or removed entirely without impacting usability.
Overall, this stage felt like assembling a set of puzzle pieces. The earlier focus on purpose, brand, and motion principles meant that the interactions integrated naturally within the interface. The final prototype demonstrates how micro-interactions can work together as a cohesive system, enhancing clarity, responsiveness, and user confidence within the product.