ESPN moved a broadcast graphics system with roughly two trillion combinations into Figma — a field manual for a giant migration, run one yard at a time.
ESPN's migration playbook: moving to Figma w/ One North ft. Matt Roger & Elliott Muñoz | Config 2026 · Elliott Muñoz
17 min total·Actually worth watching closely: ~4 min·2 must-watch clips
- 0:12 – 3:10Listen
From ancestral audiences to the living room
Opens with the history of watching sports: the earliest audiences were just family and townspeople in immediate proximity, then crowds grew and people traveled long distances to games, then radio took sports off the fields for the first time and people could listen at home, and TV arrived a few decades later.
Each new technology expanded the audience further and moved sports toward the screen — the underlying reason to unify the broadcast visuals.
Pure narrative setup; at 111s just take in the scale comparison by ear — the slides carry no separate information.▶ Jump to 0:12 - 3:10 – 5:00Skim
ESPN's rebrand and the origin of UIF
Rather than starting a rebrand from scratch, ESPN leaned into its iconic elements — the red, the 7-degree angle, the speed line, the dynamic cones — and one of the first applications of the rebrand is the universal insert framework, UIF for short.
Traditionally insert packages are created on a sport-by-sport basis, so basketball looks different from football; UIF replaces that with one look, further distinguishing ESPN as a premium sports destination.
Slides at 199s and 221s show the brand elements and insert graphic examples — a glance is enough to anchor the visuals; the argument itself comes through the audio.▶ Jump to 3:10 - 5:00 – 7:14Listen
Why insert graphics are hard
Breaks down the constraints: inserts are any visual placed over game content, rarely produced in advance and instead generated and played in real time, so the information has to be concise, informative and above all instantly readable — and almost every insert includes some form of team data, which brings individual color assets and wildly different text lengths, say UNC versus Mississippi State.
Even one color gets complicated: literally hundreds of teams, each with its own specific shades, guidelines, usage rights and legal teams making sure every one is shown correctly.
Mostly spoken argument; at 401s the team data example is fully carried by the narration, so there's no need to watch the screen.▶ Jump to 5:00 - 7:14 – 9:20Skim
Quantifying the problem: two trillion permutations
Walks the scale up step by step: 8 insert types split into 140 sub-structures, and across 50+ sports and leagues that becomes up to 7,000 individual designs; add all the teams in each of those sports and leagues, then every player's details and stats, past and present, and you land at roughly 2 trillion permutations.
The complexity of a big migration is combinatorial — you have to size it honestly before you can design a workable way to break it down.
The slide at 480s steps through the numbers as they scale up; scanning it gets you the orders of magnitude faster than listening alone.▶ Jump to 7:14 - 9:20 – 12:00Listen
Discovery, and one yard at a time
Start with a discovery phase to get your heads into the work, take a view of the field and figure out exactly what you're migrating; the audit surfaced the core pain point — tools that couldn't let designers create in the cloud, so they worked on individual machines and files went out of sync — and then the problem was divided design-system style into the smallest parts and tackled one at a time.
Against overwhelming complexity the only way forward is one yard at a time — audit the scope first, then build back up from the smallest units.
This stretch is methodology with no key visual to catch; just follow the reasoning behind the decomposition.▶ Jump to 9:20 - 12:00 – 14:14Watch
Dissect the old files, rebuild in Figma
The migration path: first dissect the original Photoshop file, noting every treatment, every glow, every mask and how the content is organized, then rebuild from scratch in Figma — team colors and logos configured as themes, team data defined as variables, everything glued into components and variants.
It's a rebuild, not a port: themes, variables and components are built in from the wireframe stage rather than bolted on afterward.
At 757s the full flow is shown, from collecting team colors through themes, variables and component variants — the stretch most worth actually watching.▶ Jump to 12:00 - 14:14 – 16:54Listen
Lessons: compounding, the organization, never done
Three closing lessons: design systems compound, and after the first pass each following one got more and more efficient; the organization has to change along with the software, since education and coaching set the ceiling on the system's value; and the work is never fully done.
None of it matters if the organization doesn't change along with the software — your design system is only as good as the designers using it.
Pure takeaways and spoken argument with no demo visuals — good for listening through and walking away with the three lessons.▶ Jump to 14:14