♡ Design Systems ♡ Design Systems ♡ Design Systems ♡ Design Systems ♡ Design Systems
Programs — Figma, Figma Prototyping, After Effects
Client — Stash
Design Systems Lead — Devin Wilmot
Product Designers — Bentley Wong, Allan Lopez
Engineers — Manuel Fernandez, Nicholas Konecny, Anthony M.
Client — Stash
Design Systems Lead — Devin Wilmot
Product Designers — Bentley Wong, Allan Lopez
Engineers — Manuel Fernandez, Nicholas Konecny, Anthony M.
Problem
There was no consistent motion language, motion tokens or motion documentation used at Stash. Engineers didn’t have one place to reference the interaction & motion of designs, and designers isolated in squads would create bespoke animations, often for components that already had a different animation attached to them. This created odd, unintuitive interaction patterns and inconsistencies between components — within and across platforms and ultimately costed more eng and design time. That’s a lose-lose situation.
Solution
Establish Motion as a pillar in Stash’s Design System by creating motion tokens and clear documentation, documented right in the component.
I did an audit of all motion & interaction across Stash and with my learnings, created a Motion Philosophy to help guide all motion choices at Stash.
︎︎︎Motion Philosophy
Using the philosophy as a guide, I created primitive tokens for easing curves, springs and duration. Easing curves & springs determine the speed, acceleration and deceleration of an object. Our easing & springs are split into two categories:
Efficient Easing
Use for instant, quick responses, such as functional microinteractions (controls, buttons) and standard transitions
Emotional Easing
Use for more delightful interactions and transitions, such as loaders, expand animations, and icon animations
︎︎︎Demo Easing Curves
Our duration tokens in increments of 125ms (Rapid,Fast, Slow, etc). Standardizing easing curves with duration makes the motion and interaction in our app feel the same.
Combining our easing and duration tokens along with other primitive properties (opacity, scale, position) creates our functional motion tokens, such as fadeInRapid, growMedium, slideDownFull, etc. All of the properties are self-contained inside the token’s component inside figma. The tokens are translated to code and ready for eng to referece and use.
︎︎︎Motion Library
In Action
When adding new interactions to components, these functional tokens are documented right in the component’s layer stack with 1:1 prototypes for engineers. No more searching for lost documentation links!
︎︎︎Check out the documentation for yourself
︎︎︎Chip Prototype Example
I also created a Best Practices document for anyone to view and get a quick snapshot of how to apply motion and interaction at Stash to stay on brand.
Impact
Creating a motion pillar in Stash’s Design System set Designers and Engineers up for success in creating new interaction patterns, components and animations across all platforms. They can use existing on-brand tokens to build new experiences and keep everything consistent with documantion.
The system is still ever developing and flexible enough to adapt to any change needed, down the line. New tokens can be easily added to the system and the easing curves and duration could always be adjusted system-wide with a quick update.
“motion tokens allow me to quickly understand how something needs to move and let me code that animation just by referencing a single string. its never been easier than this!” —Anthony M, Sr. Web Developer