Xbox Design System
Project at a glance
Role & team
Designer ยท Xbox Design System
Core challenge
Inconsistent visuals, outdated design patterns, and fragmented component libraries
Key outcomes
Figma library management, component documentation, code PRs for tokens & UI
Overview
I helped build and nurture the early foundations of the Xbox design system. My day-to-day focused on making the system feel cohesive, easy to use, and directly connected to code. From managing our main Figma library and crafting clear component guidelines to submitting code PRs for design tokens, I worked across the full design-to-development spectrum to keep our product teams aligned.
Contributions & impact
Component architecture & library
Managed our entire component library in Figma, creating and updating foundational elements like Checkboxes, Radio Buttons, Game Cards, and navigation elements. Built every component with flexibility in mind to handle controller, touch, and mouse states seamlessly.
Documentation & guidance
Authored clear, comprehensive component documentation detailing usage rules, focus states, layout behavior, and accessibility standards so partner teams could build with confidence without second-guessing specifications.
Bridging design to code
Didn't just stop at Figma designs. I submitted code PRs directly to update components and maintain our variable system, keeping design tokens tightly synced between design files and live production environments.
Unified Xbox experience across all surfaces and devices
System-first approach
Figma library management
Kept our main Figma library organized, up to date, and scalable. Ensured components were cleanly structured with auto-layout, clear properties, and variable modes to streamline daily workflows for designers across teams.
Hands-on implementation
Maintained a true feedback loop between design and code. By jumping into the codebase to open PRs for variable updates and component tweaks, I helped reduce handoff friction and accelerate release cycles.
Reflection & next steps
System impact
Pairing well-maintained Figma components with clear documentation and direct code contributions created a reliable ecosystem that made designing and building consistent Xbox interfaces much faster.
Where it led
The foundational components, variable systems, and code handoff processes built here laid the groundwork for larger surface overhauls, including unifying the entire Xbox settings experience.