Revamping Design Token Management at CBS Sports

Intro

I joined the Design System team at CBS Sports as its second full-time member and was tasked with improving their end-to-end design token system. At the time, the system was quite barebones. Token updates were manually communicated via slack and a developer was required to trigger the script that pulled tokens from Figma and translated them to SCSS.

For what was needed at the time, this process wasn’t unsuitable. One token set being distributed to one web team didn’t require sophistication. However, the future of the Playbook Design System was multi-brand/platform and would require a bit more control from our side.

Exploration

Research

We began by speaking with the design and development users from teams we’d be providing tokens for.  Interviews, process walkthroughs and data gathered from Figma/Code repo’s helped uncover some primary issues.

1. (Automation) Manual token update process often caused friction across Design and Development.

2. (Education/Documentation) Users of the system lacked the comprehension needed to understand the value of abiding by it. 

3. (Advancement/Expansion) Growth of the Design System will outpace the current token process.

Identifying these holes in our system gave us a strong starting point when exploring different solutions. We began exploring solutions and planning out the future of Playbook Design Tokens. 

As a team of two, we weren’t focused on just this project alone. Playbook had plans for expansion across our component libraries, documentation, supported platforms and more. This pushed us toward searching for a third-party solution that would require a bit less hands-on management than owning our own DS repository. We explored two platforms, Zeroheight and Supernova. Both were “Design System as a Service” platforms that provided Token Processing, Documentation and General Design System management at differing levels of sophistication. Comparatively however, Supernova ended up being a much better value for what we needed.

Supernova

Supernova addressed our first issue as it allowed for automated token updates to code once updated in Figma. Once we pushed an update to our Figma files, Supernova would run a ”Pipeline" that took our Figma Token data, converted it to the required platform (SCSS, Tailwind, iOS, Android, etc.), then delivered it to our repositories via a Pull Request .

These exporters were provided by Supernova with the ability to branch out your own version with customized capabilities. We ended up doing a bit of customization to the default token formats. (Show some customizations we made. Eg. Hex w/ Alpha to RGBA, conversion to REM, ShortenHex, etc.)

Since we found that many of our users were unsure of the value of the work we were doing, a side project broke out called Figma Academy (Provide a link to my other project working on DS education at Figma) However, there was still a bit of work we could do in Supernova to push Design System comprehension. The platform's ability to connect directly to our Figma Files, Tokens and Components made it easy for us to build out robust documentation with real-world examples.

Expansion was our last box to check and Supernova took the cake here as the design token pipeline was easy to use and expand. Since we planned on going from one brand on one platform to multiple brands across multiple platforms, it was imperative that we had this flexibility. The general experience for using Supernova also seemed to be better geared towards our needs. Providing us an easily digestible space to manage a system across multiple spaces. 

Building

We spent the next few weeks building our environment in Supernova and testing the end-to-end workflow.

Figma Library Change -> Supernova Pulls Tokens -> Update Pushed -> Translates Tokens to desired platform -> Delivers to Github Repo via PR -> Automated Github Announcement in Slack -> Changes Approved by Lead Engineer

We also created some high-level documentation to test the editor experience. Direct connection between Supernova and our Figma libraries made it easy to migrate our old documentation. This would eventually become the central hub for Playbook DS Users to discover, learn and use the system. 

Outcome

Implementation of this system provided a number of outcomes. For one, we were no longer stuck with lingering token update tickets that caused friction between teams. Updates that were previously being pushed off for days or weeks were now being completed in just a few hours. Everyone liked that.

It also provided us with a new level of control. Any tokens that weren’t supported by Figma (This was before Variables: Spatial, Type Props, etc.) were no longer being managed by our Engineering team, but by us. This allowed for stronger alignment on naming convention and usage, removing some issues that would occur during handoff. 

For the future, this system set us up for success when it came time to onboard new brands and teams. Over time we set up two more brands, that both spanned 3 platforms (Web, Mobile, OTT). Supernova's management capabilities made this process smooth and universal for otherwise silo’d teams.