Rio Design System Library — Felix Cheng

Rio Design System Library

Created in Figma, The Rio Design System library includes the foundational styles, components, and pattern templates designers need to deliver a consistent and world-class shopping experience. I owned the creation and ongoing maintenance of this library, and collaborated on additional tools to support an efficient design workflow.

For designers and developers to adhere to the rules of our design system, they not only need documented guidance, but also design assets they can use to build their varied experiences.

To address this need, I built the Rio Design System library from the ground up, and provided a source of truth for all of our design decisions. The assets reflected our foundational styles, atomic components, and system-level patterns. Using these, designers have out-of-the-box solutions without the need to create custom designs, and are assured their designs visually aligned to the system with all correct specs.

The library represents the entire design system. As such, I worked closely with our design team, DTs, and end builders who use the Rio Design System to ensure the ongoing health of every asset designers need in their daily work. This includes managing mechanisms for bug reports, gathering feedback, streamlining maintenance processes, and delivering recurring updates to the community.

As owner of the design system library, I understood the needs of designers who use our assets as well as the need for guardrails to protect the design system. To optimize the design workflow, I advised and worked with our team of design technologists on the requirements and execution of additional tools to further enhance our toolkit.

I proposed and collaborated on a rule checker plugin to ensure designers don’t deviate from the system foundations, and a handoff tool that maps our design system components in Figma to the correct markup and CSS of our primary implementation.

Rio Design System - Mini Makeover