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
Rich Mironov
How Can Product Managers and UXers Help Each Other (and Why are Product Folks so Annoying Sometimes)?
2022 • Design in Product 2022
Gold
George Abraham
Design Systems To-Go: Indigo.Design Overview and Exploring the Developer Workflow (Part 3)
2021 • DesignOps Summit 2021
Gold
Theresa Neil
Just Build Me a Dashboard! (Videoconference)
2019 • Enterprise Community
Farid Sabitov
Theme Four Intro
2022 • DesignOps Summit 2022
Gold
Nicole Aleong
Future Orientations to Everyday Life: Futures Anthropology as a Methodology
2024 • Advancing Research 2024
Gold
John Maeda
About Design Organizations (Videoconference)
2019 • DesignOps Community
Milan Guenther
A Shared Language for Co-Creating Ambitious Endeavours
2023 • Enterprise UX 2023
Gold
Erin Weigel
Get Your Whole Team Testing to Design for Impact
2024 • Rosenfeld Community
Adam Thomas
Survival Metrics – Making Change in a Fast, Data-Informed, and Politically Safe Way
2022 • Design in Product 2022
Gold
Erik Flowers
Introduction to MURAL for UX
2021 • Design at Scale 2021
Gold
Louis Rosenfeld
How AI will Change DesignOps Tooling
2023 • DesignOps Summit 2023
Gold
Mark Interrante
Collaboration Flows in Product Development
2017 • Enterprise Experience 2017
Gold
Scaling Design through Relationship Maps
2017 • DesignOps Summit 2017
Gold
Leah Buley
Closing Plenary: The Crisis of Digital
2020 • Advancing Research 2020
Gold
Theresa Marwah
How Atlassian is Operationalizing Respect in Research (Videoconference)
2020 • Advancing Research Community
DesignOps and The Great Talent War of 2021 (Videoconference)
2021 • DesignOps Community

More Videos

"Using skittles to map skills made it less personal but more fun and engaging for designers."

Shaping design, designers and teams

November 8, 2018

Sabrina Mach

"Design needs to be aligned first; if design cannot agree amongst itself, how can the bigger organisation understand it."

Sabrina Mach Nina Wainwright

How to Design Your Design Operating Model

September 29, 2021

Samuel Proulx

"AI isn’t naturally testable like traditional code, so service design will become even more important."

Samuel Proulx

Invisible barriers: Why accessible service design can’t be an afterthought

December 3, 2024

Saara Kamppari-Miller

"One of the superpowers of Ops humans is that we’re really good at taking problems and gaps and making them visible."

Saara Kamppari-Miller

DesignOps for Inclusive Design and Accessibility (Videoconference)

May 26, 2022

Briana Thomas

"Product design and development can often mirror what happens in a chef’s kitchen: lots of coordination and spinning plates behind the scenes."

Briana Thomas

The Quiet Force: Uncovering Hidden Leadership in High-Impact Design Teams

September 24, 2024

Adam Cutler

"I have to triangulate socially because Yorkshire folks are quite reserved; they won't openly admit issues."

Adam Cutler Karen Pascoe Ian Swinson Susan Worthman

Discussion

June 8, 2016

"Designers can focus on designing and developers can focus on developing — people are getting paid to do their jobs now."

Operationalizing DesignOps

November 7, 2018

Leah Buley

"Value comes not from your deliverables but from orchestrating the team’s talents to get work done faster."

Leah Buley Joe Natoli

Ask Me Anything with Leah Buley and Joe Natoli, co-authors of The User Experience Team of One (2nd edition)

October 8, 2024

Nathan Shedroff

"The most important value delivered to customers is always the qualitative value—the emotional and experiential impact."

Nathan Shedroff

Double Your Mileage: Use Your Research Strategically

March 31, 2020