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.


*Since slots have been introduced to Figma I've changed the component to use that 🙌.

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