DESIGN OPS & ARCHITECTURE
Scalable Design System
COMPANY
NDA B2B Client
ROLE
Product Designer
TEAM
PM, Frontend
TIMEFRAME
2020
Description
Developed and maintained a comprehensive Design System from scratch, evolving it from a basic UI Kit into a token-based architecture. This system became the backbone of the product, enabling seamless collaboration between design and engineering while supporting complex B2B interfaces like editors and analytics dashboards.
Timeline
Ongoing evolution over 5 years.
Background
The product suite had scaled rapidly over 5 years, accumulating significant design debt. We faced a "Frankenstein UI": 50+ shades of blue, inconsistent input behaviors, and no shared code between teams. Designer (me) wasted 40% of their time reinventing basic components, while developers struggled with pixel-pushing instead of focusing on logic. The goal was to transition from a static UI Kit to a living, semantic system that could support complex B2B interfaces like editors and analytics dashboards.
Process
The transformation began with the introduction of Figma Variables and a complete overhaul of the visual foundation. I led the migration from static styles to semantic tokens, establishing a common language between design and code.
Custom Iconography
I used a bespoke icon set (over 200 icons) from scratch to ensure visual consistency across the platform. Each icon was optimized for pixel-perfect rendering at small sizes (16px, 20px, 24px) to ensure legibility in data-dense interfaces.
Token Architecture
Defined a comprehensive set of variables for not just colors, but Spacing, Corner Radius, and Typography styles. This semantic layer allows us to tweak the entire product's "feel" (e.g., density or roundness) by adjusting a few primitive values, paving the way for painless future rebranding.
Interactive by Default
I leveraged Figma's prototyping features to embed interactions directly into components. Dropdowns open, buttons press, and inputs focus "out of the box," allowing designers to build clickable, high-fidelity prototypes without wiring up hundreds of connections manually.
Developer Handoff
Regular syncs with the frontend team and strict Storybook reviews ensured that the React implementation matched the Figma logic 1:1, including all states (Hover, Focus, Error) and edge cases.
Solution
A living library covering the entire product spectrum: from atomic elements to complex organisms like File Managers, Editors, Analytics and Viewers.
Templates
Beyond buttons, I built sophisticated interactive components for the core product areas: content editors, file managers, and analytics charts. Each component came with pre-defined states (Hover, Focus, Error, Disabled, Loading) and properties, drastically reducing the time needed to assemble new screens.
Synced with Code
The system is fully mirrored in Storybook. A change in a Figma token (e.g., primary-action-bg) implies a direct update in the developer documentation, reducing communication overhead and ensuring that Design and Code are always in sync.
Theme Ready
Native support for light/dark modes via variable collections. This future-proof architecture allows the product to support user-preferred themes or high-contrast accessibility modes with zero code refactoring.
Results
The system transformed how the organization builds software, shifting the focus from "fixing UI bugs" to "shipping value."
40% Faster Design
High-fidelity prototyping now takes minutes instead of hours, as designers drag-and-drop complex organisms rather than drawing rectangles.
QA Efficiency
Visual bugs dropped significantly because developers reuse tested components instead of writing custom CSS.
Scalability & Consistency
The system successfully supported the rollout of major new modules (like the new Analytics Dashboard) without needing new fundamental UI work, proving its flexibility.