Rio Design System library
Building the Rio Design System library in Figma from the ground up to establish a single source of truth for foundational styles, atomic components, and system patterns — unifying Amazon retail design teams, automating spec compliance via custom tooling, and scaling component adoption.
Product
Rio Design System
Team
Rio Design System
Role
UX Design
Timeframe
2021 - 2025
Status
Launched
The customer(s)
Product Designers and Builders: Teams needing immediate access to standardized design assets to build features within Figma.
End Shoppers: Customers who interact with the final product interfaces across the store.
Problem / Opportunity
When Rio was delayed in onboarding to Figma, external teams began moving ahead of the design system in replicating its components.
A centralized design system library containing the required design assets was crucial to help builders design their various experiences, and more importantly, stay aligned to a single source of truth.
Solution
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. With 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 and can inherit future updates when available.
Customer benefits
Single Source of Truth: Designers gain an official, reliable library of foundational styles, atomic components, and system patterns.
Streamlined Design Workflow: Teams save significant effort by leveraging out-of-the-box, spec-compliant solutions instead of creating custom assets from scratch.
Architecture
Scope and constraints
Time - The Rio team gained access to Figma later than most other teams that use the design system. As such, teams pushed forward on their own. To minimize unofficial Rio libraries from spreading too broadly, we needed to expedite library completion.
Foundations - The library needed to cater to teams that use Rio foundations only, and not components or patterns.
User flow and IA: As most designers were unfamiliar with Figma at the time, I pursued a library architecture that closely resembled what we published in Sketch. The decision was to allow designers to ease into the transition while they ramp up on the new tool.
Original library structure, mirroring previously-owned Sketch library to support ease of transition to Figma.
Library architecture (2021)
Simplified with foundational styles centralized from Rio design tokens.
Library architecture (2025)
Maintenance and tooling
The library represents the entire design system. As such, I also worked closely with our design team, DTs, and end builders to ensure the ongoing health of each library. This includes managing mechanisms for bug reports, gathering feedback, streamlining maintenance processes, and delivering recurring updates to the community.
Additionally, I proposed and collaborated on a rule checker plugin to help designers stay aligned to the design system.
Continuing explorations
To optimize the library workflow, I continually explored new workstreams and areas of improvements: from proposing new libraries and defining partner contribution to streamlining the movement of component designs from exploration through to production.
From 2022. An attempt to structure partner contributions into the design system and Figma library.
Contribution model
Contribution workflow (Experimental designs → production assets)
From 2025. An exploration to structure a workflow that streamlines the evolution of experimental designs to production assets from both Rio and partner teams.
Impact
The quantitative impact are compiled from Figma’s analytic tool which can only look at metrics up to the last 365 days due to its rolling analytics window.
The data here was collected at the end of 2024, when we logged our annual usage.
Quantitative impact in 2024
+350%
Weekly component insertions grew from ~80k (Q1) to >370k at peak usage (Q4)
This demonstrated widespread adoption across Amazon retail design teams
10x
Pattern insertions grew from <20k to >200k weekly
This proved designers progressed from atomic components to leverage system patterns
1:1
Foundation usage grew in parallel with components (~250k peak weekly insertions)
This showed that teams worked to maintain design system compliance across working files
Qualitative impact
Working closely with retail teams to align and adopt the updated design system, we’ve also helped change builders’ mindsets from designing locally to following the same system in an effort to build a cohesive shopping experience.
Learnings
Take time to learn and work closely with partners: Rather than rushing to stop the flow of unofficial Figma libraries from being shared too broadly, we should’ve been transparent about progress and collaborated with teams that had created their own Figma components to set expectations. Perhaps this could’ve even included utilizing what’s already created as a starting point to make improvements rather than creating an official Rio library separately.
Leaning into the Figma mental model: Rather than replicating Sketch to address transition concerns, taking the opportunity to make a clean break and reevaluate the state of the current IA may have helped to create a more scalable long-term solution - e.g. combining foundation and component libraries, or combining production and pre-production libraries
Learning period: Recognizing that regardless of the IA, designers will go through a learning period with Figma, so over-indexing on familiarity with Sketch wasn’t a crucial decision.