Carousel component

There were 49 carousels in our apps in design and code. 😬
With no standardized carousel in our system, feature teams were creating one-off designs per use case, resulting in inefficiencies and inconsistent layouts across supported applications.

We created one design (with variants) to accommodate all use cases in our app.
I led the design effort across all platforms (🤖 🍎 🕸️) to standardize the component, leveraging Figma variables to enable easy padding and item spacing using our spacing tokens. To ensure 1:1 design parity with engineering, I utilized ProtoPie and Figma to document the component's designs and micro-interactions.


In a month & a ½ we reached seven adoptions.
We helped enable the launch of a major new feature. On web, we replaced four carousels, and one each on Android and iOS. We still have a lot more opportunity with existing carousels and new features on the way with more replacements planned.

Opacity masks replaced overlay fades, creating smoother transitions in both light and dark themes and whichever elevation it was used on.