Spike: Testing Coverage for Design Token CSS Color Variables Against Figma JSON

[georgewrmarshall]

Description

TL;DR: The task is to build a test that confirms the Figma JSON hex code aligns with the CSS variable hex code

This task aims to explore and establish a robust testing framework for our design token CSS variables, ensuring they accurately reflect the design specifications defined in our Figma JSON. By achieving comprehensive testing coverage, we aim to maintain consistency between our design assets and implementation, thereby enhancing the fidelity of our UI components to the original design intent.

TIME BOX: 1 day

Technical Details

• Objective: Develop unit tests for CSS variables against the design tokens defined in the Figma JSON file.
• Approach:
  1. Extract design tokens from the Figma JSON file and convert them into a format that can be easily compared against the CSS variables in our stylesheet.
  2. Create a testing suite that can automatically parse the CSS stylesheet and extract CSS variables.
  3. Implement comparison logic to match CSS variables against the design tokens extracted from Figma, identifying discrepancies.
  4. Explore integration of this testing suite into our CI/CD pipeline to ensure ongoing alignment between design and implementation.
• Tools/Technologies Considered: Node.js for scripting, Jest for testing, PostCSS for parsing CSS stylesheets, and potentially Figma API for automating the extraction of design tokens.

Acceptance Criteria

• A testing framework or script is successfully developed and can accurately compare design token CSS variables in our stylesheet against the tokens defined in Figma JSON.
• Discrepancies between the CSS stylesheet and Figma design tokens are easily identifiable, with clear reporting on mismatches.
• The testing process is efficient, ideally automated, and can be integrated into our development workflow to prevent future inconsistencies.