Nitro Design System
The design system for Pluto TV, a multi-platform streaming application that includes TV, tablet, mobile, and web.
When
- 2023 – 2024
Platform
- Smart TV
- Web
- Touch Devices
Expertise
- Design Systems Design
Tools and Tech
- Figma
- Token Studio
- Supernova
Background
Pluto TV is a free, ad-supported streaming service owned by Paramount Global. 250+ live channels, thousands of on-demand movies and shows, no subscription, no account.
It runs on iOS, Android, Apple TV, Roku, Amazon Fire, smart TVs, and in any browser.
My Role
I was the Senior Design Systems Designer on Nitro — the day-to-day owner of a system used by 12 product designers and around 300 platform engineers across web, smart TV, and mobile.
I integrated contributions from the product designers, managed the tokens and pipeline, and spent a fair amount of time helping designers and engineers actually use the system instead of working around it.
Design Tokens
A new cross-platform team came to us. They wanted a component library for Pluto TV's web and smart TV apps with one React Native codebase shipping everywhere.
We used the moment to build out the token system properly. Not just for them. For every designer and engineer who'd been informally pulling values out of Figma because they didn't have a better option.
Token Structure
I set up a three-tier token structure with each token tier in its own collection:
Base tokens
Raw primitives. Hex, px, ms. Everything else references these.
System tokens
Semantic aliases for how Pluto TV uses the primitives.
Component tokens
Per-component decisions composed from system tokens.
Token Types
In our initial design token release, I created tokens for these categories:
Token Pipeline
I built a Figma-to-code pipeline using Supernova.
- The Supernova variables plugin pulls tokens out of Figma.
- Supernova transforms them into code and pushes to our GitHub repo.
Design Tokens Impact
Drop-in adoption
The cross-platform team integrated the tokens without custom shimming on either side.
Designer productivity
Semantic typography tokens replaced abstract names. Designers had something concrete to reach for instead of eyeballing it.
Cross-team pull
Other engineering teams asked for the tokens in their own codebases without us pitching it.
Figma Components
I shipped a set of components to give the product design team something concrete to build with.
The card was the most-requested by a wide margin. Cards show up everywhere in Pluto TV: channel guides, browse rows, detail screens, search results, in dozens of variations across four platforms. Pinning that one component down moved more for the product designers than anything else we could have done.
Design Process
The design system team was small. Most of the contribution work happened upstream of us, in the product design org. By the time a component reached the system, the visual and behavioral decisions had been worked out across earlier design, system, and accessibility reviews. Our job was to standardize the result and ship it.
The component design process:
Audit
Find every existing instance and screenshot the variations.
Note
Track observations as you go. They become the documentation.
Explore
Use the audit to consolidate and refine the component.
Document
Usage notes, examples, constraints. Whatever ships with it.
Feedback
Loop in designers and engineers. Iterate until it lands.
Figma Components Impact
952 Figma inserts
Card component adoption as of August 2024, across ~12 designers.
Engineering reference
Engineers built from the same design, tokens, and docs the designers used. No more drift between what was designed and what shipped.