Unblocking team velocity with Design Tokens

When I took over my role at MakeMusic, the design system wasn’t yet what it needed to be. Developers were maintaining components across two frameworks, Ember and React, which meant the same UI patterns existed twice, 28 duplicate components in total. That kind of technical debt doesn’t disappear overnight. We knew it would take time before we could migrate the entire web app into a single framework.

This context brought up the biggest pains to the surface:

• Lack of governance made design data hard to manage and deliver reliably into code. Without a token infrastructure any improvement or change couldn’t get done without a ton of manual work.

• Usage checks were time consuming, designers and developers often had to guess, constantly re-checking specs and accessibility, which slowed down production.

• Design data was scattered, visual foundations were missing, leading to redundant, outdated and inconsistent outcomes across the team.

We tackled this by setting up design foundations as tokens: color, typography, spacing, border, effects, icons and imagery. They were recorded through design libraries to centralize global contributions.

The token system relied on two types of variables primitives and semantic.

Primitives captured raw values like colors or spacing, while semantic tokens defined intent by referencing primitives.

An automated pipeline delivered tokens directly into code, following the classic workflow: propose, review, and merge.

This pipeline setup relied on figma, supernova and github. Library files from figma recorded primitives, semantic variables and vector images. Published improvements or changes to these libraries, were picked up by a configured hook in Supernova, which triggered a pull request in Git.

This level of control provided visibility and granularity to estimate impact. Orchestrating changes became a matter of simply planning improvements.

By establishing a token infrastructure with a semantic naming, design libraries and the code reflected the same logic, which immediately reduced drift and confusion between designers and devs. Collaboration would change completely, what used to be a painful back-and-forth of checking specs and fixing inconsistencies turned into a shared language. Designers could focus on intent, developers could trust the values.

The achieved highlights,

96% time cut

For token automation through automatic synchronisation.

65% time drop

In production design for designers with up to date libraries.

40% faster delivery

Of interface implementations for developers.

Changes flowing smoothly through the system, unblocked feature teams during delivery. Setting these grounds allowed frictionless upgrades, increasing scalability and fast transitions.