Summary
An essential part of creating a Design System is to make distribution and content flow sustainable. When the task is bringing the joy and community of gaming to everyone on the planet, the challenge gets massive! How can DesignOps and Automation become a facilitator for this challenge? Join Senior Software Engineer & Designer Luca Rager from Xbox as he takes us through their innovative take on design systems. Luca will illustrate how Sketch’s flexibility and modern DesignOps automation has allowed Xbox to package, theme and easily distribute component libraries. Furthermore, how their system bridges the gap between the Xbox Design System team and the wider product teams at Xbox.
Key Insights
-
•
Xbox’s design system supports four themes including high contrast to ensure global accessibility.
-
•
The component library uses a ‘foundations’ swapping method for theming instead of override reliance.
-
•
Each component and foundation is stored as its own Sketch file for clarity and iteration speed.
-
•
Clyde is a custom-built automation tool that processes component updates and generates ready-to-use kits for designers.
-
•
Automation via Clyde extracts tokens from design files to seamlessly integrate with engineering workflows.
-
•
The design system team is multidisciplinary, blending design, research, accessibility, and engineering expertise.
-
•
The system balances complexity with usability, avoiding over-engineering to foster easier adoption by product teams.
-
•
Governance allows product teams to contribute new components, promoting extensibility and shared ownership.
-
•
Accessibility experts work closely within the design process, not just as consultants, ensuring better documentation and audits.
-
•
Smart Layout in Sketch is extensively used to create flexible, responsive components.
Notable Quotes
"Gaming is for everyone, anywhere."
"A button is easier than a human butter and jelly sandwich since it only has two ingredients."
"Rather than rely on overrides to achieve theming, we do it by swapping out these files which we call foundations."
"Our design system ended up looking a lot like this image regardless of whether you extend it or customize it."
"As designers, we have empathy to solve the people problems that come with complexity."
"Clyde runs every time a component gets updated, packaging all themes with every foundation into kits."
"We have direct control over the design data, extracting tokens for engineering while packaging libraries for designers."
"Accessibility and research are very much part of the organization, not just something we consult."
"The governance model allows product teams to propose new components that everyone can then use."
"Being a hybrid person—both designer and engineer—helps me bridge those two worlds in this design system."
Dig deeper—ask the Rosenbot:
More Videos
"The majority of the participants last through the six-month commitment with only about 5% removed for low engagement."
Wyatt HaymanGlobal Research Panels (Videoconference)
August 8, 2020
"Instead of choosing colors and then checking contrast, we define target contrast ratios first and generate colors accordingly."
PJ Buddhari Nate BaldwinMeet Spectrum, Adobe’s Design System
June 9, 2021
"Artifacts of the future help us feel and see the richness of a moment and grasp the change we hope to have."
Sarah GallimoreInspire Progress with Artifacts from the Future
November 18, 2022
"Knowing your subject matter as a UX leader is just as important as knowing your craft."
Peter MerholzThe Trials and Tribulations of Directors of UX (Videoconference)
July 13, 2023
"Hiring local community members as researchers in crisis zones creates safer environments and authentic stories."
Dr. Jamika D. Burge Mansi GuptaAdvancing the Inclusion of Womxn in Research Practices (Videoconference)
September 15, 2022
"There’s been a convergence over the last years because everybody’s got a mobile device now and expects a certain kind of experience."
Amy MarquezINVEST: Discussion
June 15, 2018
"If you remove death in a game like Dark Souls, the game breaks — death is part of the challenge and fun."
Dane DeSutter Natalie Gedeon Deborah Hendersen Cheryl PlatzBeyond the Console: The rise of the Gamer Experience and how gaming will impact UX Research across industries (Videoconference)
May 17, 2024
"Stop saying rest is a luxury or a privilege. It is not. It is a human right."
Zariah CameronReDesigning Wellbeing for Equitable Care in the Workplace
September 23, 2024
"ADHD isn’t a deficit of attention, but trouble regulating it, which leads to hyperfocus on interesting tasks."
Jessica NorrisADHD: A DesignOps Superpower
September 9, 2022
