Some designers cared, some didn't, some engineers cared, some didn't. It was apparent that navigating in the app felt inconsistent in terms of excellence and overall polish. So in order to cut down those awkward conversations, I created our very own motion design system.
First, I defined our 'Motion tokens', here are a few examples:
From Motion tokens to full design system components
We made a big impact in the daily life of engineers and designers, with no need to define transitions in their various projects.
The next step was to bake Motion tokens into every design system component, so each one will have it's own entry and exit animation. After this work, there was almost no need to define transitions as the component already knows how to enter and exit the canvas.
But not all animations are the same
For complexed animations, that involves an orchestra of multiple objects entering and existing, we built movement tokens to help the designers describe in a timeline what they expect to happen.
The new design motion system had a tremendous impact on our product velocity. Designers rarely need to define motion. Engineers have baked in components with no need to invest time in coding those 'annoying design requests', and the product feels more polished then ever.