Platform UI Libraries
Our Product Design teams were consistently arriving to design reviews with UI that couldn’t be built as designed. Designers felt discouraged, PMs were artificially impressed by visuals, and developers were left trying to “get close” without a clear path to implementation. This disconnect was largely the result of a major tooling transition—our design org had shifted from Sketch to Figma just as the React-based Canvas Design System kit was being introduced, creating a gap between what was being designed and what could realistically be developed.
Overview
While the documentation and planning had been kicked off, a peer of mine jumped into the project and assisted with the merge of individsual components that could directly be translated back from the Canvas kit. Together we assembled a Generated UI Library (Legacy Tooling Only) and a Bespoke UI Library (Platform supported components consuming our Design System).
Impact at a Glance
Process
Problem
Teams frequently chose an over-powered multi-select component even when it was unnecessary, leading to friction, inconsistency, and code sprawl across the platform.
- A swap from Sketch to Figma had been well received internally but the older XpressO toolkits had been abandoned during this transition period
- Product Designers had been showing up to reviews with their PM’s and Developers with designs, flows, and assets that were not buildable
- An unclear understanding of how Core platform tooling works in relation to our Design System. How enhancements get funded or how to present contributions
- Which UI kit to use based on the development team I’m working with
Approach
A systematic methodology to unify patterns and create a scalable framework that teams could easily adopt and implement consistently.
- Audit legacy prompt implementations across repos
- Define atomic → compound variant taxonomy
- Tokenize interaction + visual states
- Ship docs, decision trees, and examples
Project Gallery
