Motion Design System — Fluent 2 / BIC
Motion for Fluent 2 was being treated as an afterthought. My motion design wasn't making it into product. Designers and engineers weren't working from the same reference, and I was making one-off demos that disappeared after handoff. I built a system that helped fix that.
Public motion guidelines
The first step was creating a high level motion guideline to align everyone. I saw a gap and brought in the Fluent 2 design team to help fill it. PMs, designers, and engineers all needed to understand what we were trying to achieve, which was more consistency and quality in our apps UI. I led the creation of the motion guidelines on the Fluent 2 website, which include principles, examples, and an overall approach to creating motion for products. fluent2.microsoft.design/motion
Motion token specifications
I created several iterations of a motion spec template for standardizing handoff to engineering. Previously specs were created ad hoc and engineering teams differed in their needs, so spec interpretation was off and implementation looked nothing like the original designs. I interviewed engineers and based the final template on their feedback. We discovered that handing off actual code was causing additional issues and was too much for this template. The final version included a timeline, component anatomy, Fluent 2 motion tokens per element, and clear usage direction with interactive and video examples. This helped clear up spec implementation and understanding for designers, PMs, and engineers.
Figma interactive library
I observed designers creating motion demos with random patterns applied, which wasn't representing the Fluent 2 motion system accurately and was causing confusion and redundant requests. To fix that, I created a 1:1 version of the Fluent 2 component library for Figma with interactivity and motion baked in. This made it easier for designers to create their own demos with the correct Fluent 2 motion theme and tokens, leading to better representations of the finished product and stronger design and UX decisions.
Outcome
After presenting this work to the larger design group at Microsoft, basic motion requests dropped off and were replaced with requests for missing patterns in Fluent 2. The motion system had been vague on specifics, which showed up in the product and made it feel cheap and unfinished. Building these tools helped drive quality and make sure it carried through to implementation. Evangelizing motion design at scale was a key part of the outcome. I educated a lot of people who are now thinking about motion in the initial phases of design, and not as an afterthought.
