Nitro Design System
One token set and a Figma component library for Pluto TV's TV, web, tablet and mobile apps, synced from Figma into React, iOS and Android.
When
2023 – 2024
Platform
Smart TV • Web • Touch Devices
Technologies
Figma • Tokens Studio • Supernova
At a Glance
The challenge
Four platforms, one source of truth
Pluto TV ships on TV, web, tablet and mobile. The system had to serve every screen and the teams building each one.
My role
Owner, 2023–2024
Senior Design Systems Designer. I set the three-tier token structure, built the Figma-to-code pipeline on Supernova, and shipped the Figma component set for 12 product designers and about 300 engineers.
The impact
952 card inserts in Figma
As of August 2024, across ~12 designers. The cross-platform team took the tokens into React, iOS and Android without a shim.
Background
Pluto TV is a free, ad-supported streaming service owned by Paramount Global. It carries 250+ live channels and thousands of on-demand movies and shows, and it needs neither a subscription nor an account.
It runs on iOS, Android, Apple TV, Roku, Amazon Fire, smart TVs, and in any browser.
Token Structure
I set up a three-tier token structure with each tier in its own Figma collection. The base collection holds 254 variables and the component collection 543, with the system tier aliasing between them.
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 opens a pull request against 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.
Accessibility
Accessibility was a standing requirement rather than a late check. The system's share of it was color: we worked the palette's contrast up to WCAG 2.1 AA. Pluto TV also had a dedicated accessibility team that owned the broader audit work, and their review was one of the gates a component passed before it reached the system.
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. Consolidating them into one component gave every designer the same card to start from on every platform.
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.
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, so what shipped matched what was designed.
Looking Back
What I would change, and what was still open when I left.
- A tighter feedback loop with engineers. I wanted a shorter path between tokens leaving Figma and hearing how they landed on each platform.
- Supernova's token transformation did not support every platform we shipped to.
- The component token migration was still in progress when I left.
Contact
Building a design system? Let's talk.
Start a conversation