Back to Portfolio

Twitch Design System

At Twitch I worked first as a Senior, then as a Principal Designer on the Design Systems team (known internally as Core UI). My primary focus was on the Web kit where I made all new components, maintained existing components, and wrote documentation. Core UI is on a 6 week release cycle, where both the design kit and code would go out simultaneously.

Responsibilities

Here is the stuff I did at Twitch:

• Updated the library to use Figma’s latest features, and increase ease of use while managing library size.

• Drew most of our Illustrations

• Drew nearly all of our icons for web and mobile

• Checked Core UI Engineer Pull Requests on github and in Storybook

• Built new web components. I also totally rebuilt the Web UI Kit from scratch in 2019.

• Maintained existing web components.

• Wrote component documentation

• Weekly critique meeting where my team would go through all of the new in progress designs posted to our review software, and identify potential issues with accessibility, or off pattern use of components.

• Weekly office hours where designers could sign up to ask questions about accessibility, component usage, request figma help, etc.

• Worked 1:1 with feature designers to improve their usage of the design system and to elevate the accessibility of their designs.

• Developed a series of training video tutorials explaining how to use the design system, as well as Figma generally. These videos were for asynchronous learning during COVID. The training starts at basics like explaining what a Library is all the way to advanced stuff like building Components using variables, variants, and advanced auto-layout techniques. There was even a “Figma for non-designers” that went into how engineers and PMs could best utilize Figma and learn how to feel comfortable navigating it.

• Developed a Boot Camp where I conducted 2 day, 2 hours each day training session to teach Figma to the Twitch design org.

Web UI Kit

I joined Twitch in mid-2019 just before a brand refresh called UV. Shortly after I joined I realized that the whole library had to be rebuilt. I built all the previously-existing components from the ground up using variants rather than what they had been using, which was a separate layer for each state, and the visibility turned off. In the old components changing states would reset your button text, and everything was extremely brittle. It was kinda a nightmare. Variants also allowed me to go from 96 different insert-able buttons down to 6. The design kit was also massive, so early on memory usage was a constant issue. With my re-build I was able to optimize the kit and reduce its size to a fraction of what it was.

The design kit is really large so I’ll just show a couple notable parts in detail.

The components are all divided up into pages (assembled into a single view above, but this isn’t how it exists in the kit). Each page has an overview, which shows how that component can be used, and what its capabilities are. All of the info that designers need is in Figma. Then I have it linking out to our documentation website which has more information catering to engineers. The props engineers use and the variants, designers use use a consistent set of language to make communication as clear as possible.

Buttons

Here is an example of the overview page for Button, one of the Twitch primitives.

In Figma the button’s variants are set up so they match the props that engineering uses in code. There are also quality of life features thanks to Figma’s component props, so if I have the left icon disabled it doesn’t show me the options for icons since I don’t need it at that moment.

Media Cards

Media Cards are a bit more complex than buttons and represent one of the system’s many patterns. Patterns assemble multiple primitives like Tag, Avatar, Core Text, etc into a more fleshed out UI opinion. This pattern specifically posed some unique problems when building it in Figma, such as Figma not natively supporting a forced aspect ratio that works within an auto-layout. I eventually found a solution through the “Friends of Figma” Slack community and the users Chudo and Solo Cube. You can see Chudo scrolling through the conversation in this “Pushing Figma to its Limits” presentation from Config 2021.

You can see me at the end being supportive, again I didn’t invent this, but I was among the first to use it. The solution uses some quirks with auto layout to use either a zero pixel frame or zero pixel vector path to stretch at a certain angle that when paired with “fill container” horizontally, and “hug content” vertically, produces a frame that resizes at a specific ratio. For instance, rotating the vector path to 30% produces a 2:1 ratio, which you can then stack to get a perfect square. Rotating the vector path to 34.23° produces a ratio that is within a margin of error of 16:9. You can get all sorts of ratios like 4:3, 3:2 etc by stacking 2:1, or 1:1 aspect ratios in different orientations as well.

With aspect ratio solved, I made components for all of the art assets and have those living in a separate library specifically for art. These components are just simple images, no forced ratio. The ratio is inherited from the aspect component this art is consumed by. This allows any art asset to be swapped with any other and makes managing the art assets themselves really straight forward. With each art asset categorized into a folder by adding a “/” to the naming in Figma (e.g. 16:9 Art/Sekiro) and using an instance swap component prop within our “aspect” component it allows easily swapping art for anything of the same selected aspect ratio.

Variables

During Config 2023 Figma announced variables. The following day I lead an initiative to get our entire set of design libraries update to variables. I made a new theme file with all of our previous theme files combined, and updated the web library myself. I then trained the other designers on my team how to do it for the mobile library. This was a huge success, and resulted in our library sizes being cut in half. It also made it far easier for feature designers to use the Design System, since now they can just set a containing element’s layer mode to the desired theme and all of the screens inside that container automatically change.

The way I have it set up is so there is a Core Themes file where all the color variables live, and all libraries consume those colors so Web, Mobile, and TV apps all ingest the same color tokens.

Training

Asynchronous video training

Right after COVID working from home was pretty new to everyone so I wanted to provide a method of self-directing a suite of lessons. By the time I was done I had hours of tutorials available. I would update these videos every time there was a major change to Figma.

Here is a full list of the lessons which total a little over 4 hours in run-time:

• Figma for Non-Designers

• Libraries

• Color

• Typography and Spacing

• Frames, Groups, and Sections

• Components

• Breakpoints and Grids

• Auto-Layout

• Core UI System Structure

• Core UI Primitive Deep Dive

• Core UI Pattern Deep Dive

• Drawing Icons

• Creating Components

• Using UV Glow (Twitch’s Illustration Style)

• Memory Usage in Figma

Boot Camp

In mid-2023 I also held my first Core UI Boot Camp which was 4 hours over 2 days. In Boot Camp I’d give a presentation about a topic, then have all the participants complete a worksheet about that topic to reinforce the lesson. This Boot Camp was a mandatory training for everyone in the design org, and was a lot of fun. This is a screenshot of the first worksheet where I had everyone search for a secret component and follow me to the worksheet library file.