Rosenverse

This video is only accessible to Gold members. Log in or register for a free Gold Trial Account to watch.

Log in Register

Most conference talks are accessible to Gold members, while community videos are generally available to all logged-in members.

Empowering Gaming at Scale: How Xbox Builds Powerful, Automated, and Distributed Design Systems with Sketch
Gold
Thursday, September 30, 2021 • DesignOps Summit 2021
Share the love for this talk
Empowering Gaming at Scale: How Xbox Builds Powerful, Automated, and Distributed Design Systems with Sketch
Speakers: Luca Rager
Link:

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."

Ask the Rosenbot
Stephanie Wade
Building and Sustaining Design in Government
2021 • Civic Design 2021
Gold
Nicole Wright
Democratizing Research at HoneyBook
2022 • Advancing Research 2022
Gold
Sam Yen
Driving Organizational Change Through Design? Do more of this and less of that
2017 • Enterprise Experience 2017
Gold
John Paul de Guzman
10k Screens Later: How We Became a Data-Driven Design Organization
2024 • DesignOps 2024
Gold
Amy Evans
How to Create Change
2024 • DesignOps 2024
Gold
Amanda Kaleta-Kott
The Joys and Dilemmas of Conducting UX Research with Older Adults
2022 • Advancing Research 2022
Gold
Hugh Dubberly
Problems with Problems: Reconsidering the Frame of Designing as Problem-Solving (Videoconference)
2019 • Enterprise Community
Crystal Yan
Building a Customer-Centric Culture
2020 • Advancing Research 2020
Gold
JJ Kercher
A Roadmap for Maturing Design in the Enterprise
2018 • Enterprise Experience 2018
Gold
Victor Lombardi
Bridging Design and Climate Science (Videoconference)
2024 • Climate UX Interest Group (Rosenfeld Community)
Spencer L. A. Stultz
Why Social Justice Frameworks are Necessary for Successful DEI/JEDI Initiatives
2023 • DesignOps Summit 2023
Gold
Kim Lenox
Leading Distributed Global Teams (Videoconference)
2019 • Enterprise Community
Rebecca Topps
Planning and conducting remote usability studies for accessibility (Videoconference)
2020 • Advancing Research Community
Sarah Brooks
Fireside chat with Sarah Brooks and Jen Pahlka (Videoconference)
2021 • Civic Design Community
Kate Koch
Flex Your Super Powers: When a Design Ops Team Scales to Power CX
2021 • DesignOps Summit 2021
Gold
What DesignOps Can Learn From DevOps
2017 • DesignOps Summit 2017
Gold

More Videos

"We want teams to have autonomy and power to make pivot, shelve, and proceed decisions, not leadership dictating."

Standardizing Product Merits for Leaders, Designers, and Everyone

June 15, 2018

Simon Wardley

"I realized I was just making it up despite the company’s growth."

Simon Wardley

Maps and Topographical Intelligence (Videoconference)

January 31, 2019

Sandra Camacho

"White supremacy is the belief system of the superiority of whiteness that can embed itself in algorithms."

Sandra Camacho

Creating More Bias-Proof Designs

January 22, 2025

Darian Davis

"Taking responsibility starts with an apology and seeking regular feedback."

Darian Davis

Lessons from a Toxic Work Relationship

January 8, 2024

Fisayo Osilaja

"My goal today is to showcase how generative AI can go beyond just speeding up our processes and actually catapult us in our career."

Fisayo Osilaja

[Demo] The AI edge: From researcher to strategist

June 4, 2024

Uday Gajendar

"Nobody wants to buy or use a sloppy product, especially when enterprise users engage daily for hours."

Uday Gajendar

The Wicked Craft of Enterprise UX

May 13, 2015

Davis Neable

"Relying on a single content strategist was a strategic mistake that created a single point of failure."

Davis Neable Guy Segal

How to Drive a Design Project When you Don’t Have a Design Team

June 10, 2021

Eniola Oluwole

"If you come with a big idea, they’ll try to dial you back to the smallest iota you can test first."

Eniola Oluwole

Lessons From the DesignOps Journey of the World's Largest Travel Site

October 24, 2019

Aurobinda Pradhan

"We believe tracking design metrics aligned to business goals is important to demonstrate design’s impact."

Aurobinda Pradhan Shashank Deshpande

Introduction to Collaborative DesignOps using Cubyts

September 9, 2022