Design tokens were retrofitted based on a set of project-wide color styles, following Nathan Curtis’s approach outlined in his “Naming Tokens in Design Systems” Medium article. With the client’s visual branding comprising around 12 brand colors, we incorporated 350 tokens into existing files and the component library. These tokens feature two layers of hierarchy: the semantic layer, tailored to use cases like borders or backgrounds using Figma’s color styles, and the global layer, employing Figma variables linked to color styles.

Implementing tokens in the front end involved a streamlined, lightweight flow, minimizing tooling to offer developers greater control over when changes are applied. This approach is crucial, given our role as an external stakeholder contributing to future-proofing the design-development interface. Three critical Figma files support the token flow: ‘Design System’ holds cross-referenced tokens; ‘Component Library’ maintains patterns and elements for ‘RFD File’ screen designs. Token changes in the ‘Design System’ cascade across files. The ‘Component Library’ manages semantic token allocation, and a plugin renders ‘Design System’ tokens into a JSON file. Uploaded to a GitLab repository, designers document changes based on a joint protocol. As version control, the GitLab JSON file is accessible to developers, ensuring seamless integration.