When planning motion for a UI design, I often start with pen and paper to sketch out my initial concepts. This approach lets me quickly visualize and iterate on ideas without the constraints of digital tools. I draw storyboards to map out the flow of transitions, noting how elements will move, change, and interact. By sketching keyframes, I can outline the sequence of actions and define the timing for each motion. These hand-drawn plans provide a clear, tangible reference that captures my vision for the animation, ensuring that the dynamic aspects of the interface are thoughtfully considered and well-documented before moving to digital prototyping tools.

After that, one would typically create a prototype in After Effects or Figma and send it to the engineers, expecting to see the same result implemented. This process however is broken, leaving the engineers doing a lot of guess work which in turn creates more round of lengthy reviews. After extensive research, I found a solution from a keynote by a major tech company facing the same problem: motion specs. I redefined all the dashboard animations using graphs to specify the duration, transitions, and changes for each element. This fascinating process taught me how to translate movement into precise, actionable terms.

Developers were thrilled to finally have precise values to work with. This approach significantly reduced development time and nearly eliminated the need for extensive reviews, as they could clearly understand my exact vision. Most importantly, the initial results closely matched my prototype, allowing us to move forward swiftly and focus on other tasks. This newfound efficiency streamlined our workflow and brought my designs to life with remarkable accuracy.