Skip to main content
Figma

ESPN's Migration Playbook: The Move to Figma with One North

by Matt Rogers July 9, 2026

For all of human history, sports have always been a way to bring people together, players and audiences alike. But over time, the scale of those audiences has changed dramatically. What started as local gatherings has evolved into a global, always-on experience, with billions of viewers tuning in on their TVs, phones, and laptops around the clock.

For ESPN, delivering a cohesive, premium experience at that scale requires more than great content. It requires consistency, speed, and flexibility in how that content is created and presented.

Last year, ESPN kicked off a massive brand overhaul with the goal of unifying every platform, experience, and program they manage. Part of that effort included the creation of a Universal Insert Framework. These insert graphics appear during live broadcasts in the form of clock and scoreboards, player stats, and game overlays and historically had been generated on a sport-by-sport basis. While that allowed for creative flexibility, it also introduced inefficiencies, inconsistencies, and significant operational overhead. To help streamline this process, ESPN brought in One North.

 

 

As one of the first certified Figma Signature Service Partners, we have visibility into how organizations approach challenges like this across industries. We have supported many teams through design system transformations and tool migrations, but this engagement stood apart. We were not just moving files into Figma. We were helping reimagine how a global media brand could systematize millions of design permutations across teams, leagues, and real-time data inputs.

 

 

The scale became clear quickly. A handful of insert types expanded into hundreds of layouts, thousands of design variations, and ultimately millions, even trillions, of potential combinations when factoring in teams, players, and live stats. Even something as simple as color became complex, with hundreds of team-specific variations and strict brand requirements.

To meet this challenge, we approached the work with a design systems mindset. Rather than retrofitting legacy files, we started from the ground up in Figma. We broke designs down into their smallest elements and rebuilt them piece by piece, moving from tokens to components to templates and themes. We established a foundation for managing dynamic team data, created scalable component structures, and iteratively built a system that could support both current and future needs.

Along the way, we uncovered opportunities to improve workflows. Moving from locally stored files to Figma’s cloud-based, collaborative environment improved alignment across teams. Establishing a shared library reduced duplication and inconsistencies. Defining a repeatable system made it easier to create and maintain designs at scale.

 

 

What started as a complex migration became a broader shift in how design, data, and tooling come together to support real-time experiences. By the end of our engagement, ESPN had a working design system in Figma, a growing component library, and a new workflow that set the foundation for continued evolution.

One of the biggest takeaways from this work is that challenges at this scale can feel overwhelming, but they become manageable when you break them down into smaller, systematic parts. Treating complex problems with a design systems lens, focusing on foundations first, building incrementally, and iterating continuously, allows teams to make meaningful progress even in the face of massive complexity.

Another key lesson is that tools alone do not drive transformation. Success requires investment in people, process, and education. Ensuring teams are aligned, supported, and empowered to adopt new ways of working is just as important as the system itself.

Like any design system, this work is never truly finished. It will continue to evolve alongside ESPN’s needs, their content, and the expectations of their global audience. We shared more about this work at Figma’s Config 2026. You can watch the full session to see how the system came together and what we learned along the way.

 

 

From large-scale system transformations to workflow optimization, One North helps teams unlock the full potential of Figma. We partner with organizations to create scalable design systems, improve collaboration, and build foundations that grow with their business. Learn more about One North’s Figma capabilities today.  

 

Matt Rogers

Product Design Lead

Matt is a Product Design Manager specializing in end-to-end digital design and product strategy. His agency background has given him expertise in fintech, healthcare, transportation, entertainment, and commerce. At One North, he collaborates with clients and internal teams to build innovative, accessible, and user-centered products that drive business outcomes.