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
Jennifer Strickland
Fireside Chat: How Design Addresses a World on Fire (Videoconference)
2022 • Civic Design Community
Bria Alexander
Day 3 Welcome
2024 • DesignOps 2024
Gold
Katie Johnson
Disrupting generative AI products with just-in-time consumer insights
2024 • Designing with AI 2024
Gold
Rebecca Gimenez
Work in Progress: Service Design at Airbnb
2024 • Advancing Service Design 2024
Gold
Tanya Snook
Designing the team experience: Building culture through onboarding (Videoconference)
2021 • Enterprise Community
Caitlyn Hampton
Compass 101: Growing Your Career In A Startup World
2021 • Design at Scale 2021
Gold
Kara Kane
Theme One Intro
2022 • Civic Design 2022
Gold
Sarit Geertjes
People, not Petri Dishes: Stories from a Research Recruiter (Videoconference)
2019 • DesignOps Community
Christian Crumlish
Morning Insights Panel
2022 • Design in Product 2022
Gold
Mac Smith
Measuring Up: Using Product Research for Organizational Impact
2021 • Advancing Research 2021
Gold
Sam Proulx
Understanding Screen Readers on Mobile: How And Why to Learn from Native Users
2023 • Enterprise UX 2023
Gold
Theresa Neil
Designing for Wellness: Specializing in Healthcare (Videoconference)
2024 • Rosenfeld Community
Bria Alexander
Opening Remarks Day 1
2024 • Advancing Research 2024
Gold
Scott Jensen
Short Take #2: UX/Product Lessons from Your Industry Peers
2022 • Design in Product 2022
Gold
Kate Kalcevich
Integrating Accessibility in DesignOps
2024 • DesignOps 2024
Gold
Louis Rosenfeld
Becoming a Civic Designer: Making the Move from Private to Public Sector
2022 • Civic Design 2022
Gold

More Videos

Alex Hurworth

"The health of our planet directly influences our health and survival."

Alex Hurworth Bonnie John Fahd Arshad Antoine Marin

Designing a Contact Tracing App for Universal Access

October 23, 2020

Laine Riley Prokay

"Time commitment for onboarding interns was close to 25%, maybe 50%, of at least two weeks, easing as they became familiar with roles."

Laine Riley Prokay Lisa Gordon

Carving a Path for Early Career DesignOps Practitioners

September 9, 2022

Eniola Oluwole

"People felt designs were self-evident and too much explanation was a barrier to using the patterns."

Eniola Oluwole

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

October 24, 2019

Nathan Shedroff

"You need to learn the vocabulary, tools, and processes your peers know and understand where they are inadequate."

Nathan Shedroff

Double Your Mileage: Use Your Research Strategically

March 31, 2020

Sam Proulx

"Voice control on mobile goes beyond digital assistants and can fully control the device for users who cannot use touch."

Sam Proulx

Mobile Accessibility: Why Moving Accessibility Beyond the Desktop is Critical in a Mobile-first World

November 17, 2022

Feleesha Sterling

"The program creates predictability so teams know when to submit questions and when findings will come."

Feleesha Sterling

Building a Rapid Research Program (Videoconference)

May 18, 2023

Neil Barrie

"You have the power, like Navy Seals of user research, to influence the biggest issues of our time, one interaction at a time."

Neil Barrie

Widening the Aperture: The Case for Taking a Broader Lens to the Dialogue between Products and Culture

March 25, 2024

John Devanney

"You can’t measure long-term customer relationship value with short-term KPIs."

John Devanney

The Design Management Office

November 6, 2017

Katy Mogal

"If they don’t give you a seat at the table, bring a folding chair."

Katy Mogal

But Do Your Insights Scale?

March 12, 2021