Design tokens
Establishing a scalable design token system with minimal disruption to the existing design language.
Duration
5 months
Role
Product Designer
Tools
Figma
Google Doc
Jira
Confluence
Collaborators
Designers
PMs
Web Engineers
QA Engineers
Context
Suzy initially prioritized developing a UI kit over a token-based foundation due to resource limitations. This led to design inconsistencies and collaboration inefficiencies. Recognizing the need for a structured system, we decided to reverse-engineer a scalable token system based on existing UI styles.
Project Summary
To address these challenges, I led the transformation of Suzy’s UI kit into a structured, scalable design token system in a collaborative effort. Beyond defining the system, I drove team-wide adoption through education, documentation, and custom tooling, ensuring seamless integration into workflows.
Impacts
The success of this initiative was measured through token adoption rates, efficiency improvements, and stakeholder feedback. By tracking workflow enhancements, cross-functional alignment, and design iteration speed, we ensured the system was not only implemented but also delivered tangible business benefits.
%
Token adoption
%
Product iteration speed
%
Design decision speed
%
XFN collaboration satisfaction
✾ Bonus: I developed a custom Figma Variable Inspector plugin
To ensure proper adoption of Figma variables, I developed the Figma Variable Inspector plugin, which automatically scans selected elements, detects missing variable attachments, and provides error explanations. This automation eliminated manual review effort, improved handoff quality, and strengthened design-engineering collaboration, ensuring seamless implementation of design tokens across Suzy’s system.
✹ Project Overview ✹
Reverse-engineering a design token system
Introducing a token system into an existing UI library posed three key challenges:
How might we establish a scalable token system that preserves existing design choices while ensuring flexibility for future growth?
Key process
(1) Research and define token architecture
I studied mature design systems, analyzing how they structured token for scalability and usability. Sharing my research insights with the team, we decided to use a layered token model with contextual naming taxonomy, ensuring future flexibility while keeping adoption intuitive.
(2) Audit and categorize legacy UI
To align the token system with existing designs, I conducted a UI audit and collaborative workshops with designers. This process helped map out past design considerations across teams, identify patterns for token standardization, and resolve inconsistencies before implementation.
(3) Refine UI and gain stakeholder buy-in
I collaborated with designers to refine and validate UI improvements and worked with engineers, project managers to balance impact with current workload. Recognizing that major changes might be met with leadership resistance, I worked closely with marketing, sales, and business leaders to communicate how design tokens improve efficiency without disrupting product experience.
(4) Token implementation in Figma
We evaluated two implementation options: Token Studio vs. Figma Variables. Considering cost, workflow integration, and ease of use, I structured the token system directly within Figma Variables, a native and cost-effective solution that streamlined adoption across design and engineering teams.
Design token system
I established a design token system with 3 layers of abstraction and designed action-based token naming taxonomy.
Continue scrolling to view component detail breakdown.
✹ Deliverable highlights ✹
Token taxonomy
Our token taxonomy was inspired by Nathan Curtis's design token naming strategy, the name space stands Suzy's brand uniqueness, follow by the base layer representing foundations, and diverse unique structure or variant.
Global primitives
The foundation layer, defining fundamental values such as color, typography, spacing, and shadow. These tokens ensure a single source of truth for all design attributes.
Alias token
A contextual layer that refines design intent for a specific category, such as action type or display intent. By abstracting values into contextual-based variations, these tokens allow for flexible customization while preserving brand consistency.
Component-specific token
The final type of token is the component token. We only create component tokens when we require a specific value to represent the uniqueness associated with a particular component.
✾ Bonus: Custom Figma Plugin
Even with a well-structured token system, inconsistent application of Figma variables still impacted handoff quality and engineering collaboration. To address this, I developed a custom Figma plugin that: (1) Detects missing or incorrect variable attachments (2) Highlights affected elements and provides explanations. (3) Automates quality checks, reducing manual effort. This tool streamlined collaboration, improved handoff accuracy, and ensured adherence to the token system.
Product enhancement comparison
Our design token initiative ensured a seamless transition, preserving Suzy’s visual identity while improving maintainability. Below are two comparisons of Suzy's question setup feature before and after implementing design tokens, with every element attached to design tokens, there are only minimal changes to the platform's design.
Reflection
This initiative transformed Suzy’s UI kit into a structured, scalable design token framework, driving design consistency, engineering efficiency, and long-term adaptability. Beyond immediate workflow improvements, this system set the foundation for future scalability, ensuring that Suzy’s design system can evolve without accumulating technical debt. By balancing scalability with minimal disruption, I ensured that design tokens became a core foundation for Suzy’s evolving design system.
